國泰基金 Hybrid App 開發探索
小編入職國泰基金已有將近4個月，作爲WEB前端開發，在當下流行的大前端概念下，也算是蹭了波兒潮流，做了一次Android的Hybrid開發，小編也是有機會從全局的角度參與了整個Android Hybrid的開發流程，對這樣一種混合模式的開發流程算是有了一個比較全面的瞭解。
首先我們先看下整體的效果
首先還是要稍微簡單的介紹下什麼是Hybrid開發，不過在這之前還是要稍稍瞭解下Native App和Web App
一、Native App
Native App即原生應用，即我們一般所稱的客戶端，是針對不同手機系統單獨開發的本地應用，如需使用需要先下載到手機並安裝，下載Native App的最常見方法是訪問應用程序商店，如蘋果的App Store、安卓市場、Google Play等。在技術實現上一般採用針對操作系統的特定語言進行編寫，如：使用Objective-c開發IOS應用，使用Java+Android開發android應用。
二、Web App
Web App又叫Web應用，簡單的說就是一個觸屏版的網站。Web應用完全用HTML、JavaScript和CSS等Web技術開發，通過移動設備的瀏覽器來訪問，缺點是這些基於瀏覽器的應用無法調用系統API來實現一些高級功能，也不適合高性能要求的場合。
到此，既然我們知道了原生和WEB APP的概念，這時候我們來說下混合模式應用。
Hybrid App又叫混合應用，是一種介於Native App、Web App之間的App，它雖然看上去是一個Native App，但只是一個UI WebView，裏面訪問的是一個Web App。Hybrid App實質是僞造一個瀏覽器的apk/ipa原生程序，並運行了一個Web APP。Hybrid App兼具「Native App良好用戶交互體驗的優勢」和「Web App跨平臺開發的優勢」。它可以使web開發人員可以幾乎零成本的轉型成移動應用開發者，並且相同的代碼只需針對不同平臺進行編譯就能實現在多平臺的分發，而相較於Web App，開發者可以通過包裝好的接口，調用大部分常用的系統API。
不過這裏小編作爲一個WEB前端開發者，苦逼的搭建了一整套的Android + JAVA工程框架，還好當時大學學的JAVA沒有完全還給老師~
首先來看下前端整體的一個技術樹
關於Android的部分，小編不想細說，畢竟脫離JAVA已經有些時間，文章中未必能夠講到位，因此不想誤導大家
WEB 前端側是一個典型的vue技術棧的結構：
我們採用vue來封裝我們的主要業務邏輯，若有頻繁的DOM操作，我們還是採用了jquery的解決方案，使用Vuex和LocalStorage結合的方式來存儲我們頁面之間的狀態數據亦或是業務基礎數據，Webpack和Less的職責自然不用多說。
在國泰的APP中，我們採用了CROSSWALK的解決方案來替換系統自帶的webview的方式，從而儘可能的降低在Android平臺上的兼容性問題的出現，在使用Crosswalk之前，我們必須瞭解Crosswalk
一、什麼是Crosswalk
crosswalk是一款開源的web引擎，在Android4.0以上的系統中使用Crosswalk可以讓應用程序在h5方面上獲得一致性體驗。
它的優勢十分明顯：crosswalk採用的是Chromium內核，所以crosswalk會享有Chromium的功能和優勢。支持最新的H5 API。
不過劣勢的話，是存在性能問題，其通過大量的反射來構建它的主要功能，同時由於crosswalk是將整個內核打包，所以應用的體積會很大，不過這也只不過使你的APK增加20 ~ 50M左右的體積，這點體積在現代的手機系統中並不是事兒~
Crosswalk官網：https://crosswalk-project.org/index_zh.html
二、國泰APP中關於Crosswalk的使用
我們看下在我的工程中，關於Corsswalk的封裝
我將涉及到webview的ResourceClient，UIClient以及Webview進行了獨立的封裝，這樣會使得我們的APP使用Corsswalk的方式會更加靈活和定製化，方便針對我們的業務場景進行更好的抽離，比如我需要單獨封裝一個在webview中封裝自定義user-agent的操作，這裏我在集成自XWalkview的類中增加一個初始化邏輯即可：
瞭解了什麼是Crosswalk後，那麼接下來我們看下一個典型Hybrid數據交互的流程， 這裏我舉一個基金申購的例子
我們注意紅色框框中的內容，這是Android Bybird的主要交互方式，這裏的JSBridge只是一個籠統的概念，我將原生調用webview中的JS的方法叫做JSBridge，那麼Android中原生JAVA是如何調用webview中的JS方法，webview中的JS方法如果調用原生的JAVA方法呢，這裏我來簡單的介紹下：
一、Android原生調用Crosswalk中的JS方法
1. 首先在我們的H5工程中，我們抽離了一個webview.js，這個JS中集成了工程中原生能夠調用的JS的方法，同時我們將這個方法塞入了window變量中
這是我們webview.js中的部分方法：
2. 接下來在我們的JAVA文件中，我們只需要通過Crosswalk的內置方法，我們便能調用webview中的window中的變量，因此可以訪問其封裝的JS方法了：
二、在JS中調用原生的JAVA方法
1. 首先我們需要打開Crosswalk中的配合開關，使得Crosswalk支持這樣的調用
2. 在需要JS調用的原生方法中打上@Javascript的註解，比如：
3. 在應用初始化其中的webview後，會在webview中注入一個叫做NativeInterface的變量，這個變量是和window變量平級的，打上@Javascript註解的方法都會封裝在這個變量之中，因此在我們的JS方法中，我們可以直接調用這個變量中的方法來激發對原生JAVA方法的調用：
至此，國泰Android App中主要的Hybrid架構已經給大家介紹的差不多了，這是一篇偏整體架構的技術文章，有很多細節沒有和大家好好介紹，小編深感抱歉，一方面業務相關的內容小編不方便給大家多說，另外一方面關於Android側構建小編其實也是一個門外漢，還是要多謝淘寶和美團的Android大牛的悉心指導，小編才一步一步構建出來，最後如有紕漏和技術問題，大家多多交流，不對的地方歡迎大家指正~
郵箱還是那個郵箱：[email protected]