uniapp开发app,webview与app相互通信

一、app向webview发送数据(传参),在index.vue页面

1、通过url传参
<view class="html-box">
 <web-view :src="'../../../hybrid/html/viewContract/index.html?data=' + obj" @message="getMessage" ref="wv"></web-view>
</view>
2、通过evalJS("uniEvent(`${params}`)")
data() {
 return {
 currentWebview: null,
 obj: null
 } 
},
onLoad() {
 const self = this;
 self.currentWebview = self.$scope.$getAppWebview().children()[0]
 //传递大量数据
 self.currentWebview.evalJS(`getParams(${JSON.stringify(res)})`)
},
methods: {
 saveContract() {//app通过事件向html发送数据
 const self = this;
 self.currentWebview.evalJS("uniEvent('saveContract')"); 
 },
}

二、webview接收app发来的数据(传参),在/hybrid/html/viewContract/index.html页面

1、通过url接收参数
<script type="text/javascript">
 console.log('接收url参数', decodeURIComponent(location.href.split('data=')[1]))
</script>
2、通过evalJS定义的方法接收参数
<script type="text/javascript">
 let dianziHetong = null;
 window.getParams = (data) => {
 console.log("webview内部:", data)
 dianziHetong = data
 console.log(dianziHetong)
 }
 window.uniEvent = function(data) {
 console.log('app发来的数据', data)
 }
</script>

三、webview向app发送数据(传参),在/hybrid/html/viewContract/index.html页面


1、通过uni.postMessage()
<script src="../js/uni-webview.js"></script>
<script type="text/javascript">
 document.addEventListener('UniAppJSBridgeReady', function() {
 uni.postMessage({
 data: {
 msg: 'saveContract',
 content: editor.txt.html()
 }
 });
 })
</script>

四、app接收webview发来的数据(传参),在index.vue页面


1、通过绑定事件getMessage获取
getMessage(e) {
 console.log('接收webview发来的数据', e.detail)
},
作者:会说话的树原文地址:https://segmentfault.com/a/1190000043940227

%s 个评论

要回复文章请先登录注册