1. 程式人生 > >關於小程式中的web-view與網頁之間的互動

關於小程式中的web-view與網頁之間的互動

       說到小程式,就很自然的想到vue,在我看來,小程式就是在vue上做了很多限制,管理而成的。簡單來說,因為vue是開源的,所以小程式就是以來微信上的vue,當然這個是基於微信龐大的使用者群的基礎上生成的,微信也可以從B端收取費用。也就是使用者變現的機制。

        廢話不說了,先說說小程式中的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和wx.miniProgram.postMessage上,按照文件上寫的,Js可以通過wx.miniProgram.postMessage的方法,向小程式傳遞資料,小程式通過  <web-view src="{{report_src}}" bindmessage="bindGetMsg"></web-view> 然後通過bindGetMsg方法獲取到到相關引數,但這是一個無底之坑,因為bindGetMsg這個方法只能在生命週期處於不可操著的狀態也就是在onHide這個狀態才會被呼叫,也就是這個不是實時監聽的。做到這裡就有點尷尬了,這樣所謂的“分享

”操作也無法實現了,但專案需要這樣的操作怎麼辦,我的解決辦法,也就跟以前微信開啟網頁的操作一樣,在網頁上提示點選右上角轉發。這個也是做微信服務號得出的結果。

        最後,希望官方能最終出一些針對呼叫分享實現的相關介面(可能性不大)希望小程式可以越做越好(雖然作為Android開發並不是很希望)。