快速小程序开发之微信小程序内嵌 H5
120 浏览量
2021-03-29
16:54:57
上传
评论
收藏 140KB PDF 举报
快速小程序开发之微信小程序内嵌快速小程序开发之微信小程序内嵌 H5
今日励志语
要接受自己行动所带来的责任而非自己成就所带来的荣耀。
前言
微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将
从业务选型，微信小程序后台配置，使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风
采，帮你更有底气的使用微信小程序新组件 web-view。
技术选择
H5 转成小程序方案路线优缺点对比
上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比，基于时间的限制以及当前主流多端编译的可靠性考
量，最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是
要在基础库在1.6.4+及以上才可以用，而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上，这个指标也符合产品大人的
要求，于是便愉快的选择了 web-view 内嵌 H5 的技术方案。
H5 和小程序技术对比
(此图片来源于网络，如有侵权，请联系删除! )
从上表中可以对比出 H5 相较于小程序的优缺点，方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以
小程序开发的灵活性没有 H5 那么高，这就要我们注意对交互设计的评估。
web-view 微信小程序配置系列问题
配置域名
业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配
置进去
这里需要服务端的朋友配合一下，将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持，否则会有
各种扯皮的问题
选择基础库
开发的时候不要忘记配置微信小程序的基础库，注意 web-view 要在基础库1.6.4以上的版本库才能使用
H5 中引入微信的 jssdk,其中包含了h5和小程序直接的通讯方法
web-view 与小程序的通信
官方给出了两种通信方法（如下图所示） 1、postMessage 通信 在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需
要分享的信息，推送给小程序。 在用户点击了小程序后退、组件销毁、分享这些特殊事件之后，小程序页面通过
bindmessage 绑定的函数读取 post 信息。 2、设置 web-view 组件的 URL 通信 H5 跳转小程序：
toWeixin() {
wx.miniProgram.navigateTo({url: '/pages/myWelfare/myWelfare'});
}
小程序跳转 H5： 首先在 .wxml 中引入 web-view 组件
<view>
<web-view src="{{url}}" ></web-view>
</view>
之后在小程序的 js 文件中设置通过 URL 以问号传参的方式传入参数到 H5 中
if(!option.page){
评论0