uni-app webview H5頁面跳轉小程序頁面 各種方法;包括 postMessage可以觸發,但綁定的message方法不觸發問題

2022-03-29更新

由於postMessage方法使用限制條件過多（小程序后退、組件銷毀、分享才觸發）,考慮其他方案:

1.如果是普通跳轉,即navigateTo等,則直接跳轉時url?a=1進行傳參,目標頁面onLoad接收即可;

2.如果必須跳轉 tabBar 頁面,即使用switchTab方法,則 新建一個小程序中間頁面a,先navigateTo攜帶參數跳到a,再從a用switchTab跳至目標頁面,因為a已經是小程序頁面則在a頁面可以用EventChannel的emit, on等進行傳參;

備注:reLaunch也可以跳轉 tabBar 頁面,但是會銷毀其他頁面,如果原頁面 不能銷毀重新加載,則不能使用,反之,可以替換 2 使用

-----------------------------------

原因:需要跳轉到 小程序頁面才能觸發 ,停留在H5頁面無法觸發

微信官方api說明:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

wx.miniProgram.postMessage

向小程序發送消息，會在特定時機（小程序后退、組件銷毀、分享）觸發組件的message事件

正確代碼:

h5

wx.miniProgram.postMessage({ data: {
          queryPam: 'eeeee'
        }})
        wx.miniProgram.switchTab({ url: '/pages/queryEngineer/index' })

小程序頁面

<web-view v-if="showFlag" :src="webViewUrl" @message="message"></web-view>

message({ detail: { data } }) {
      console.log('====統計小程序webview綁定的message方法====')
      const fileData = data[0];
      console.log('$$$$$$$$$$$$$$$$$$$$$$$$$=111=message==fileData====',fileData)
      uni.$emit("tongjiTo", fileData);
    },