微信小程序中webView的H5与小程序通信

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

我在前面写过"微信小程序webView嵌入H5小结"，里面通信这一个没有具体描述，这次有个需求，需要从后台配置内容H5获取内容，然后通过分享小程序，所以了解了这一部分；
注意：只有用户点击了小程序的后退、分享按钮或者是小程序嵌入的H5页面销毁才能触发参数的传递，否则是不会触发。

一.H5传值；

1. H5判断是否是在微信小程序中，因为H5可能不止在小程序中嵌套，还可能单独在浏览器中打开，所以只有在小程序中才触发这个传值；
2. H5传值，主要方法是wx.miniProgram.postMessage({ data:postData })；里面的这个data值就是小程序需要接收的值；
3. 页面调用方法，因为我主要是分享传值，所以会传一些分享的内容，你可以传你需要传的内容； 注意：如果你只有首页需要有分享，详情页不需要分享，但是首页传值了，详情页没有传值，这样的话，用户从首页点击了分享，再到详情页点击分享还会是首页的分享内容哦,如果是想一样就不用管，为了解决这个问题，我把本地链接localurl也传值过去了，然后当分享时，获取到的本地链接与webview的链接不符，说明不需要分享，或者分享是小程序默认

import wx from 'weixin-js-sdk';
//调用postMsg
//在获取分享内容之后
 let query = {
  title: '分享标题',
  path: url, //需要分享的页面地址
  imageUrl:'',//分享的图片地址；
};  
 this.postMsg(query);
 
postMsg(msg) {
    try {
      //小程序环境设置
      var ua = window.navigator.userAgent.toLowerCase();
      //判断是否是微信环境
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {                     
      //微信小程序环境
      wx.miniProgram.getEnv(function (res) {                
         //在这里写传值分享； 
         let dataType = typeof msg 
         let postData = {}
         if (dataType == 'object') {
              postData = msg
         } else if (dataType == 'string') {
              postData['msg'] = msg
         } else {
              postData['postdata'] = msg
         }
         postData['localurl'] = location.href;
        wx.miniProgram.postMessage({ data:postData })
      })
  }
}
catch (ex) {
  console.log(ex);
}
}

二.小程序接收值；

1. 页面web-view上添加@message参数，每次接收的参数是一个数组，然后最后一次通信是在数组的最后一个，所以取值用e.detail.data.length-1；
2. 在分享时区分是否是当前页的分享；

<web-view  :src="src" @message="message"></web-view>
message(e){
    //e.detail.data就是H5传过来的参数；这里我都是接收的分享的值；
    this.title = e.detail.data[e.detail.data.length - 1].title || ''
    this.path = e.detail.data[e.detail.data.length - 1].path || ''
    this.imageUrl = e.detail.data[e.detail.data.length - 1].imageUrl || ''
    this.localurl = e.detail.data[e.detail.data.length - 1].localurl || '' //这个是用来存储传值的H5地址；
}
onShareAppMessage(option) {
    //分享
    let shareWvUrl = option.webViewUrl; //这个是用来获取web-view当前页面的地址；
    let shareData = {
	title: "默认分享",
        path:'/pages/index/index', //默认地址
        imageUrl:'默认图片',
    }
    //这里判断是否两个值相等；如果相等就重新赋值shareData
    if(shareWvUrl == this.localurl){
        shareData = {
            title: this.title || "默认分享",
            path: this.path ? '/pages/web-v/web-v?url=' + encodeURIComponent(_this.path) '/pages/index/index',
            imageUrl: this.imageUrl || '默认图片',
        }
    }
  return shareData
}