小程序嵌套H5的方式和技巧（一）

文章内多次使用了关键字“壳”，首先先解释一下什么是壳

壳: 小程序由原生的web-view组件形成的页面，页面只包含技术逻辑（如打开H5页面），不包含具体业务接口请求和业务逻辑处理

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

具体例子，前端开发少不了与input元素打交道。当input聚焦的一刹那（onfocus），使用小程序开发和H5开发有着截然不同的体验，如键盘弹起速度，弹起位置，键盘的种类等等，小程序有着原生APP的体验，而H5则体验较差。

三、小程序与H5的通信

1.小程序向H5通信：

目前只有一种方式，就是通过设置web-view组件里的src属性中的链接参数来传递数据，H5通过URL里的参数来获取小程序传递来的数据。

2.H5向小程序通信：

目前也只有一种方式，通过wx.miniProgram.postMessage来向小程序传递数据，小程序通过在web-view组件上bindmessage绑定回调事件来接收数据，注意：bindmessage绑定的事件不是实时能获取wx.miniProgram.postMessage传递的数据，而是特定的时机（小程序后退、组件销毁、分享）

好了！今天的文章先更新到这里，本篇文章主要是理论，下一篇都是满满的干货！