快捷導(dǎo)航

微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)詳細(xì)說明

更新時(shí)間：2024年08月22日 10:56:14 作者：天天鴨

微信小程序中嵌入H5頁(yè)面通常指的是在小程序中使用Web-view組件來加載外部的網(wǎng)頁(yè),下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)的相關(guān)資料,需要的朋友可以參考下

背景：

最近實(shí)現(xiàn)一個(gè)功能需要在小程序嵌入其它系統(tǒng)內(nèi)部的一個(gè)頁(yè)面（用vue寫的H5頁(yè)面），但小程序是無法使用iframe的，所以最終選擇小程序官方的webview實(shí)現(xiàn)，本文對(duì)基本用法和父子傳參進(jìn)行說明。所以下面將說明：

小程序官網(wǎng)配置業(yè)務(wù)域名
標(biāo)簽的用法。
父子傳參數(shù)。
H5 跳轉(zhuǎn)回小程序。

一、小程序官網(wǎng)配置業(yè)務(wù)域名

小程序官方要求配置，如果不配置在趁機(jī)上會(huì)無法打開，但在微信開發(fā)者工具正常
步驟： 在微信小程序后臺(tái)，開發(fā)->開發(fā)管理->開發(fā)設(shè)置->業(yè)務(wù)域名這里添加需要嵌入到小程序里面 H5 頁(yè)面的合法域名（最多200個(gè)）；

二、標(biāo)簽的用法

web-view 承載網(wǎng)頁(yè)的容器。會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，不能像iframe那樣能設(shè)置某個(gè)區(qū)域

直接使用標(biāo)簽即可
 <web-view src="xxxxxxxxxx"></web-view>

三、父子傳參數(shù)

父?jìng)髯?本地系統(tǒng)傳到被嵌入的H5頁(yè)面)：

  //這是小程序頁(yè)面
 <web-view src="{{webUrl}}"/>

//這是H5頁(yè)面
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頁(yè)面通過window.location.href.replace獲取到內(nèi)容

子傳父（H5傳給小程序）：

注意： 在H5系統(tǒng)（被嵌入）需要安裝官方的weixin-js-sdk包，步驟如下：

(1)安裝：

pnpm add weixin-js-sdk

(2)使用的頁(yè)面引入：

import wx from "weixin-js-sdk";

(3)使用傳參給父：

wx.miniProgram.postMessage({ 
    data: { token } 
});

本地系統(tǒng)接收（小程序）

<web-view src="{{webUrl}}" bindmessage="getMessage"/>

//接收網(wǎng)頁(yè)數(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)查：點(diǎn)擊跳去

總結(jié)

到此這篇關(guān)于微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)詳細(xì)說明的文章就介紹到這了,更多相關(guān)微信小程序嵌入H5頁(yè)面webview內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: