本文详细介绍在微信小程序中通过webview组件嵌入H5页面的配置与开发流程。重点解析业务域名配置、父子页面间的数据传递机制，包括小程序向H5传参及H5通过weixin-js-sdk向小程序回传数据的具体代码实现，并说明H5跳转回小程序的方法。
背景说明：
近期开发需求涉及在小程序内部嵌入由Vue构建的H5页面。由于小程序环境不支持iframe标签，最终采用微信官方提供的webview组件来实现该功能。本文将详细阐述webview的基础使用方法，以及小程序与H5页面之间的数据交互（父子传参）实现细节。
- 小程序官网配置业务域名
- webview标签的具体用法。
- 小程序与H5之间的数据传递（父子传参）。
- H5页面跳转回小程序的实现方式。
一、 小程序官网配置业务域名
根据微信小程序官方规范，必须配置业务域名，否则在真机设备上将无法打开页面（尽管在微信开发者工具中可能正常显示）。配置步骤如下：登录微信小程序管理后台，依次进入“开发”->“开发管理”->“开发设置”->“业务域名”，在此处添加需要嵌入小程序的H5页面的合法域名，最多可添加200个域名。
二、webview标签的用法
web-view组件是承载网页的容器。它会自动铺满整个小程序页面，无法像iframe那样指定特定的显示区域或尺寸。
直接使用标签即可
<web-view src="xxxxxxxxxx"></web-view>
三、父子传参数
父传子（从本地系统传到被嵌入的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，H5页面通过解析window.location.href获取内容。
子传父（从H5传给小程序）：
注意：在H5系统（被嵌入端）需要安装微信官方提供的weixin-js-sdk包，具体步骤如下：
(1)安装依赖：
pnpm add weixin-js-sdk
(2)在使用的页面引入SDK：
import wx from "weixin-js-sdk";
(3)调用接口向父级传递参数：
wx.miniProgram.postMessage({
data: { token }
});
本地系统接收（小程序端）：
<web-view src="{{webUrl}}" bindmessage="getMessage"/>
//接收网页数据
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)
}
})
父系统能拿到？后面的传参数
onLoad(option) {
this.name = JSON.parse(option.name);
},
更多关于weixin-js-sdk包的API文档，可前往官网查阅：点击跳去
总结
到此这篇关于微信小程序嵌入H5页面(webview)的基本用法和父子传参数详细说明的文章就介绍到这了,更多相关微信小程序嵌入H5页面webview内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！