ionic實戰系列(一)：ionic的開發環境配置和編譯、發佈

      個人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.apk3.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的模擬器快。