文章內多次使用了關鍵字“殼”，首先先解釋一下什么是殼
殼: 小程序由原生的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傳遞的數據，而是特定的時機（小程序后退、組件銷毀、分享）
好了！今天的文章先更新到這里，本篇文章主要是理論，下一篇都是滿滿的干貨！