共计 2506 个字符，预计需要花费 7 分钟才能阅读完成。
前言
随着微信小程序的广泛应用，越来越多的商家抉择将营销营垒抉择迁徙到了小程序中，但受其小程序体积限度的影响，不可能齐全满足商户的要求，应运而生的 web-view 组件很好的解决的这一问题。一方面内嵌 web-view 可能间接运行在小程序中，大大减少了商户的开发成本，另一方面可能实现小程序与 h5 的跳转，有良好的扩展性，不便商户多端间引流。
一、web-view 内嵌 h5 与传统小程序比照
通过查找相干材料发现，内嵌 web-view 和微信小程序在离线能力、页面切换体验、二次渲染，操作响应和开发灵活性上有如下比照，在不同场景下可能性能上有些许出入，仅供参考。
| / | 内嵌 web-view | 微信小程序 |
|---|---|---|
| 离线能力 | 低 | 高 |
| 页面切换体验 | 中 | 高 |
| 二次渲染 | 高 | 低 |
| 操作响应 | 高 | 低 |
| 开发灵活性 | 高 | 低 |
表格起源：https://segmentfault.com/a/11…
从上表中能够比照出 H5 相较于小程序的优缺点，开发者能够依据理论须要抉择。此外，应用 web-view 还有以下长处：
- 己方账号（第三方）与小程序 openId/UnionId 的关联绑定，实现免登陆
比方你是某门户网站，须要辨认本人小程序上的用户与网站用户的关系，能够通过三种办法绑定关系，公众号，小程序原生，小程序 web-view 内嵌跳转三种办法。
- 内嵌 H5 的富文本，缩小反复开发
比方你是门户网站，社区，以往有大量的新闻和帖子，外面带了各种 css 款式的富文本，音视频自定义的点击事件等，小程序的原生组件可能无奈兼容，这时候间接内嵌这些 H5 新闻，将会大大降低开发成本。
- 热更新，缩小公布审核
内嵌 H5 能够缩小频繁提交小程序审核，商户只须要从新公布 h5 的版本，就能够更新内嵌 web-view 的内容。
二、web-view 小程序配置
2.1 配置域名
业务域名中配置的就是小程序以及 H5 和 H5 中援用 iframe 的域名。如果 H5 中有内嵌的 iframe 也要配置进去，须要服务端进行配合，将校验文件搁置在将要嵌套的业务域名的根目录。
2.2 根底库抉择
web-view 要在根底库 1.6.4 以上的版本库能力应用，微信官网统计根底库在 1.6.4+ 的覆盖率已达 95% 以上，这个指标能满足产品的需要。
2.3 h5 引入微信 jssdk
web-view 要在微信 sdk 引入之后，微信 sdk 版本要求至多 1.3.2，其中蕴含了 h5 和小程序间接的通信办法。
<script type="text/javascript" src='//res.wx.qq.com/open/js/jweixin-1.4.0.js'></script>2.4 web-view 和小程序间通信
官网给出了两种通信办法。
- postMessage 通信 在 H5 中须要先用 wx.miniProgram.postMessage 接口，把须要分享的信息，推送给小程序。在用户点击了小程序后退、组件销毁、分享这些非凡事件之后，小程序页面通过 bindmessage 绑定的函数读取 post 信息。
- 设置 web-view 组件的 URL 通信 H5 跳转小程序：
<view>
<web-view src="{{url}}" ></web-view>
</view// h5 中跳转小程序
navigateToWeixin() {wx.miniProgram.navigateTo({url: '/pages/shop/index'});
}
// 小程序跳转 h5-- 第一步
<view>
<web-view src="{{url}}" ></web-view>
</view>
// 小程序跳转 h5-- 第二步：在小程序的 js 文件中设置通过 URL 以问号传参的形式传入参数到 H5 中
if(!option.page){
this.setData({url: `${this.data.url}?${test}`
});
} else {
this.setData({url: `${this.data.url}${option.page}?${test}`
});
}三、内嵌 web-view 调试解决方案
首先通过微信开发者工具关上，这里 url 本地调试能够跟局域网链接，开发者工具能够实时显示，如果跟的是线上链接，可能只能通过预览扫码。
右键点击页面，左上角会呈现调试，能够在右图的调试器中对 h5 进行调试。
四、踩过的小坑
- H5 唤醒一些小程序 API 有肯定的延时，0.3~1 秒；
- 请调用小程序专用的 JSSDK，公众号中的 JSSDK 不通用；
- web-view 肯定是撑满全屏的，自定义顶部菜单，悬浮的都没用；
- web-view 后边跟的 h5 链接，必须要 url 本义，否则会和小程序本身的符号定义抵触，可能辨认不到？后的参数；
- H5 管制小程序的跳转门路必须是“/”结尾，如“/pages/xxx/xxx”，且门路必须在 app.json 里有，地址谬误的话，有时不报错；
- postMessage 的 json 必须是 data 开始，不然接管不到数据；
- bindmessage 相干：
- 小程序后退：应用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面 / 场景的 API 时候都会触发
- 分享：这个就是当你点分享小程序的时候，会承受到 H5 之前发送的 postMessage。
- 组件销毁，web-view 组件销毁，相似 wx.miniProgram.redirectTo 都会触发。
- 内嵌 h5 跳转小程序是有重大缓存的，比方：h5 页面有计时器，跳转小程序后计时器仍然会计时，能够通过在 url 前面加工夫戳的形式解决。
还有小程序曾经敞开，H5 自带的背景音乐依然在手机后盾播放，能够通过浏览器标签页被暗藏或显示的时候会触发 visibilitychange（页面可见性状态）事件解决。
总结
看到这里，置信大家对于内嵌 web-view 曾经有了大抵的理解，咱们次要对内嵌 web-view 与传统小程序进行比照，剖析了内嵌 web-view 的优缺点，其次对如何配置内嵌 web-view 进行了论述，而后对实战中内嵌 web-view 如何调试进行了示例，最初对实战中可能踩坑和留神的小点进行了情谊提醒。所以如果本篇文章有帮忙到你的话，小编会十分快慰，欢送点赞和转发呦~
