Windows 下 Ionic 開發環境搭建


Ionic 介紹

首先,Ionic 是什么。

Ionic 是一款基於 Cordova 及 Angular 開發 Hybrid/Web APP 的前端框架,類似的其他框架有:Intel XDK等。

簡單來說就是可以將你的 Web 應用打包發布成 IOS/Android APP,並且提供了 Cordova 之外很多強大的服務和新的特性。

聽起來還是很誘人的,事實上這也是目前最火的一種 Hybrid APP 開發方式。

接下來介紹如何在 Windows 下搭建 Ionic 開發環境。

在開始之前我假設你已經了解了如下概念:

  • Java JDK
  • Apache Ant
  • Android SDK
  • NodeJS

以上名詞這里就不贅述,如果有不清楚的可以自行查閱

安裝步驟

Ionic 官方教程:http://learn.ionicframework.com/videos/windows-android/

以下內容參考官方教程得出:

下載 JDK 並配置好 Java 運行環境

下載地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html(請注意選擇您電腦的對應版本)

Java 環境變量的配置:參看:http://zhidao.baidu.com/question/1366931535221381339.html

下載 Apache Ant 並將其 bin 目錄路徑添加進 Path 路徑

下載地址:http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

下載完成后解壓該文件至某個安全的目錄下,然后將改文件夾內的bin文件夾路徑添加至系統 Path 環境變量中,如存放在 C 盤 Program Files 目錄下則 Path 中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;(添加方法和 java 配置 path 變量是一樣的,注意以;隔開每個環境變量的值)

下載 Android SDK 並配置好 SDK 運行環境

下載地址:http://developer.android.com/sdk/index.html

這里可以只下載 Android SDK 不需要一並下載 Android Studio。

下載完成並安裝然后向系統Path環境變量中添加兩個值。分別是 Android SDK 中 tools 目錄的路徑和 platform-tools 的路徑。例如:

  • C:\Program Files (x86)\Android\android-sdk\tools;
  • C:\Program Files (x86)\Android\android-sdk\platform-tools;

在這里我發現 Android SDK 安裝目錄中並沒有platform-tools這個文件夾,運行 tools 目錄下的 android.bat 文件,然后在出現的界面中勾選 Android SDK Platform-tools 然后安裝。

注意:這里我下載的純凈版 SDK 之前並沒有任何 Android 系統在內,所以同 Platform-tools 一樣需要在這里勾選需要的版本然后安裝。這里至少需要有一個系統,否則無法創建虛擬機。當然,用真機調試的話可以不依賴。

配置 Gradle

下載地址:http://services.gradle.org/distributions/

下載相應版本的 gradle(對應 cordova-android),然后解壓放置在某個目錄下,然后向系統 Path 環境變量中添加:

  • D:\Program Files\gradle\gradle-3.3\bin

下載 Nodejs for Windows 並安裝

下載地址:https://nodejs.org/download/

Windows 下安裝 Nodejs 環境很簡單,在 Nodejs 官網下載正確版本后安裝即可。

nmp 安裝 Ionic 和 Cordova

完成以上幾步需要配置的環境就搭建完成了,接下來就只需要在控制台輸入簡單的幾行命令就可以安裝 Ionic 和 Cordova 啦。

進入 cmd 窗口,輸入如下指令:

npm install -g cordova ionic

完成以上所有步驟,就可以開始利用 Ionic 快速開發 Android APP 啦

創建並運行 ionic app

創建 APP

進入 cmd 窗口,輸入如下指令:

ionic start myapp

這里的 myapp 是你的 APP 的名字

進入創建的 APP 目錄

cd myapp

選擇配置 Android 環境

ionic platform add android

打包生成 APP

ionic build android

運行 APP

需要先新建虛擬機或者連接手機。

  • 新建虛擬機:打開 Android SDK 安裝目錄下的 AVD Manager.exe 選擇新建
  • 連接手機:直接通過數據線連接真實設備

ionic run android

到這一步系統就會打開虛擬機或者在真實設備運行簡單的示例 APP 了。

其它

--prod 的作用

在編譯命令的最后加上 --prod 會讓 app 的啟動速度加快,但構建速度會變慢。

ionic build android --release --prod

無論是 debug 版本還是 release 版本都適用。

APP 簽名

生成簽名文件

生成簽名文件需要用到 keytool.exe (位於 jdk1.6.0_24\jre\bin 目錄下),使用產生的 key 對 apk 簽名用到的是 jarsigner.exe (位於 jdk1.6.0_24\bin 目錄下),把上兩個軟件所在的目錄添加到環境變量path后,即可使用生成簽名文件的命令:

keytool -genkey -v -keystore demo.jks -alias demo -keyalg RSA -keysize 2048 -validity 10000
  • -genkey:產生密鑰

  • -keystore: 簽名文件名稱(這里是 demo.jksdemo 可以自定義,jks 是 Android studio 生成的簽名文件的后綴)

  • -alias:簽名文件的別名(這里是 demo,可自定義)

  • -keyalg:使用 RSA 算法對簽名加密(默認 RSA )

  • -validity 有效期限(這里是 10000 天,可自定義)

以上命令在 cmd 運行如下:

自動簽名

在工程目錄 /platforms/android 目錄新建名為 release-signing.properties 的文件,文件內容如下:

storeFile=demo.jks
keyAlias=demo
storePassword=輸入的密鑰庫口令
keyPassword=輸入的密鑰口令

這樣,使用 ionic build android --release 編譯即可,在 /platforms/android/build/outputs/apk 下就會生成已簽名的安裝包 android-release.apk

在 windows 下 storeFile 文件路徑應使用 Unix 下的目錄分隔符 / 。

了解更多可進入 Ionic 官網: http://ionicframework.com/ 進行拓展閱讀。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM