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內的支付按鈕，執行完業務邏輯，支付條件準備完畢，如今須要調起微信支付。

小程序啓動

1. 小程序啓動。
2. 啓動Response.wxml，webview加載後臺頁面。
3. 啓動Main.wxml，保留Response.wxml後臺頁面在後臺運行，前臺主界面加載頁面。啓動完畢。

開始支付

1. 主界面請求jssdk wx.miniProgram.navigateTo接口向Request.wxml界面發起請求，path中攜帶請求數據。
2. Request.wxml原生程序接收到請求，發現支付請求並不須要保留界面，立馬返回上一個界面(前臺主界面)；而後後臺繼續處理支付請求，調起微信支付。
3. 前臺主界面H5此時應該是在等待Request.wxml的響應結果，而且微信已經彈出支付功能。
4. 用戶支付完成，Request.wxml殘留代碼收到支付響應結果，立馬通知Response.wxml修改後臺頁面src中的hash，響應結果數據包含在其中。
5. 後臺頁面監聽到hash change事件，或 頁面剛剛加載完畢事件。從hash中拿到響應數據。
6. 後臺頁面把響應數據寫入localStroage，前臺頁面監聽到localStroage數據。成功獲得支付響應數據。

問題缺陷

第2步雖然當即返回了，但仍是會有一個短暫的界面切換動畫，不過這種數據交互原本就是重量級的，也不可能頻繁調用，Android和水果都是同樣的，因此用戶體驗就是這麼可觀。

改變webview src hash產生的行爲是不可預測的 ，任性的版本，若是會刷新頁面，延遲會比較大，甚至致使兩次調用之間相互覆蓋結果。

應用案例

筆者最近開發的小程序《祝福賀卡助手》，主功能採用的純web網頁，底層和微信小程序的數據交互就是本文介紹的這套模式。有2個比較重要的交互接口，一個是獲取用戶數據、另一個是調起分享；固然還有一堆其餘輔助類的接口。

掃碼體驗

網頁版：

小程序版：

界面和功能開發一遍，網頁、小程序通吃~ 這就是Hybrid小程序的魅力！

---

圍繞着小程序《祝福賀卡助手》的開發和審覈上線過程，對於其中一些有趣的東西，我會分享出來。

下篇內容預告：Hybrid小程序混合開發之路 - H5錄音和水果的對抗。