uni-app使用web-view与web-view内嵌H5页面进行路由跳转的实现方法

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。

可用于业务场景：H5页面需发起小程序层支付，H5页面可通过uni.webView.navigateTo跳转至小程序中间支付页完成父层小程序的支付，同理，如分享页面也可通过类似方法实现。