我的ionic實戰系列是基於<<Ionic實戰>>【美】Jeremy Wilken著-這本書的讀書筆記,有諸多借鑒,不詳細的地方請參考書籍本身的內容。
1.1技術棧模型
Ionic的工作原理是通過cordova把一個Web應用嵌入原生應用。以下兩張圖介紹了Ionic的技術棧模型和Hybrid應用和其它類型的應用的區別,一目了然。
ionic技術棧模型
比較原生應用、移動端網站和Hybrid應用的架構
原生應用
ios使用Objective-C,或者Swift。Android使用java。優缺點就不贅述了。
移動端網站(web應用)
移動端網站免安裝、跨平台,並且沒有任何審核流程,缺點是不具備原生訪問能力,它依賴於瀏覽器的功能。(用戶更習慣使用app,而不是輸入網址、訪問移動端網站)
Hybrid應用
它一次開發,多個平台部署,能夠最小化開發成本,它使用web技術開發,又能訪問原生API。當然從性能上由於依賴於webview所以性能比不上原生應用,原生功能的訪問也取決於相應的插件有沒有被開發出來或者其他方法。
Cordova的任務是實現瀏覽器窗口和原生API的通信。(橋梁)
背景:PhoneGap是adobe公司收購的,adobe公司就把PhoneGap的核心抽出來貢獻給apache。PhoneGap會繼續存在,它和cordova的關系就像chrome瀏覽器的內核是Webkit一樣。也可以說PhoneGap是商業的Cordova。(這是百度資料,可是我想看看最新資料是如何陳述的。)
Ionic應用打開照相機時整個技術棧的工作流程:
1.用戶單擊按鈕
2.按鈕調用Angular控制器,控制器會通過javascript API調用cordova。
3.cordova使用原生SDK和設備通信,請求使用照相機應用。
4.設備打開照相機應用(或者請求用戶授權),用戶可以照相。
5.用戶確定照片之后,照相機應用關閉,把圖片數據返回給Cordova。
6.Cordova把圖片數據傳遞到Angular的控制器。
7.圖片會更新到Ionic組件中。
1.2.Hybrid應用和其他移動端應用的區別
1.3 ionic支持的移動平台
http://ionicframework.com/docs/overview/原文如下
Browser Support
Ionic 1
Ionic V1 is focused on building native/hybrid mobile apps rather than mobile websites.
As such, our browser support tends to be whatever Web View API is available to native apps on a given platform. For Ionic 1x, that means UIWebView for iOS 7+, and Android 4.1 and up. We recommend using Crosswalk to improve performance on older devices.
Ionic 2
Ionic 2 is focused on building both native/hybrid apps through Cordova, as well as adding the ability for Progressive Web Apps and Electron .
The following OSs and browsers are supported:
- iOS 8+
- Windows 10 Universal App
- Android 4.4+
- Support can be pushed back to 4.1 if Crosswalk is used with Cordova
翻譯:
ionic1
Ionic1版本更多的是創建原生/混合式應用,而非移動端網站。因為這樣的原因,我們的瀏覽器支持趨向於在給定的移動端平台對於原生APP的webview能夠訪問到的任何接口API。對於Ionic1來說,它意味着ios7+和android 4.1+的webview。我們推薦使用crosswalk來提高舊版本設備的性能。
ionic2
Ionic2版本通過cordova來創建原生/混合式應用,也增加了創建web app和electron(一種桌面應用構建方式)的能力。
它支持的系統和瀏覽器是:
- iOS 8+
- Windows 10 Universal App
- Android 4.4+(Support can be pushed back to 4.1 if Crosswalk is used with Cordova)
2.1 設置開發環境:安裝node.js、Ionic CLI和cordova
chapter2 配置開發環境
安裝node.js
由於Ionic和Cordova都是基於Node開發的,那么要安裝它。https://nodejs.org/en/download/下載最新穩定版本msi或者exe。安裝非常簡單,傻瓜式操作,簡單的選定目錄就好了,安裝的過程已經自動把path環境變量寫好了。
測試node是否安裝成功
node -v
npm -v
測試是否安裝成功,只需要在命令提示符cmd中任何位置輸入node -v,如果出現node的版本信息,那么安裝成功。同時npm是node package manager,也就是node包管理器,那么輸入npm -v檢測npm的版本,npm也是后續安裝最核心的命令。
node安裝推薦升級到最新穩定版。
安裝Ionic CLI
安裝Ionic CLI
Ionic CLI 是指command-line interface,它有很多ionic命令。
npm install –g ionic 全局安裝ionic
npm install –g ionic@1.3 安裝1.3版本的ionic
npm update –g ionic 更新ionic
ionic –v 打印當前安裝好的ionic版本
安裝Cordova
npm install –g cordova 全局安裝ionic
npm install –g cordova@4.2 安裝4.2版本的ionic
npm update –g cordova 更新ionic
cordova –v 打印當前安裝好的ionic版本
2.2 配置新項目
使用ionic的start命令生成一個示例項目腳手架
ionic start chapter2
創建一個名字為chapter2的新項目,采用默認的tabs模板。
這是ionic項目通用的結構。
cordova相關的文件和目錄是config.xml、hooks、platforms、plugins和www,剩下的都是ionic創建的。
www目錄包含webview中需要運行的所有web應用文件,
它會假設目錄中存在index.html文件,除掉這個限制,其他文件都可以隨意的組織。
2.3 安裝平台工具和模擬器
2.4 給項目添加平台,在模擬器中預覽和在移動設備上預覽
第三章 編譯並發布應用,以android為例
3.1.環境要求:
運行javac,android --help,ant -version檢測
3.2.調試:
給項目添加平台
ionic platform add android
(cordova platform add android)
部署到android設備
ionic build android
(platforms/android/***/-debug.apk
3.3.編譯上線應用的准備:
(1)移除cordova console插件:它允許我們對app進行調試,
但在線上應用中就不需要這個操作了。使用cordova plugin rm org.apache.cordova.console
命令從應用中移除它。
(2)移除不需要的文件
刪掉不需要的文件,以減少文件體積。
(3)移除庫中不使用的文件。www/libs目錄。
(4)使用壓縮代碼
(5)使用壓縮圖片
3.4.編譯並發布
step1:創建啟動頁面圖片
ionic resources
(resources/android/splash.png,默認resources/splash.png)
step2:配置簽名
keytool -genkey -v -keystore my-release-key.keystore -alias finance -keyalg RSA -keysize 2048 -validity 10000
(生成一個有效期是10000天的keystore)
Step3:編譯命令
cordova build android --release
step4:配置簽名文件
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore D:\finance-app\finance-app\platforms\android\build\outputs\apk\android-release-unsigned.apk finance
step5:jarsigner命令測試
jarsigner -verify -verbose -certs D:\finance-app\finance-app\platforms\android\build\outputs\apk\android-release-unsigned.apk
step6:優化APK文件(zipalign工具專門做這個事情)
zipalign.exe -v 4 D:\finance-app\finance-app\platforms\android\build\outputs\apk\android-release-unsigned.apk D:\finance-app\finance-app\platforms\android\finance.apk
(finance.apk就是最終版文件)
3.5.夜神模擬器比Android studio的模擬器快。