欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2024年08月22日 10:56:14   作者:天天鴨  
微信小程序中嵌入H5頁面通常指的是在小程序中使用Web-view組件來加載外部的網(wǎng)頁,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁面(webview)的基本用法和父子傳參數(shù)的相關(guān)資料,需要的朋友可以參考下

背景:

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

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

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

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

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

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

直接使用標(biāo)簽即可
 <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)查:點(diǎn)擊跳去

總結(jié) 

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

相關(guān)文章

最新評論