微信小程序嵌入 H5 页面(webview)基本用法和父子传参数说明

背景:

最近实现一个功能需要在小程序嵌入其它系统内部的一个页面(用vue写的H5页面),但小程序是无法使用iframe的,所以最终选择小程序官方的webview实现,本文对基本用法和父子传参进行说明。 所以下面将说明:

  1. 小程序官网配置业务域名
  2. 标签的用法。
  3. 父子传参数。
  4. H5 跳转回小程序。

一、 小程序官网配置业务域名

小程序官方要求配置,如果不配置在趁机上会无法打开,但在微信开发者工具正常
步骤: 在微信小程序后台,开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名(最多200个);

二、标签的用法

web-view 承载网页的容器。会自动铺满整个小程序页面,不能像iframe那样能设置某个区域

ini 复制代码
直接使用标签即可
 <web-view src="xxxxxxxxxx"></web-view>

三、父子传参数

以下我把本地小程序形容为父,被嵌入系统形容为子
父传子:

ini 复制代码
 <web-view src="{{webUrl}}"/>
javascript 复制代码
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拼接过去,子通过window.location.href.replace获取到内容

子传父:

在子系统(被嵌入) 需要安装官方的weixin-js-sdk包:

(1)安装:

csharp 复制代码
 pnpm add weixin-js-sdk

(2)使用的页面引入:

javascript 复制代码
import wx from "weixin-js-sdk";

(3)使用传参给父:

css 复制代码
wx.miniProgram.postMessage({ 
    data: { token } 
});

父系统(小程序)

ini 复制代码
<web-view src="{{webUrl}}" bindmessage="getMessage"/>
javascript 复制代码
//接收网页数据
 getMessage: function (res) {
    let token = res.detail.data;
    this.setData({ token });
  },

四、 H5 跳转回小程序。

需要用到上面引入的weixin-js-sdk包

javascript 复制代码
const name = '天天'
wx.miniProgram.navigateTo({
  url: `/pages/my/my?name=${name}` , // 小程序地址
  success () {
    console.log('question success')
  },
  fail (error) {
    console.log(error)
  }
})

父系统能拿到?后面的传参数

javascript 复制代码
onLoad(option) { 
    this.name = JSON.parse(option.name); 
},

更多weixin-js-sdk包的API可以去官网查:点击跳去

相关推荐
程序员爱钓鱼7 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子8 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆9 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了10 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆15 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆15 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆16 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆17 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er24 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子24 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript