小程序web-view wx.miniProgram.postMessage 坑記錄

　　web-view吧，其實微信官方應該是非常不支持在小程序上嵌套web的，它希望你直接用小程序上的代碼，而放棄web的實現，當然，也是為了防止用小程序去嵌套別的廣告頁面。所以官方對web-view的操作是，它永遠是界面的最上層及z-index最大，而且web-view只能全屏顯示。從而，就可以在web-view之上嵌套任何控件，而官方提供web-view與網頁之間的交互，只有src和bindmessage，同時還有一些跳轉及在js中調用相關代碼（wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo）讓開發者可以從web-view的頁面跳轉到別的頁面，還有一個獲取當前環境的方法wx.miniProgram.getEnv（其實這個方法也只能用在小程序內，小程序外是無法執行的，所以其實也沒有什么判斷對錯的操做）。

　　可能更多人會把注意力放到bindmessage和上，按照文檔上寫的，Js可以通過wx.miniProgram.postMessage的方法，向小程序傳遞數據，小程序通過  <web-view src="{{report_src}}" bindmessage="bindGetMsg"></web-view> 然后通過bindGetMsg方法獲取到到相關參數，但這是一個無底之坑，因為bindGetMsg這個方法只能在生命周期處於不可操着的狀態也就是在onHide這個狀態才會被調用，也就是這個不是實時監聽的。做到這里就有點尷尬了，這樣所謂的“分享”操作也無法實現了，但項目需要這樣的操作怎么辦，我的解決辦法，也就跟以前微信打開網頁的操作一樣，在網頁上提示點擊右上角轉發。這個也是做微信服務號得出的結果。

 

轉發兼容IOS方法：

h5頁面每次跳轉頁面 時　

wx.miniProgram.postMessage()

 

小程序分享

 1.wxml:

<web-view src="{{src}}" bindmessage="bindmessage"></web-view>

2.js:

bindmessage:function(e){
    console.log("獲取推送消息");
    console.log(e.detail)
    this.setData({
        history:e.detail.data[e.detail.data.length-1]
   })
},

onShareAppMessage: function (res) {
    return {
        title: '標題',
        path: this.data.history
    }
}

 

 

 

參考：https://blog.csdn.net/huangpb123/article/details/80588693