Hybird App混合移動應用開發技術整體解決方案,速來圍觀!

Hybird App混合移動應用開發技術整體解決方案,速來圍觀!

這裡寫圖片描述

摘要

由於H5的逐步普及,混合移動應用開發變的炙手可熱,其主要的開發語言就是JavaScript,這在很多人看來無論是在效能和安全上來講,並不被大家所看好,所今天就來談一下如何對混合應用做優化以及加密,希望對大家有所幫助,本人一直沿用Cordova做混合應用開發平臺,這也是目前使用最為廣泛,而且比較穩定,社群最為活躍的一個平臺,今天我們就基於這個平臺做相關講解!

Hybird APP混合應用原理分析

這裡寫圖片描述

混合應用的主要原理就是在webview平臺上執行JS和css程式碼,比如android的WebView, IOS的UIWebView, 並且cordova就是基於webview寫的一個執行平臺, 原理和手機瀏覽器一樣,我們看下面這張圖。

這裡寫圖片描述

混合應用開發知識儲備

我們都知道混合應用開發最大的好處就在於開發速度快,成本低,跨平臺嗎? 但是有好處,肯定就存在劣勢,也就是對開發人員的要求也會比較高,要求開發人員會的技能比較多,簡單給大家列舉一下:

  1. 我們要回JS程式碼的編寫。
  2. 我們需要具備CSS的基本能力,可以自行切除頁面,並且響應式設計
  3. 熟悉cordova平臺,知道相關配置,以及平臺缺陷。
  4. 有Android開發經驗,往往我們需要自己編寫外掛,以及版本釋出。
  5. 有IOS開發經驗,同上。
  6. 有框架經驗,光是JS框架就有很多,使用方法也不盡相同,所以還是需要一段時間學習的。

不僅僅上面這些,我這裡簡單列舉了一張圖,需要我們瞭解的技術,大家自己腦補吧:

這裡寫圖片描述

程式碼倉庫

對於程式碼管理,本人從最開始SVN 到現在的git, 個人感覺使用上都沒有太大的差異,在使用svn過程,我們會在本地搭建一個SVN伺服器,所以速度上會快很多。

個人還是更偏向與git倉庫,現在比較流行的github, bitbucket, 這裡說明一下,bitbucket目前可以建立私人倉庫,5人一下是免費的,但是github需要支付費用,但不是很貴。

  1. https://www.github.com
  2. https://bitbucket.org/

目前來看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框架多的不勝列舉,數不勝數,但是應用廣泛的唯獨那幾個,這裡簡單列舉一下,純屬個人觀點:

  1. AngularJS: 這個框架是有google維護的,也是目前最為廣泛的H5開源框架,雙向繫結,開發速度,執行較快,自定義diretive等等,雖然存在些缺陷,但是總體來講還是很不錯的, 目前最新版本2.0, 這是一個全新的框架,需要重新學習.
  2. Backbone: 這個框架應用時間不是很長,結合了undersore.js,使用起來還是比較方便,但是社群活躍度沒有angular好。
  3. Knockout.js: 這個框架是我最早使用的框架,結合了require.js搭配使用,總體來講要實現個雙向資料繫結還是比較麻煩的,配置起來也比較麻煩,執行速度相對較慢,後來就放棄了。
  4. SAPUI5: 這個是SAP推出的一個H5框架,而且是一個重量級別的框架,擁有眾多的UI元件,自定義起來很麻煩,幾乎不可能,拓展性也不是很多,執行速度也不是很理想,但是是作為SAP的標準app還是可以考慮的。
  5. React: 這個框架推出時間不長,但是熱度不亞於Angular, 而且是基於元件化的開發。執行速度很好,是未來不可小視的一個潛力股。
  6. ionic: 這個框架整合了angular, cordova, 非常推薦,理想的UI效果,執行速度非常快,易於部署,活躍的社群,都是我們最佳的選擇,最主要還有他是開源框架。
  7. PouchDB: 這個一個基於websql 的資料庫框架,儲存寫入語法糖很好,是一個不錯的前端資料庫框架。

其實不僅僅是上面幾種框架,還有VUE, Avalon等等優秀的框架,也是值得嘗試的, 總體來講東西不在多,而在精,我們只需要選中適合我們的一種框架深入研究,總會有一個不錯的反響。

JavaScript標準使用

Javascript的標準化決定了瀏覽器支援的程度有多好,以前一直在ES5,但自動推出了ES6(ES2015),深深的被這一個標準所吸引,定義class, import匯入等等眾多的語法糖,讓我嘗試了一下,但是現實卻很骨感,瀏覽器支援的不是很好,所以執行環境不得不用babel轉換成ES5的版本,保證專案正常執行。

所以,我還是建議大家使用這個最新的版本,現在來看,瀏覽器正在不斷對這一標準進行支援,相信不久的將來會是一個定律。

但是現在一定要進行轉換,大家可以放心使用,沒有任何問題的,親測!

CSS框架使用

css框架非常多,比如常用的有bootstrap, mui, 這兩款框架都是響應式框架,這裡不做過多解釋。

我們重點關注兩款CSS前處理器框架:

  1. Sass:這是對 CSS 的擴充套件,讓 CSS 語言更強大、優雅。 它允許你使用變數、巢狀規則、 mixins、匯入等眾多功能, 並且完全相容 CSS 語法。

  2. Less:這也是一門 CSS 預處理語言,它擴充套件了 CSS 語言,增加了變數、Mixin、函式等特性,使 CSS 更易維護和擴充套件。

這兩款框架可讓我們定義變數和重用方法,增加了css的可維護性,非常推薦。

架構工具使用

構建工具的選擇很重要,這決定了我們今後開發的效率問題,目前市面上流行的幾款構建工具:

  1. grunt: 自動化的工具,對於需要反覆重複的任務,例如壓縮(minification)、編譯、單元測試、linting等,幫助我們做了很多重複的工作,缺點是臨時檔案過大。

  2. gulp: 和grunt是一樣的概念,但是gulp的臨時檔案會小寫,而且任務外掛功能比較單一,並不想grunt一樣,一個外掛做很多工作。

  3. webpack: webpack的出現已經有很多時間了,但是一直不溫不火,自動從facebook推出react,官方demo給的架構工具就是webpack, 一時之間引起了很多關注,webpack引入了loader的概念,原理上和gulp的task很類似。

個人建議(僅僅是建議,看個人喜好!)

如果你用react可以搭配webpack使用。

如果你用其他框架可以搭配gulp使用。

優化方案

優化決定了我們的專案執行速度到底能提升多少,尤其是在移動裝置上,這裡主要列舉了幾點:

  1. 資料顯示上,如果資料條數超過200條,建議分頁處理,或者用infinate動態載入。
  2. 圖片下載,儘量採用原生方案,啟用多執行緒。
  3. 使用spirte圖片資源。
  4. css壓縮成一個檔案,在index.html進行匯入(減少載入時間)
  5. JS壓縮成一個檔案,在index.html進行匯入 (減少載入時間)
  6. 不需要快取資料的地方,不要是用記憶體,因為混合應用的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 正常生成證書釋出就可以了。

總結

以上就是整體的方案,不夠具體,但是可以讓大家簡單瞭解一下整體的技術方向,之後我會在我的部落格中持續更新的!