摘要
由於H5的逐步普及，混合移動應用開發變的炙手可熱，其主要的開發語言就是JavaScript，這在很多人看來無論是在性能和安全上來講，並不被大家所看好，所今天就來談一下如何對混合應用做優化以及加密，希望對大家有所幫助，本人一直沿用Cordova做混合應用開發平臺，這也是目前使用最爲廣泛，而且比較穩定，社區最爲活躍的一個平臺，今天我們就基於這個平臺做相關講解！
Hybird APP混合應用原理分析
混合應用的主要原理就是在webview平臺上運行JS和css代碼，比如android的WebView, IOS的UIWebView， 並且cordova就是基於webview寫的一個運行平臺， 原理和手機瀏覽器一樣，我們看下面這張圖。
混合應用開發知識儲備
我們都知道混合應用開發最大的好處就在於開發速度快，成本低，跨平臺嗎？ 但是有好處，肯定就存在劣勢，也就是對開發人員的要求也會比較高，要求開發人員會的技能比較多，簡單給大家列舉一下：
- 我們要回JS代碼的編寫。
- 我們需要具備CSS的基本能力，可以自行切除頁面，並且響應式設計
- 熟悉cordova平臺，知道相關配置，以及平臺缺陷。
- 有Android開發經驗，往往我們需要自己編寫插件，以及版本發佈。
- 有IOS開發經驗，同上。
- 有框架經驗，光是JS框架就有很多，使用方法也不盡相同，所以還是需要一段時間學習的。
不僅僅上面這些，我這裏簡單列舉了一張圖，需要我們瞭解的技術，大家自己腦補吧：
代碼倉庫
對於代碼管理，本人從最開始SVN 到現在的git, 個人感覺使用上都沒有太大的差異，在使用svn過程，我們會在本地搭建一個SVN服務器，所以速度上會快很多。
個人還是更偏向與git倉庫，現在比較流行的github, bitbucket, 這裏說明一下，bitbucket目前可以創建私人倉庫，5人一下是免費的，但是github需要支付費用，但不是很貴。
目前來看github使用時很多的，上面也有很多開源的代碼。
開發工具
開發工具有很多，我們一一列舉一下：
XCode: 主要用於ios版本的發佈和插件調試工作，不是很常用。
Android Studio: 主要用Android版本發佈和插件調試工作，不是很常用。
Sublime: 用於開發H5， 編寫JS, CSS代碼，需要自己裝一些模塊。
Atom: 和Sublime比較類似，開源工具，效果很炫。
WebStorm: 這個是一個H5開發集成工具，不需要裝什麼插件，但是收費的，個人一直在用，主要用於編寫JS, CSS，工具很好用，提示，導航是最完美的。
Chrome dev tools： 主要用於調試JS代碼。（包括Android手機上運行代碼）
Safari develop tools: 主要用於調試ios真機上運行JS代碼。
對於開發工具個人也用過Visual Studio 2015，這是一款很強大的工具，微軟推出的，而且集成了Cordova，可以進行調試，但是用了一段時間，感覺不是很方便，所以就放棄了，喜歡的同志可以繼續，這個還是看個人喜好。
開發環境建議
很多時候我們開發的應用通常要支持兩個平臺，即爲Android和IOS, Android開發和部署我們在任何一個平臺都可以，比如windows， Linux, Mac，都是很好的，Java跨平臺嗎？但是Andorid開發編譯最快還要屬Mac os和Linux。
對於IOS的開發可沒有這麼多的選擇，你只能在mac os 上進行開發和部署工作了。據傳言蘋果公司會對針對其他系統做開發工具，但還只是傳言。
所以我建議大家，如果有可能的話還是用mac os開發混合應用，這樣在一臺機器上就可以部署開發兩個系統的應用（IOS和android），如果你需要WIndows,還可以裝一個windows10的虛擬機，速度還是很快的。
支持的移動平臺
目前開發支持的移動平臺主要會有兩個，即Android，IOS，Windows三大平臺：
Android: 這個平臺用戶使用時最多的，要說對H5支持最好的話，還是要Android4.4+以後的版本，因爲Android4.4對WebView做了很大的改進，對H5支持更加友好。
IOS: IOS從8.0以來對H5的支持一直都是最好的，幾乎沒有大的問題的，9.0以後更是完美，但是9.0以後IOS平臺建議使用的https，所以需要針對平臺做一些設置，但是如果你的cordova版本是6.0+，就不需要了，因爲Cordova平臺已經做好了默認的配置。
**Windows:**windows系統是微軟進一年來開發的支持手機和桌面的系統，個人感覺還是比較有發展的，至少是第一個完成平臺系統統一的，但是個人至今還沒有用過這個系統。但是windows10我開發過混合應用在上面，親測對H5的支持還是很好的，基本上沒什麼大的問題，並且微軟一直在推的一個移動框架WinJS，目前使用也是較爲廣泛的。
兩年以前我也嘗試適配windows phone 7， 8, 但是坑還是很多的，主要是因爲當初微軟對H5的支持不夠友好，導致很多UI需要重寫，耽誤了很多工作量。
開發架構建議
其實開發架構這塊，每個人都有自己的看法，架構方式也有很多，我用過的架構不下三四種，這裏給大家簡單介紹一種架構，簡單也比較合理, 如下：
- client (此文件夾是我們的源代碼)
– assets （css以及圖片文件）
– js (js文件，主要邏輯區)
– index.html （項目入口） - hooks （build之前的cordova的運行文件，這裏通常會有針對不同平臺的配置）
- plugins （存放所有的插件包括自定義的插件）
- platforms （平臺文件，會自動創建的）
- resources （不同的平臺的splash 和應用圖標文件）
- www （編譯後的壓縮運行文件）
- config.xml （cordova 的配置文件）
通過上面的架構，我們可以吧源代碼編譯到www文件夾後。執行
cordova build或者
cordova prepare這個還是較爲簡單的，便於大家理解。
JS框架的使用
現在市面上H5框架多的不勝枚舉，數不勝數，但是應用廣泛的唯獨那幾個，這裏簡單列舉一下，純屬個人觀點：
- AngularJS: 這個框架是有google維護的，也是目前最爲廣泛的H5開源框架，雙向綁定，開發速度，運行較快，自定義diretive等等，雖然存在些缺陷，但是總體來講還是很不錯的， 目前最新版本2.0， 這是一個全新的框架，需要重新學習.
- Backbone: 這個框架應用時間不是很長，結合了undersore.js，使用起來還是比較方便，但是社區活躍度沒有angular好。
- Knockout.js： 這個框架是我最早使用的框架，結合了require.js搭配使用，總體來講要實現個雙向數據綁定還是比較麻煩的，配置起來也比較麻煩，運行速度相對較慢，後來就放棄了。
- SAPUI5: 這個是SAP推出的一個H5框架，而且是一個重量級別的框架，擁有衆多的UI組件，自定義起來很麻煩，幾乎不可能，拓展性也不是很多，運行速度也不是很理想，但是是作爲SAP的標準app還是可以考慮的。
- React: 這個框架推出時間不長，但是熱度不亞於Angular, 而且是基於組件化的開發。運行速度很好，是未來不可小視的一個潛力股。
- ionic: 這個框架集成了angular， cordova， 非常推薦，理想的UI效果，運行速度非常快，易於部署，活躍的社區，都是我們最佳的選擇，最主要還有他是開源框架。
- PouchDB: 這個一個基於websql 的數據庫框架，存儲寫入語法糖很好，是一個不錯的前端數據庫框架。
其實不僅僅是上面幾種框架，還有VUE, Avalon等等優秀的框架，也是值得嘗試的， 總體來講東西不在多，而在精，我們只需要選中適合我們的一種框架深入研究，總會有一個不錯的反響。
JavaScript標準使用
Javascript的標準化決定了瀏覽器支持的程度有多好，以前一直在ES5，但自動推出了ES6(ES2015)，深深的被這一個標準所吸引，定義class, import導入等等衆多的語法糖，讓我嘗試了一下，但是現實卻很骨感，瀏覽器支持的不是很好，所以運行環境不得不用babel轉換成ES5的版本，保證項目正常運行。
所以，我還是建議大家使用這個最新的版本，現在來看，瀏覽器正在不斷對這一標準進行支持，相信不久的將來會是一個定律。
但是現在一定要進行轉換，大家可以放心使用，沒有任何問題的，親測！
CSS框架使用
css框架非常多，比如常用的有bootstrap, mui, 這兩款框架都是響應式框架，這裏不做過多解釋。
我們重點關注兩款CSS預處理器框架：
Sass：這是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等衆多功能， 並且完全兼容 CSS 語法。
Less：這也是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
這兩款框架可讓我們定義變量和重用方法，增加了css的可維護性，非常推薦。
架構工具使用
構建工具的選擇很重要，這決定了我們今後開發的效率問題，目前市面上流行的幾款構建工具：
grunt: 自動化的工具，對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，幫助我們做了很多重複的工作，缺點是臨時文件過大。
gulp: 和grunt是一樣的概念，但是gulp的臨時文件會小寫，而且任務插件功能比較單一，並不想grunt一樣，一個插件做很多工作。
webpack: webpack的出現已經有很多時間了，但是一直不溫不火，自動從facebook推出react，官方demo給的架構工具就是webpack， 一時之間引起了很多關注，webpack引入了loader的概念，原理上和gulp的task很類似。
個人建議（僅僅是建議，看個人喜好！）
如果你用react可以搭配webpack使用。
如果你用其他框架可以搭配gulp使用。
優化方案
優化決定了我們的項目運行速度到底能提升多少，尤其是在移動設備上，這裏主要列舉了幾點:
- 數據顯示上，如果數據條數超過200條，建議分頁處理，或者用infinate動態加載。
- 圖片下載，儘量採用原生方案，啓用多線程。
- 使用spirte圖片資源。
- css壓縮成一個文件，在index.html進行導入(減少加載時間)
- JS壓縮成一個文件，在index.html進行導入 (減少加載時間)
- 不需要緩存數據的地方，不要是用內存，因爲混合應用的webview已經佔用了很多內存（相比於native app）
加密方案
所謂加密，通常的解決方案就是混淆，JS混淆，我們可以藉助於gulp來做，應用到的gulp插件就是：
var uglify = require('gulp-uglify');混淆後的代碼會大大增加安全係數，在此，如果我們做支付類的應用，切記不要存儲任何私密信息在js中或者本地存儲，這樣會增加風險係數，建議服務端處理。
自定義插件以及調試
這裏我要說明一下，因爲cordova的開源性，而且移動平臺版本迭代速度之快，很多插件沒有來得及更新，所以會存在很多問題。
儘管cordova插件很多，但是不一定會滿足我們的需求，所以有時候，我們需要自行編寫插件，這也就是說爲什麼大家要掌握一定的android開發和ios開發知識。
編寫插件的流程，相對很容易，大家可以查閱一下文檔， 我列了大概的流程如下，大家可以簡要參考一下：
混合應用調試
對於調試我們都會在瀏覽器中調試js代碼，但很少有人知道如何在瀏覽器中實時調試手機上的混合應用js代碼以及樣式，下面給大家介紹一下：
對於android來講，我們正常的debug證書，是可以藉助於chrome dev tools來調試，具體步驟：
android:
usb連接手機 —-> 運行需要調試的程序—> 打開瀏覽器輸入 chrome://inspect, 就可以看到當前連接設備了，切記一定要debug證書。
ios:
usb連接ios設備 —> 運行需要調試的程序 —> 打開safari瀏覽器 —> 點擊develop 屬性，就能看到我們的設備了。
這裏有一個小點，大家要注意，safari和手機都要打開開發者模式纔可以的。瀏覽器的在preference中設置，手機在safari應用的高級中設置。
混合應用發佈
對於發佈我們就藉助於Android studio 和xcode 正常生成證書發佈就可以了。
總結
以上就是整體的方案，不夠具體，但是可以讓大家簡單瞭解一下整體的技術方向，之後我會在我的博客中持續更新的！
