uniapp webview h5和app交互通信传参-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp webview h5和app交互通信传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

app端,onPostMessage在nvue页面下接受参数，message在vue页面下接受参数

<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;

方法传参

data(){
	return{
		wv:null, // 定义(app)webview对象节点
	}
}
onReady() {
	// #ifdef APP-PLUS
		//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		var currentWebview = this.$scope.$getAppWebview();
		setTimeout(() => {
			this.wv = currentWebview.children()[0]
		}, 1000); //如果是页面初始化调用时，需要延时一下
	// #endif
},
methods:{
	//向H5页面发送消息
   upH5Event(msg){
	   // console.log(this.wv,'this.wv');
	   msg = JSON.stringify({name:'山粉虫水一雕',sdd:1561515})
	   this.wv.evalJS(`postJS(${msg})`);
   },
}

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;//通过获取链接地址拿参数

往APP传参

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

接受APP的方法传参，变量跟data里面的变量绑定文章来源地址https://www.toymoban.com/news/detail-606784.html

<script>
var conc;
 //接收app传递来的数据
 window.postJS = function(msg) {
         let aaa = JSON.stringify(msg)
         console.log('哈哈哈');
         console.log(aaa);
       conc.title =' 来自APP的你'
   }
 export default {
   data() {
      return {
         aa:{title:'uni'}
      }
   },
   created() {
       conc= this.aa
   },
 }
</script>