小程序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)
             }
           }
         }
       },