前言
移動開發(fā)的跨平臺與快速發(fā)布一直是開發(fā)者的追求油湖，也是技術的一個發(fā)展趨勢饰豺，現(xiàn)在各大廠開始有了自己的大前端團隊晦闰，所以我們也開始了自己的探索嚣鄙，目前來說主要有兩種思路：
-
Hybrid App代表:Cordova
通過Webview加載Web頁面吻贿，在Native和Web頁面之間建立雙向通信 -
H5代碼Native化 代表:ReactNative,Weex等
使用各平臺Api，把H5代碼編譯成二進制代碼直接運行
其實關于這兩種思路對比哑子，網(wǎng)上有很多大牛分析的很全面了舅列，總結來說各有利弊很難完美肌割，本篇文章我們主要講一下Hybrid App實踐，采用前后端分離以及單頁應用技術開發(fā)Web頁面帐要，使用WebView加載Web頁面把敞，并通過JS通信提供一些Native層的支持，通過接口獲取差異化頁面資源文件榨惠，在本地整合更新奋早，還可以達到熱更新的需求。在我看來此方案更適用于需要快速發(fā)布赠橙、多端兼容耽装、對性能要求稍低的業(yè)務，正好符合我們的需求简烤。
源碼
這里我整理了Android端會用到代碼，包含JS通信摇幻，文件處理工具類横侦，閃屏輔助類和WebView的封裝。
Github地址：https://github.com/free46000/HybridFoundation绰姻，請大家多多關注枉侧，由于源碼并沒有完善，所以暫時沒有發(fā)布到Maven倉庫
方案詳解
既然確定了方向狂芋，那么就應該確定具體的方案了榨馁，通過自己的經(jīng)驗和網(wǎng)上資料整理，畫了時序圖：
按照圖上的時序帜矾，接下來說一下每一步中的實踐翼虫，以及碰到的坑。下面講解
初次安裝
-
打包
在打包程序時這一步主要是把Html相關資源文件壓縮后放在assets文件夾下即可 -
安裝
用戶安裝完應用程序打開后屡萤，檢測是否為初次使用珍剑，如果是則通過程序直接解壓包內(nèi)資源到手機存儲上即可，不局限于SD卡死陆。
展示頁面
閃屏頁展示
由于上面的解壓資源招拙，還有Webview初始化、JS的加載執(zhí)行措译、html的渲染都是耗時操作别凤，并且都是發(fā)生在Html展示之前，所以我們選擇把閃屏頁用Native原生代碼來編寫领虹，采用覆蓋WebView所在頁面的方案规哪，這樣在閃屏頁隱藏的時候，用戶就可以看到業(yè)務界面塌衰，提升用戶體驗由缆。
注：另外提供Android兩種閃屏優(yōu)化的小技巧注祖，使用透明主題或者設置主題背景圖片加載本地Html頁面
直接使用WebView#loadUrl()加載本地資源文件即可。由于WebView加載不同頁面會出現(xiàn)閃屏的問題均唉，所以我們采用Vue + Vue Router構建單頁應用是晨。
這里Vue Router會有一個小坑，提醒大家注意一下：Vue Router默認采用hash模式舔箭，會有一個丑陋的#符號罩缴，作為一個有追求的程序員怎么能允許這種很丑的hash，一種更優(yōu)雅的方式使用HTML5 History模式层扶，但是不幸的是箫章，加載本地資源文件的方式并不能正常解析HTML5 History模式的url，所以只能采用hash模式镜会。數(shù)據(jù)請求
為了節(jié)省用戶的流量和時間檬寂，需要把Html資源文件存儲在本地，這樣數(shù)據(jù)的請求必須在客戶端完成戳表。有兩種方案供選擇：
一是Native層攔截并請求數(shù)據(jù)再返回給Html層去展示桶至，這樣會增加工作量，也不利于職責的分離匾旭，所以放棄镣屹。
二是直接使用JS請求數(shù)據(jù)，這樣會出現(xiàn)跨域訪問的問題价涝，相比較來說還是這個比較容易解決的女蜈，采用CORS即可Native調(diào)用JS
Native層調(diào)用JS比較簡單，執(zhí)行一段JS代碼即可色瘩，如：javascript:callJS()JS調(diào)用Native
JS層調(diào)用Native,在Android上來說主要分為三種：
一：通過WebView#addJavascriptInterface()進行映射伪窖，使用起來簡單，但是有安全風險居兆，棄用
二：自定義協(xié)議然后由Native層攔截并解析請求惰许，使用起來復雜师坎，容易和業(yè)務耦合阎毅，也不是最優(yōu)選谱俭，棄用
三：攔截JS#prompt()方法并解析饿自，使用起來復雜甚垦，但是比第一種更安全蜗帜，比第二種靈活来惧，所以使用此方案
資源文件獲取
資源文件采取差異化更新方案洽蛀，本地存儲一個標識耙蔑，可以為版本號或者更新時間见妒，這個可以和后端同學一起商量確定。
資源文件下載還有推送之類的由于Html的局限性甸陌，所以還是直接由Native層做比較合適须揣，下面簡單講解下應用中的兩種更新方式：
-
服務端推送下發(fā)
可以通過集成第三方的推送服務盐股，在客戶端收到更新推送后主動去請求下載差異化文件 -
主動請求
可以在選擇合適的時機，如在應用啟動時去請求差異化文件
資源文件更新
根據(jù)差異化清單對資源文件進行整合耻卡，存放在臨時目錄中疯汁，然后在第二次打開應用時更換，并展示更新后的界面卵酪，達到熱更新的效果幌蚊。
總結
本文只是概括的講了結構的內(nèi)容，可能會遺漏一些要點溃卡，如果大家有什么問題歡迎留言或者去GitHub上提交issue
作者開源了一個優(yōu)雅的實現(xiàn)多類型的RecyclerView類庫 支持DataBinding Form表單錄入溢豆，跨多個RecyclerView拖動 Github地址：https://github.com/free46000/MultiItem
