首页>新闻中心>最新动态

小程序嵌套H5的方式和技巧(一)

任小川 2021-12-09

src=http___oscimg.oschina.net_oscnet_4cf503b2f92dc64df03f946a79b1e7a7efb.png&refer=http___oscimg.oschina.jpg


一、小程序嵌套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