前言

随着微信小程序的广泛应用，越来越多的商家选择将营销阵营选择迁移到了小程序中，但受其小程序体积限制的影响，不能够完全满足商户的要求，应运而生的web-view组件很好的解决的这一问题。一方面内嵌web-view能够直接运行在小程序中，大大减少了商户的开发成本，另一方面能够实现小程序与h5的跳转，有良好的扩展性，方便商户多端间引流。

一、web-view内嵌h5与传统小程序对比

通过查找相关资料发现，内嵌web-view和微信小程序在离线能力、页面切换体验、二次渲染，操作响应和开发灵活性上有如下对比，在不同场景下可能性能上有些许出入，仅供参考。



表格来源：https://segmentfault.com/a/1190000017752299

从上表中可以对比出 H5 相较于小程序的优缺点，开发者可以根据实际需要选择。此外，使用web-view还有以下优点：

（1）己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆

比如你是某门户网站，需要识别自己小程序上的用户与网站用户的关系，可以通过三种方法绑定关系，公众号，小程序原生，小程序web-view内嵌跳转三种方法。

（2）内嵌H5的富文本，减少重复开发

比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，音视频自定义的点击事件等，小程序的原生组件可能无法兼容，这时候直接内嵌这些H5新闻，将会大大降低开发成本。

（3）热更新，减少发布审核

内嵌H5可以减少频繁提交小程序审核，商户只需要重新发布h5的版本，就可以更新内嵌web-view的内容。

<script type="text/javascript" src='//res.wx.qq.com/open/js/jweixin-1.4.0.js'></script

3.4 web-view和小程序间通信

官方给出了两种通信方法。

1、postMessage 通信 在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需要分享的信息，推送给小程序。 在用户点击了小程序后退、组件销毁、分享这些特殊事件之后，小程序页面通过 bindmessage 绑定的函数读取 post 信息。

2、设置 web-view 组件的 URL 通信 H5 跳转小程序：

// 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进行调试。

五、踩过的小坑

（1）H5唤醒一些小程序API有一定的延时，0.3~1秒；

（2）请调用小程序专用的JSSDK，公众号中的JSSDK不通用；

（3）web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用；

（4）web-view后边跟的h5链接，必须要url转义，否则会和小程序自身的符号定义冲突，可能识别不到？后的参数；

（5）H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。

（6）postMessage的json必须是data开始，不然接收不到数据。

（7）bindmessage相关：

• 小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会触发。
• 分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage。
• 组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。

（8）内嵌h5跳转小程序是有严重缓存的，比如：h5页面有计时器，跳转小程序后计时器依然会计时，可以通过在url后面加时间戳的方式解决。

还有小程序已经关闭，H5自带的背景音乐仍然在手机后台播放，可以通过浏览器标签页被隐藏或显示的时候会触发visibilitychange（页面可见性状态）事件解决。

六、总结

看到这里，相信大家对于内嵌web-view已经有了大致的了解，我们主要对内嵌web-view与传统小程序进行对比，分析了内嵌web-view的优缺点，其次对如何配置内嵌web-view进行了阐述，然后对实战中内嵌web-view如何调试进行了示例，最后对实战中可能踩坑和注意的小点进行了友情提示。所以如果本篇文章有帮助到你的话，小编会非常欣慰，欢迎点赞和转发呦~