微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)詳細說明
更新時間：2024年08月22日 10:56:14 作者：天天鴨
微信小程序中嵌入H5頁面通常指的是在小程序中使用Web-view組件來加載外部的網(wǎng)頁,下面這篇文章主要給大家介紹了關于微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)的相關資料,需要的朋友可以參考下
背景：
最近實現(xiàn)一個功能需要在小程序嵌入其它系統(tǒng)內部的一個頁面（用vue寫的H5頁面），但小程序是無法使用iframe的，所以最終選擇小程序官方的webview實現(xiàn)，本文對基本用法和父子傳參進行說明。所以下面將說明：
- 小程序官網(wǎng)配置業(yè)務域名
- 標簽的用法。
- 父子傳參數(shù)。
- H5 跳轉回小程序。
一、 小程序官網(wǎng)配置業(yè)務域名
小程序官方要求配置，如果不配置在趁機上會無法打開，但在微信開發(fā)者工具正常
步驟： 在微信小程序后臺，開發(fā)->開發(fā)管理->開發(fā)設置->業(yè)務域名 這里添加需要嵌入到小程序里面 H5 頁面的合法域名（最多200個）；
二、標簽的用法
web-view 承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，不能像iframe那樣能設置某個區(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獲取到內容
子傳父（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 跳轉回小程序。
需要用到上面引入的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)查：點擊跳去
總結
到此這篇關于微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)詳細說明的文章就介紹到這了,更多相關微信小程序嵌入H5頁面webview內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
基于微信小程序實現(xiàn)人臉數(shù)量檢測的開發(fā)步驟
最近項目需求是統(tǒng)計當前攝像頭中的人臉個數(shù),所以下面這篇文章主要給大家介紹了關于基于微信小程序實現(xiàn)人臉數(shù)量檢測的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了javascript Canvas動態(tài)粒子連線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要給大家介紹了關于JavaScript this關鍵字的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了如何在postman中添加cookie信息,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了bootstrapTable的參數(shù)設置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本篇文章主要介紹了js循環(huán)改變div顏色具體方法，需要的朋友可以參考一下2013-06-06
javascript實現(xiàn)checkBox的全選，反選與賦值
這篇文章主要介紹了javascript實現(xiàn)checkBox的全選，反選與賦值的方法，以實例形式詳細分析了實現(xiàn)的思路及對應的html與js代碼的實現(xiàn)過程2015-03-03
javascript之Partial Application學習
在數(shù)學中，一個函數(shù)是描述每個輸入值對應唯一輸出值的這種對應關系，符號為 f(x)。例如，表達式 f(x)=x2表示了一個函數(shù) f，其中每個輸入值x都與唯一輸出值x2相聯(lián)系2013-01-01
void類型和never類型都是ts新增的類型，這兩者的共同點是都常見用于聲明函數(shù)的返回值的類型，這里我們把它們兩放在一起介紹有助于大家區(qū)分，這篇文章主要介紹了ts中的void和never類型及區(qū)別,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了如何分別使用Vue和JavaScript實現(xiàn)全選與反選功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04