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

 

 

 

參考：http://www.javashuo.com/article/p-vpqvvehv-ba.html