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

背景：

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

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

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

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

二、标签的用法

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,