小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5

简介：微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台配置，使用 web-view 完成登录业务以及在实战中如何调试，一次性带你感受小程序内嵌 H5 的风采，帮你更有底气的使用微信小程序新组件 web-view。

微信小程序

一、技术选择：

1.H5 转成小程序方案路线优缺点对比：

H5 转成小程序方案路线优缺点对比

上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比，基于时间的限制以及当前主流多端编译的可靠性考量，最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是要在基础库在1.6.4+及以上才可以用，而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上，这个指标也符合产品大人的要求，于是便愉快的选择了 web-view 内嵌 H5 的技术方案。

2.H5 跳转小程序：

H5 跳转小程序

从上表中可以对比出 H5 相较于小程序的优缺点，方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以小程序开发的灵活性没有 H5 那么高，这就要我们注意对交互设计的评估。

二、web-view 微信小程序配置系列问题