0


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里面的变量绑定

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

本文转载自: https://blog.csdn.net/m0_46978096/article/details/131704596
版权归原作者 前端菜鸟丶Ndie 所有, 如有侵权,请联系我们删除。

“uniapp webview h5和app交互通信传参”的评论:

还没有评论