提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

uni-app:从webview跳转到应用内其他页面(hbuilderx 3.7.3)

Appwebview应用 页面 其他 跳转 uni 3.7
2023-09-14 09:01:15 时间

一，代码：

1,页面代码：

<template>
    <view>
        <web-view :fullscreen="true" :style="{height:height+'px'}" :webview-styles="webviewStyles" :src='websrc' allow></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                                    progress: {
                                        color: '#FF3333'
                                    },
                                    height:"100%",
                                },
                height:getApp().globalData.contentHeight,
                websrc:"http://www.lhdtest.com/test/web.html",
            }
        },
        methods: {
        }
    }
</script>

<style>
</style>

2,web-view内嵌网页的代码:

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="renderer" content="webkit" />
<title>uni-app跳转测试页面</title>
<meta name="keywords" content="web-view,加载,本地,远程,html,调用,uni,api,网页,vue,页面,通讯" />
<meta name="description" content="uni-app跳转测试页面 content"  />
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
    <button class="btn-list" data-action="navigateTo" >跳转到应用内图片页面</button>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {  
    document.querySelector('.btn-list').addEventListener('click', function(evt) {
        var target = evt.target;  
        if (target.tagName === 'BUTTON') {  
            var action = target.getAttribute('data-action');  
            if(action === 'navigateTo') {  
                uni.navigateTo({  
                    url: '/pages/image/image'
                });  
            }  
        }  
    });  
});

</script>
</body>
</html>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看hbuilderx的版本: 

相关文章