uni-app使用web-view与web-view内部H5页面进行通信交互的方法
近期有业务需求,需要在uniapp中的构建的微信小程序嵌入另一个uniapp构建的h5页面进行交互的需求,翻了官方文档,发现官方文档的例子仅仅是针对原生html的,调试很多次之后,学会了在uniapp中引入uniwebview的方法,故记录一下。
1.在uniapp的H5项目中创建入口index.html文件
项目根目录下打开manifest.json文件,创建模板路径。
2.在index.html文件下引入官方示例的文件
<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>
注意引用顺序,因为uni.webview.1.5.2.js是基于jweixin-1.4.0.js之上的,故要在后面引入。
3.在index.html下测试,是否引入成功
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>
如正常输出环境变量,则说明引入成功
4.在需要交互的H5页面中直接调用uni.webView即可控制父层路由函数
如:uni.webView.navigateTo
其他方法类似,需注意不是直接用uni.navigateTo而是要使用uni.webView.navigateTo。