uniapp webview交互以及h5传参到app

app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数
app端只能在一开始给链接赋值时能携带参数传给h5,其他时候不能传参,即使将src删了重新赋值也不行

<web-view :src="mapUrl" webview-styles="progress:false;" @message="message" @onPostMessage="message"></web-view>

//接受网页传递的信息
message(e){
	console.log('来自网页',e)
	let data = e.detail.data[0];
},

示例传参,能传挺多的

let obj = {
	aa:'fsafsafsaf',
	token: info.token,
	bb:'bvvvvvvv'
};
console.log('收拾收拾',obj)
let fs = JSON.stringify(obj);
let params = encodeURIComponent(fs);
this.mapUrl = 'h5链接?jyy='+params;

H5端,我这是用vue2写的
在index.html页面加上这个

 <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

在首页接受参数

let data = this.$route.query.jyy;//通过获取链接地址拿参数

往h5传参

 uni.webView.postMessage({
   data:{
    name:'on no!!!!',
    type:666
  }
});

你可能感兴趣的:(uni-app,交互,前端)