uniapp实现与webview 嵌入的H5页面之间的相互通讯

465 阅读1分钟

uniapp混合式app的开发,可能会用到app嵌套h5或h5嵌套h5的场景,uniapp中有一个web-view组件我们可以基于web-view实现双向通信,以下是对不同情况下的使用总结:

1、h5页面向uniapp webview.vue页面传数据:

第一步:先在要引入的h5页面引入uni.webview.1.5.6.js

第二步:h5页面通过uni.postMessage({data: ''})发送数据;

第三步:uniapp端通过<web-view ref="webview" @message="reciveMessage" :src="websrc" class="box">中的@message接收数据。

第四步:uniapp端接受h5页面传来的数据函数

reciveMessage: function(data) { console.log(data.detail.data[0]); }

2、uniapp端webview.vue页面向h5页面传数据:

第一步:先在要引入的h5页面引入uni.webview.1.5.6.js;

第二步:在webview页面先声明变量context;

第三步:在onReady函数里执行函数:

if(uni.getSystemInfoSync().platform=='harmonyos'){context = uni.createWebviewContext('web',this)}

第三步:可以在reciveMessage函数里根据h5页面传来的数据进行判断,向h5发送数据:

context.evalJs(function(){})