因?yàn)轫?xiàng)目原因，之前在微信小程序內(nèi)部使用 webview 嵌套了 h5 頁面，現(xiàn)在要添加一個(gè)新的功能，用戶在哪個(gè)頁面進(jìn)行了分享，被分享的用戶從鏈接進(jìn)來就跳轉(zhuǎn)到哪個(gè)分享頁面。

先了解一下 web-view 組件的限制，web-view 是承載網(wǎng)頁的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁面。目前個(gè)人類型小程序不支持使用。

src 屬性里放置 webview 要打開的網(wǎng)頁鏈接，需要注意的是在管理后臺(tái)配置要訪問網(wǎng)頁的域名，否則生產(chǎn)模式無法進(jìn)行訪問。開發(fā)版和體驗(yàn)版可以通過點(diǎn)擊小程序右上角三個(gè)點(diǎn)打開調(diào)試來進(jìn)行訪問。

小程序頁面轉(zhuǎn)發(fā)分享需要自身定義了一個(gè)轉(zhuǎn)發(fā)的相關(guān)事件 onShareAppMessage，這個(gè)事件在設(shè)置之后可以通過點(diǎn)擊小程序右上角的三個(gè)點(diǎn)來觸發(fā)，也可以通過為小程序頁面添加 button 標(biāo)簽，設(shè)置 button 的屬性 open-type=”share” 來觸發(fā)。

webview 是內(nèi)嵌的網(wǎng)頁，內(nèi)部頁面無法直接調(diào)起小程序的轉(zhuǎn)發(fā)。

這個(gè)需求實(shí)現(xiàn)的特殊之處在于要分享的頁面為 webview 中的頁面，而 webview 作為一個(gè)容器，它放在了小程序的一個(gè)頁面中，我們所看到的頁面跳轉(zhuǎn)都是在這個(gè)容器中進(jìn)行的，小程序無法直接獲取容器的跳轉(zhuǎn)路徑。

所以為了實(shí)現(xiàn) webview 中的頁面分享，把 h5 頁面地址作為參數(shù)傳輸，在接收的頁面中取出并賦值到當(dāng)前頁面 webview 中的 src 中，即可進(jìn)行展示。

如何拿到 webview 中當(dāng)前的頁面鏈接，以及一些動(dòng)態(tài)參數(shù)如何傳遞給小程序？

動(dòng)態(tài)參數(shù)包括要跳轉(zhuǎn)的 h5 頁面地址，分享鏈接展示的圖片這些參數(shù)需要通過 h5 頁面來進(jìn)行獲取，然后 h5 再傳輸給小程序，小程序分享的時(shí)候進(jìn)行攜帶。

查閱開發(fā)文檔 webview 看到 bindmessage 屬性，網(wǎng)頁向小程序 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)(小程序后退、組件銷毀、分享)觸發(fā)并收到消息。e.detail = { data }，data 是多次 postMessage 的參數(shù)組成的數(shù)組。

H5 網(wǎng)頁需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序傳輸參數(shù)。

webview 通過 bindmessage 定義的方法接收 h5 傳輸?shù)臄?shù)據(jù)，需要注意的是，每次發(fā)送數(shù)據(jù)后數(shù)據(jù)都會(huì)添加到 e.detail.data 中的數(shù)組，并不會(huì)清除掉上一次傳遞的數(shù)據(jù)，所以我們?nèi)?shù)組的最后一位元素。

由此，h5 頁面引入 JSSDK 1.3.2，使用 wx.miniProgram.postMessage 發(fā)送參數(shù)，小程序頁面使用 webview 的 bindmessage 屬性接收參數(shù)即可完成動(dòng)態(tài)參數(shù)的傳遞。

總結(jié)

以上是生活随笔為你收集整理的小程序内嵌h5页面分享_微信小程序webview内页面分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。