uni-app webview页面和小程序:间传值

最近项目有遇到 小程序内嵌套webview的场景，整站嵌套的，这样就避免不了H5和小程序之间通信，小程序用的uniapp写的，H5是用vue写的，

首先在H5页面引入微信的JS

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

然后再引入uniapp 的JS

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

然后在H5页面 因为我的H5是用VUE写的 所以这段代码要放在VUE的mounted钩子函数里执行

1.  
   document.addEventListener('UniAppJSBridgeReady', function() {
2.  
   uni.postMessage({
3.  
   data: {
4.  
   options:'来自H5的问候'
5.  
   }
6.  
   });
7.  
   uni.getEnv(function(res) {
8.  
   console.log('当前环境：' JSON.stringify(res));
9.  
   });
10.  
    });

1.  
   uni.postMessage({
2.  
   data: {
3.  
   options:'来自H5的问候'
4.  
   }
5.  
   });

这个就是H5页面向uniapp页面传值的方法 要传的值一定要写到data里面！！！！！；

这样H5 就布置完了 主要是uniapp 端取值

先附上uniapp webview的文档 https://uniapp.dcloud.io/component/web-view

如文档所说的 在webview标签上绑定 @message,来获取H5传来的值

1.  
   getMessage(e) {
2.  
   console.log(e)
3.  
   let data = e.detail.data
4.  
   },

这样还不行！！！！ 

因为绑定的方法getMessage只有在特定情况下才被会调用

 分享不适合我现在的需求  销毁。。没试，我是在后退这个时机调用取值的

首先把webview页面复制一份，一毛一样的，第一个webview 标签上不绑定message，在复制的webview页面绑定message 取值

第一个webview

	 <web-view :src="src"></web-view>

复制的webview

	 <web-view :src="src" @message="getMessage"></web-view>

然后在第一个webview页面里让页面一加载完就跳到复制的webview页面，额。。要加个判断条件 不然两个页面一直互跳...

1.  
    
2.  
    
3.  
    
4.  
   //主webview
5.  
    
6.  
   <template >
7.  
   <view>
8.  
   <web-view :src="src"></web-view>
9.  
    
10.  
    </view>
11.  
    </template>
12.  
     
13.  
    <script>
14.  
    export default {
15.  
     
16.  
    data() {
17.  
    return {
18.  
    src:'https://xxxx',
19.  
    nav:true,
20.  
    };
21.  
    },
22.  
    onLoad(options) {
23.  
    if(this.nav){
24.  
    this.navto()
25.  
    }
26.  
     
27.  
    },
28.  
    methods:{
29.  
    navto(){
30.  
    uni.navigateTo({
31.  
    url:'../nwebview/nwebview'
32.  
    })
33.  
    },
34.  
     
35.  
    }
36.  
    }
37.  
    </script>

然后进入复制的webview

1.  
   <template >
2.  
   <view>
3.  
   <web-view :src="src" @message="getMessage"></web-view>
4.  
    
5.  
   </view>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
     
11.  
    data() {
12.  
    return {
13.  
    src:'https:xxx',
14.  
     
15.  
    };
16.  
    },
17.  
    onLoad(options) {
18.  
     
19.  
    setTimeout(()=>{
20.  
    this.navto()
21.  
    },3000)
22.  
     
23.  
    },
24.  
     
25.  
    methods:{
26.  
    navto(){
27.  
    var pages = getCurrentPages();
28.  
    var currPage = pages[pages.length - 1]; //当前页面
29.  
    var prevPage = pages[pages.length - 2]; //上一个页面
30.  
    // 然后改变第一个webview的nav状态 ，这样返回之后就不会再次跳过来了
31.  
    prevPage.nav = false;
32.  
    uni.navigateBack({
33.  
    delta:1
34.  
    })
35.  
    },
36.  
    getMessage(e) {
37.  
    console.log(e.detail.data)
38.  
     
39.  
     
40.  
     
41.  
    },
42.  
    }
43.  
    }
44.  
    </script>
45.  
     

这样从第一个webview跳过来后 再使用navigateback就达到@message的调用条件了 其他细节就不说了

这样就可以通过getMessage方法来获取H5   传来的值了，

uniapp 给H5传值更简单  只要在webview的src地址上拼接就行了

这篇好文章是转载于：学新通技术网