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

微信小程序嵌入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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論