小程序webview数据传输postmessage

前言

首先个人类型小程序不支持webview的使用，其次需要到微信公众平台配置业务域名，这个业务域名就是webview的合法域名；以上两点是必要条件

代码模块

1. 小程序代码块

   <web-view src="http://jialidun.club/" bindmessage="getMSG"></web-view>
   

     getMSG(e){
       console.log('============这里返回postMessage对应的对象============')
       console.log(e)
     },
   

2. webview网页端代码块

   先看下官方文档说明：wx.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件；这里需要特别强调特定时机，下面罗列几种常见的方法，拍坑指南三部曲；

   • 小程序后退触发（必须得有两个界面及以上才能触发）

     使用 wx.miniProgram.navigateBack 必须要小程序的界面栈大于等于2，不清楚界面栈的看文档（小程序界面栈链接），因为如果没有上级界面你是不能通过navigateBack去返回的，**需要特别注意，得先返回再去postMessage，**下面是webview和小程序的代码块；

     //小程序代码块wxml
     <web-view src="http://jialidun.club/" bindmessage="getMSG"></web-view>
     

     //小程序代码块js
       getMSG(e){
         console.log('============这里返回postMessage对应的对象============')
         console.log(e)
       },
     

     // webview代码块js,需要特别注意，得先返回再去postMessage
       wx.miniProgram.navigateBack({
          delta: 1
      })
      wx.miniProgram.postMessage({
          data: '获取成22222功'
      })
     

   • 组件销毁（略略略）

   • 分享触发

     	// webview代码块
         var obj = {
             'url': '/pages/index/index?shareUserId=213214',
             'shareDesc': '分享的描述',
             'shareImage': 'https://profile.csdnimg.cn/4/6/5/2_qq_35713752',
             'shareTitle': '要分享标题'
         }
         wx.miniProgram.postMessage({
             data: obj
         })        
     

      // 小程序代码块
      onShareAppMessage(options) {
         let shareObj = this.data.shareObj;
         if (shareObj) {
           return {
             title: shareObj.shareTitle,
             desc: shareObj.shareDesc,
             path: shareObj.url,
             imageUrl: shareObj.shareImage,
             success: function(res) {
               console.log(res)
             }
           }
         }
       },