uniapp中运用web-view组件的经验

最新推荐文章于 2024-05-04 03:41:24 发布

我是小贺爸爸啊~

最新推荐文章于 2024-05-04 03:41:24 发布

阅读量7.9k

点赞数 6

分类专栏： uniapp 小程序 web-view组件文章标签：前端 uni-app javascript

本文链接：https://blog.csdn.net/m0_47267820/article/details/131086185

版权

uniapp 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

小程序

1 篇文章 0 订阅

订阅专栏

web-view组件

1 篇文章 0 订阅

订阅专栏

在 uniapp 开发中，有时候需要在vue页面中嵌入一个webview组件，用来加载一些本地或远程的网页。但是，如何在vue页面和webview之间实现数据的传递和通信呢？常用的方法是使用uniapp官方提供的组件webview ,使用uni-app提供的 UniAppJSBridgeReady 事件和postMessage方法，来实现 vue 页面和 webview 之间的双向数据交换。

在 web-view加载页面中，会涉及wx、plus、uni等对象的使用。

在小程序下使用wx的api，需要引入微信提供的https://res.wx.qq.com/open/js/jweixin-1.4.0.js。
在app下默认有plus对象，不需要引入js文件。
不管是在小程序下还是在app下，使用uni的api，需要引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

在 web-view 加载页面中，会涉及wx、plus、uni等对象的使用，话不多说上代码！！！

监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。

从 HTML 向应用发送消息！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
    <!-- uni 的 SDK，必须引用。 -->  
    <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
    <script type="text/javascript">
	var path = '/pages/index/index'
	var code = 'nanaaijunjun09141125'
            // UniAppJSBridgeReady事件会在uni.webview.js相关代码加载完成后触发。
			document.addEventListener('UniAppJSBridgeReady', function() {
            alert('正在监听 UniAppJSBridgeReady ....')
				if(path == '/pages/index/index') {
					uni.postMessage({ data:{code} }) // 发送数据
					uni.switchTab({
						url: path
					}); // 需要路由跳转的页面
				} else {
					uni.redirectTo({
						url: path + '?code=' + code
					}); // 关闭当前页面，跳转到应用内的某个页面。 
				}
			});
		
    </script>
</body>
</html>

但是当我测试的时候发现，通过 pc 端进入微信小程序，H5 向 vue 传送数据失败！！！发现是UniAppJSBridgeReady 没有触发的缘故。后来试了很多次，利用延时语句，发现是不定时的触发。后来参考了支付宝小程序的使用文档，模仿使用 window.UniAppJSBridge，完美解决问题。最终代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FOLLOWING进入</title>
</head>
<body>
    <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
    <!-- uni 的 SDK，必须引用。 -->  
    <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
    <script type="text/javascript">
        // h5页面获取小程序传参
        console.log('WebVie 调试器')
        // 获取url中"?"符后的字符串并正则匹配
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg); 
            var context = "";
            if (r != null)
                context = decodeURIComponent(r[2]);
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined" ? "" : context;
        }
        var code = GetQueryString('code')
        var path = GetQueryString('state')
		
		if (window.UniAppJSBridge) { // 所有主流浏览器，除了 IE 8 及更早 IE版本
			if(path == '/pages/index/index') {
				uni.postMessage({ data:{code} })
				uni.switchTab({
					url: path,
				});
			} else {
				uni.redirectTo({
					url: path + '?code=' + code
				});  
			}
		} else {
			document.addEventListener('UniAppJSBridgeReady', function() {  
				if(path == '/pages/index/index') {
					uni.postMessage({ data:{code} })
					uni.switchTab({
						url: path,
					});
				} else {
					uni.redirectTo({
						url: path + '?code=' + code
					});  
				}
			});
		}
    </script>
</body>
</html>