微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)詳細說明
背景：
最近實現(xiàn)一個功能需要在小程序嵌入其它系統(tǒng)內(nèi)部的一個頁面（用vue寫的H5頁面），但小程序是無法使用iframe的，所以最終選擇小程序官方的webview實現(xiàn)，本文對基本用法和父子傳參進行說明。所以下面將說明：
- 小程序官網(wǎng)配置業(yè)務(wù)域名
- 標簽的用法。
- 父子傳參數(shù)。
- H5 跳轉(zhuǎn)回小程序。
一、 小程序官網(wǎng)配置業(yè)務(wù)域名
小程序官方要求配置，如果不配置在趁機上會無法打開，但在微信開發(fā)者工具正常
步驟： 在微信小程序后臺，開發(fā)->開發(fā)管理->開發(fā)設(shè)置->業(yè)務(wù)域名 這里添加需要嵌入到小程序里面 H5 頁面的合法域名（最多200個）；
二、標簽的用法
web-view 承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，不能像iframe那樣能設(shè)置某個區(qū)域
直接使用標簽即可 <web-view src="xxxxxxxxxx"></web-view>
三、父子傳參數(shù)
父傳子(本地系統(tǒng)傳到被嵌入的H5頁面)：
//這是小程序頁面
<web-view src="{{webUrl}}"/>
//這是H5頁面
created() {
// H5獲取token const wxobj = {}
window.location.href.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (wxobj[k] = v))
if ( wxobj.token) {
store.commit( 'user/setToken', wxobj.token)
}
}
小程序用url拼接過去，H5頁面通過window.location.href.replace獲取到內(nèi)容
子傳父（H5傳給小程序）：
注意： 在H5系統(tǒng)（被嵌入） 需要安裝官方的weixin-js-sdk包，步驟如下：
(1)安裝：
pnpm add weixin-js-sdk
(2)使用的頁面引入：
import wx from "weixin-js-sdk";
(3)使用傳參給父：
wx.miniProgram.postMessage({
data: { token }
});
本地系統(tǒng)接收（小程序）
<web-view src="{{webUrl}}" bindmessage="getMessage"/>
//接收網(wǎng)頁數(shù)據(jù)
getMessage: function (res) {
let token = res.detail.data;
this.setData({ token });
},
四、 H5 跳轉(zhuǎn)回小程序。
需要用到上面引入的weixin-js-sdk包
const name = '天天'
wx.miniProgram.navigateTo({
url: `/pages/my/my?name=${name}` , // 小程序地址
success () {
console.log('question success')
},
fail (error) {
console.log(error)
}
})
父系統(tǒng)能拿到？后面的傳參數(shù)
onLoad(option) {
this.name = JSON.parse(option.name);
},
更多weixin-js-sdk包的API可以去官網(wǎng)查：點擊跳去
總結(jié)
到此這篇關(guān)于微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)詳細說明的文章就介紹到這了,更多相關(guān)微信小程序嵌入H5頁面webview內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中的流程控制語句是編寫復雜邏輯和控制程序執(zhí)行順序的關(guān)鍵元素,這篇文章主要介紹了JavaScript流程控制語句的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-12-12
按位“異或”運算符 (^)是對兩個表達式執(zhí)行按位異或，下面為大家介紹下其具體的使用方法2014-03-03
本文主要對JavaScript常量定義進行詳細介紹，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了js和jquery分別驗證單選框、復選框、下拉框的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
前端實現(xiàn)HTML網(wǎng)頁轉(zhuǎn)PDF并導出
這篇文章主要為大家詳細介紹了前端如何通過html2canvas和jsPDF實現(xiàn)HTML網(wǎng)頁轉(zhuǎn)PDF并導出,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2025-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript在web自動化測試中的作用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了微信小程序時間控件picker view的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12![js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]](http://img.jbzj.com/images/xgimg/bcimg7.png)
js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]
W3C的標準告訴我們，可以通過Dom對象的contentDocument屬性來返回文檔對象。2011-01-01
bootstrap-paginator服務(wù)器端分頁使用方法詳解
這篇文章主要為大家詳細介紹了bootstrap-paginator服務(wù)器端分頁的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點，使JavaScript成為非常適合函數(shù)式編程的編程語言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下2022-09-09