Hybrid小程序混合開發之路 - 數據交互
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錄音和水果的對抗。
Hybrid小程序混合開發之路 - 數據交互