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文件

uni-app使用web-view与web-view内嵌H5页面进行路由跳转的实现方法_第1张图片项目根目录下打开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-app使用web-view与web-view内嵌H5页面进行路由跳转的实现方法_第2张图片
如:uni.webView.navigateTo
其他方法类似,需注意不是直接用uni.navigateTo而是要使用uni.webView.navigateTo。

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

你可能感兴趣的:(uniapp,微信小程序,小程序,vue.js,html5)