小程序嵌套H5的方式和技巧(一)
任小川 2021-12-09
一、小程序嵌套H5的模式种类
1.单壳内跳模式
打开小程序后,进入入口页面(首页)后,其他跳转都是通过window.location.href跳转的
2.单壳自跳模式
小程序只有一个壳A,每次跳转都是由壳A跳转壳A,通过path里传递不同的参数,从而打开不同的H5页面
3.主原从壳模式
为了更好的用户体验和使用微信强大的能力,主要页面采用小程序原生开发,次要页面采用壳套H5页面开发。
主要页面:拥有复杂的业务逻辑或用户交互。
次要页面:主要是展示作用的页面,用户交互和数据交互很少或者没有。
4.组合模式(没有金刚钻别揽瓷器活,不推荐用此模式)
模式1+模式2+模式3有两种及两种以上的模式应用,所以叫组合模式
二、小程序嵌套H5后失去的优势
1.更快的加载速度
1)小程序的代码加载完成后,才会加载H5代码
2)小程序的代码在手机上有缓存,H5代码不会被缓存(设置缓存除外)
因此小程序嵌套H5后加载内容和展示页面的速度会更慢。
2.更强大的能力
小程序原生能力包含用户信息,支付,数据统计,广告平台,位置服务,与硬件交互的能力(蓝牙,Wifi,NFC),与系统的交互(文件,扫码,剪切板,电话)等,H5页面具备这些能力。
3.原生APP的体验
三、小程序与H5的通信
1.小程序向H5通信:
目前只有一种方式,就是通过设置web-view组件里的src属性中的链接参数来传递数据,H5通过URL里的参数来获取小程序传递来的数据。
2.H5向小程序通信:
目前也只有一种方式,通过wx.miniProgram.postMessage来向小程序传递数据,小程序通过在web-view组件上bindmessage绑定回调事件来接收数据,注意:bindmessage绑定的事件不是实时能获取wx.miniProgram.postMessage传递的数据,而是特定的时机(小程序后退、组件销毁、分享)
好了!今天的文章先更新到这里,本篇文章主要是理论,下一篇都是满满的干货!
公众号
关注公众号
微信咨询
企业微信号
咨询热线
咨询热线
4006996211