HTML+CSS是歷史悠久、超高自由度、控制精準、表現能力極強、編碼簡單、學習門檻超低、真跨平臺的一種UI介面開發方式。
本文介紹的是微信小程式和H5混合開發的一種資料互動方式。
很多應用在原生介面中混雜著HTML介面
記得xp時代的QQ，有些介面偶爾會彈出熟悉的js錯誤對話方塊，還能右鍵彈出熟悉的IE6的右鍵選單，偽裝的挺好，差點沒認出來，現在的QQ就不知道了。
美團、淘寶這些擁有幾乎無限介面的手機App，頂部進度條一亮，這是一個H5 沒誰了！
Electron！好嗨喲~
資料互動
使用了HTML作介面，那麼和原生程式之間的資料互動基本上是少不了的~（僅僅當做瀏覽器性質來用的就算了）~。
如原生程式要控制H5介面變化，就需要由原生程式傳出資料到H5。
如H5介面使用者點選動作觸發涉及原生程式業務邏輯的呼叫，就需要由H5傳入資料到原生程式。
這兩種資料傳輸組合在一起就成了互動。在自行嵌入瀏覽器核心、Electron都可以有自己的介面實現，Android、水果~（滑稽，本文與此物種無關，下同）~都有成熟的解決方案。
Hybrid App 與 Hybrid 小程式
Hybrid App並非一定是和H5的混合開發，但本文所說的專指H5。同一介面，編寫一次程式碼，就能同時執行在Android、水果、瀏覽器之上，說沒有誘惑力是假的。
小程式並非一定指的的某家的小程式，但本文所說的專指微信小程式。擁有一個強大的流量入口，嗯，就只這一點 ~（看好PWA）~。
自從微信小程式開放了webview，和Hybrid App就有了共性，然後生了個“Hybrid 小程式”，是我一個人這麼叫嗎？我不管，我就要叫！
然鵝，開發者對小程式底層的話語權幾乎為0，小程式給什麼我們就吃什麼，嗯，真香。雖然提供了webview，但未提直接的供互動手段（記得要雙向才能算互動嗎，單向傳遞資料一邊玩球）。
似乎Hybrid之路已然折戟。
Hybrid 小程式資料互動
終極手段，合理合法！
注：發現有人採用的是
websocket來實現的資料互動，原生小程式和H5都通過伺服器來中轉資料，點評：這也是個好辦法。
資料傳入
基本原理：H5使用wx.miniProgram.navigateTo傳遞資料給小程式原生程式程式碼。
資料傳出
基本原理：通過改變webview src中的hash，來實現無重新整理資料傳入原生小程式。最初開放webview時可用，後面有版本不行了，改變src中任意字元會導致重新載入介面，神奇的是現在又恢復了改變hash不會重新整理。
升級版：通過改變後臺webview src中的hash，實現資料傳入我們後臺頁面，不管有沒有重新載入，hash始終能被我們的H5程式碼接收（而且省去了處理url變化的問題）。然後由後臺頁面傳輸資料給前臺頁面。
實戰
舉個支付吧，點選H5內的支付按鈕，執行完業務邏輯，支付條件準備完畢，現在需要調起微信支付。
小程式啟動
- 小程式啟動。
- 啟動
Response.wxml，webview載入後臺頁面。 - 啟動
Main.wxml，保留Response.wxml後臺頁面在後臺執行，前臺主介面載入頁面。啟動完畢。
開始支付
- 主介面請求
jssdkwx.miniProgram.navigateTo介面向Request.wxml介面發起請求，path中攜帶請求資料。 Request.wxml原生程式接收到請求，發現支付請求並不需要保留介面，立馬返回上一個介面(前臺主介面)；然後後臺繼續處理支付請求，調起微信支付。- 前臺主介面H5此時應該是在等待
Request.wxml的響應結果，並且微信已經彈出支付功能。 - 使用者支付完成，
Request.wxml殘留程式碼收到支付響應結果，立馬通知Response.wxml修改後臺頁面src中的hash，響應結果資料包含在其中。 - 後臺頁面監聽到
hash change事件，或 頁面剛剛載入完畢事件。從hash中拿到響應資料。 - 後臺頁面把響應資料寫入
localStroage，前臺頁面監聽到localStroage資料。成功得到支付響應資料。
問題缺陷
第2步雖然立即返回了，但還是會有一個短暫的介面切換動畫，不過這種資料互動本來就是重量級的，也不可能頻繁呼叫，Android和水果都是一樣的，所以使用者體驗就是這麼可觀。
改變webview src hash產生的行為是不可預測的 ，任性的版本，如果會重新整理頁面，延遲會比較大，甚至導致兩次呼叫之間相互覆蓋結果。
應用案例
筆者最近開發的小程式《祝福賀卡助手》，主功能採用的純web網頁，底層和微信小程式的資料互動就是本文介紹的這套模式。有2個比較重要的互動介面，一個是獲取使用者資料、另外一個是調起分享；當然還有一堆其他輔助類的介面。
掃碼體驗
網頁版：
小程式版：
介面和功能開發一遍，網頁、小程式通吃~ 這就是Hybrid小程式的魅力！
圍繞著小程式《祝福賀卡助手》的開發和稽核上線過程，對於其中一些有趣的東西，我會分享出來。
下篇內容預告：Hybrid小程式混合開發之路 – H5錄音和水果的對抗。