因為項目原因,之前在微信小程序內部使用 webview 嵌套了 h5 頁面,現在要添加一個新的功能,用戶在哪個頁面進行了分享,被分享的用戶從鏈接進來就跳轉到哪個分享頁面。
先了解一下 web-view 組件的限制,web-view 是承載網頁的容器,會自動鋪滿整個小程序頁面。目前個人類型小程序不支持使用。
src 屬性里放置 webview 要打開的網頁鏈接,需要注意的是在管理后臺配置要訪問網頁的域名,否則生產模式無法進行訪問。開發版和體驗版可以通過點擊小程序右上角三個點打開調試來進行訪問。
小程序頁面轉發分享需要自身定義了一個轉發的相關事件 onShareAppMessage,這個事件在設置之后可以通過點擊小程序右上角的三個點來觸發,也可以通過為小程序頁面添加 button 標簽,設置 button 的屬性 open-type=”share” 來觸發。
webview 是內嵌的網頁,內部頁面無法直接調起小程序的轉發。
這個需求實現的特殊之處在于要分享的頁面為 webview 中的頁面,而 webview 作為一個容器,它放在了小程序的一個頁面中,我們所看到的頁面跳轉都是在這個容器中進行的,小程序無法直接獲取容器的跳轉路徑。
所以為了實現 webview 中的頁面分享,把 h5 頁面地址作為參數傳輸,在接收的頁面中取出并賦值到當前頁面 webview 中的 src 中,即可進行展示。
如何拿到 webview 中當前的頁面鏈接,以及一些動態參數如何傳遞給小程序?
動態參數包括要跳轉的 h5 頁面地址,分享鏈接展示的圖片這些參數需要通過 h5 頁面來進行獲取,然后 h5 再傳輸給小程序,小程序分享的時候進行攜帶。
查閱開發文檔 webview 看到 bindmessage 屬性,網頁向小程序 postMessage 時,會在特定時機(小程序后退、組件銷毀、分享)觸發并收到消息。e.detail = { data },data 是多次 postMessage 的參數組成的數組。
H5 網頁需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序傳輸參數。
webview 通過 bindmessage 定義的方法接收 h5 傳輸的數據,需要注意的是,每次發送數據后數據都會添加到 e.detail.data 中的數組,并不會清除掉上一次傳遞的數據,所以我們取數組的最后一位元素。
由此,h5 頁面引入 JSSDK 1.3.2,使用 wx.miniProgram.postMessage 發送參數,小程序頁面使用 webview 的 bindmessage 屬性接收參數即可完成動態參數的傳遞。