小程序内嵌H5页面

古城微笑少年丶 2022-11-04 00:51 220阅读 0赞

### 文章目录 ###

*   *  web-view概况
     *  web-view的限制
     *  小程序跳转 H5并传参
     *  web-view 与小程序的通信
     *  h5页面内使用JSSDK 1.3.2提供的接口返回小程序页面
     *  小程序工具中调试内嵌h5页面
     *  注意事项

## web-view概况 ##

使用web-view 标签能在小程序中打开外部网页，但是要打开的网页的域名必须跟小程序的业务域名（业务域名可以在小程序的后台管理界面添加）一致，否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’，在开发的时候还是能打开的，但也没用，线上是打不开的。

不管有没有内容，<web-view> 会占满整个屏幕。

内嵌H5，更新代码发布上线可以绕过审核。

1.  index.wxml

<web-view src="https://www.baidu.com/"></web-view>

## web-view的限制 ##

使用限制：对个人类型和海外类型的小程序暂不支持  
指向域名的限制：域名必须为 https 协议且经过ICP备案  
域名修改限制：一个小程序最多可添加20个域名，一年可修改50次  
基础库限制：基础库 1.6.4 以上版本支持这组件  
注：配置域名时，需要从配置后台下载校验文件放在域名根目录下，验证通过后才能配置成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]

## 小程序跳转 H5并传参 ##

![在这里插入图片描述][20210303134801819.png]

**首先在 .wxml 中引入 web-view 组件**

**通过 URL 以问号传参的方式传入参数到 H5 中**

if(!option.page){ 
      this.setData({ 
        url: `${ this.data.url}?${ test}`
      });
    } else { 
      this.setData({ 
        url: `${ this.data.url}${ option.page}?${ test}`
      });
    }

## web-view 与小程序的通信 ##

官方给出了两种通信方法  
1、postMessage 通信 在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需要分享的信息，推送给小程序。 在用户点击了小程序后退、组件销毁、分享这些特殊事件之后，小程序页面通过 bindmessage 绑定的函数读取 post 信息。  
2、设置 web-view 组件的 URL 通信 H5 跳转小程序：

toWeixin() { 
     wx.miniProgram.navigateTo({ url: '/pages/myWelfare/myWelfare'});
    }

## h5页面内使用JSSDK 1.3.2提供的接口返回小程序页面 ##

[https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]

## [小程序工具中调试内嵌h5页面][h5] ##

## 注意事项 ##

1：如果h5页面有请求必须是https请求；  
2：如果内嵌h5域名不是和当前小程序一样，需要在小程序后台配置业务域名；  
3：内嵌的h5页面占满了整个屏幕覆盖了原有组件；（通过以下方式可以解决但是在开发者工具上没有效果在真机上可以显示）

<web-view src="{ {url}}">
        <cover-view class="tool-bar">
            <cover-image src="../../images/gif/fcv58.gif" class="nav-bg"></cover-image>
            <cover-view class="tool-btn">
                <cover-view >
                    <button   plain="true"  open-type="contact" session-from="weapp">客服</button>
                </cover-view>
            </cover-view>
        </cover-view> 
    
       <cover-view class="tool-btn-bar">
            <cover-image src="../../images/gif/btnv58.gif" class="nav-btn-bg"></cover-image>
            <cover-view class="tool-btn-btn">
                <cover-view >
                    <button  bindtap="sendKey" plain="true" open-type="contact" session-from="weapp">客服</button>
                </cover-view>
            </cover-view>
        </cover-view>
    </web-view>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20221023/b66186ae010e4bd08b1d12038d27f07e.png
[20210303134801819.png]: /images/20221023/cc9705177da047fcaaf96145d224fec9.png
[https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
[h5]: https://blog.csdn.net/peter_123456/article/details/102524526