前言
随着微信小程序的广泛应用，越来越多的商家抉择将营销营垒抉择迁徙到了小程序中，但受其小程序体积限度的影响，不可能齐全满足商户的要求，应运而生的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如何调试进行了示例，最初对实战中可能踩坑和留神的小点进行了情谊提醒。所以如果本篇文章有帮忙到你的话，小编会十分快慰，欢送点赞和转发呦~