 |
VOOZH | about |
|
VOOZH | about |
由於H5的逐步普及，混合移動應用開發變的炙手可熱，其主要的開發語言就是JavaScript，這在很多人看來無論是在性能和安全上來講，並不被大家所看好，所今天就來談一下如何對混合應用做優化以及加密，希望對大家有所幫助，本人一直沿用Cordova做混合應用開發平台，這也是目前使用最為廣泛，而且比較穩定，社區最為活躍的一個平台，今天我們就基於這個平台做相關講解！
Hybird APP混合應用原理分析混合應用的主要原理就是在webview平台上運行JS和css代碼，比如android的WebView, IOS的UIWebView， 並且cordova就是基於webview寫的一個運行平台， 原理和手機瀏覽器一樣，我們看下面這張圖。
我們都知道混合應用開發最大的好處就在於開發速度快，成本低，跨平台嗎？ 但是有好處，肯定就存在劣勢，也就是對開發人員的要求也會比較高，要求開發人員會的技能比較多，簡單給大家列舉一下：
不僅僅上面這些，我這裡簡單列舉了一張圖，需要我們了解的技術，大家自己腦補吧：
對於代碼管理，本人從最開始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需要重寫，耽誤了很多工作量。
開發架構建議其實開發架構這塊，每個人都有自己的看法，架構方式也有很多，我用過的架構不下三四種，這裡給大家簡單介紹一種架構，簡單也比較合理, 如下：
通過上面的架構，我們可以吧原始碼編譯到www文件夾後。執行
cordova build
或者
cordova prepare
這個還是較為簡單的，便於大家理解。
JS框架的使用現在市面上H5框架多的不勝枚舉，數不勝數，但是應用廣泛的唯獨那幾個，這裡簡單列舉一下，純屬個人觀點：
其實不僅僅是上面幾種框架，還有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使用。
優化方案優化決定了我們的項目運行速度到底能提升多少，尤其是在行動裝置上，這裡主要列舉了幾點:
所謂加密，通常的解決方案就是混淆，JS混淆，我們可以藉助於gulp來做，應用到的gulp插件就是：
var uglify = require('gulp-uglify');
混淆後的代碼會大大增加安全係數，在此，如果我們做支付類的應用，切記不要存儲任何私密信息在js中或者本地存儲，這樣會增加風險係數，建議服務端處理。
自定義插件以及調試這裡我要說明一下，因為cordova的開源性，而且移動平台版本疊代速度之快，很多插件沒有來得及更新，所以會存在很多問題。
儘管cordova插件很多，但是不一定會滿足我們的需求，所以有時候，我們需要自行編寫插件，這也就是說為什麼大家要掌握一定的android開發和ios開發知識。
編寫插件的流程，相對很容易，大家可以查閱一下文檔， 我列了大概的流程如下，大家可以簡要參考一下：
以上就是整體的方案，不夠具體，但是可以讓大家簡單了解一下整體的技術方向，之後我會在我的博客中持續更新的！