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(){})