]
主要流程:
安裝node.js --> 安裝jdk --> 安裝AndroidSDK --> 安裝cordova --> 安裝ionic --> 創建項目 --> 編譯項目apk
一、安裝nodejs
百度網盤:鏈接:https://pan.baidu.com/s/1Xxfh2kv_2Wn9nbF5AX9NZQ 提取碼:turm 或 下載地址:https://nodejs.org/en/
查看nodejs版本: node -v
查看npm版本: npm -v
安裝淘寶鏡像 : npm install -g cnpm --registry=https://registry.npm.taobao.org
查看cnpm版本: cnpm -v
二、安裝jdk
百度網盤中已包含。或 下載地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
下載8u111或8u112以上版本。安裝時建議安裝到C:\Java 目錄下。然后設置系統變量:
名稱:JAVA_HOME
,值(根據你的安裝路徑改): C:\Java\jdk1.8.0_101
在Path
中添加 %JAVA_HOME%\bin
查看版本: java -version
三、安裝sdk
右鍵X解壓
重命名為sdk
跟jdk放在一個父目錄,便於查找。C:\Program Files\sdk
配置環境變量
計算機——右鍵屬性——-高級系統設置——-環境變量
網盤中已包含。
在系統變量中新建:
變量名:ANDROID_HOME
變量值:C:\Program Files\sdk
在Path變量中將
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
添加到變量值最后(注意前面有分號)
檢查配置是否正確:
android -h
執行命令就代表安裝無誤。
SDK Manager.exe工具
打開界面上的Tools,選擇options,先配置國內鏡像:
域名千萬不要輸入http或者https協議前綴
mirrors.neusoft.edu.cn
回到主界面,點packages再點reload
按照下面圖片進行勾選:
點右下角 install packages 來安裝,耐心等待即可。
在打包時可能會出現如下錯誤:
打開SDK Manager.exe繼續安裝你所需要的平台。圈起來的27與報錯圖片中的27對應,如果出現其他的錯誤,下載對應的平台就可以了。
四、安裝cordova
輸入以下命令安裝 Cordova
:
npm install -g cordova
看一下版本號:
C:\Users\yxd>cordova -version 6.3.1
五、安裝ionic
輸入以下命令安裝 Ionic
(如果剛才設置了淘寶鏡像源,可以使用 cnpm
代替 npm
):
npm install -g ionic
需要注意的是,如果之前安裝過 Ionic 2
的 beta 版本,需要先卸載掉:
npm uninstall -g ionic
然后重新安裝。
安裝完成后輸入以下命令看一下版本號:
C:\Users\yxd>ionic -version 2.1.0
目前最新版本是2.1.0。如果是 beta 版本的話,請重新安裝,確保安裝最新版。
六、創建ionic項目
搜索node,點開紅框內的node.js command prompt ,不是下面的那個node.js
cd到要放置app的目錄下,執行:
ionic start myapp tabs
解釋:
myapp:項目名稱(自定義)
tabs:ionic模板,還有blank
還有其他模板可以自己選擇,執行 ionic start myapp 下載需要時間,請耐心等待。
創建完成之后,cd到app目錄運行項目
執行: ionic serve 啟動
瀏覽器地址欄:localhost:8100預覽項目
七、添加平台
cd 到app目錄下,執行 ionic cordova platform add android
添加完平台后app目錄下會多了一個 platforms 文件夾
八、下載gradle插件
打開:http://services.gradle.org/distributions/ 選擇 gradle-2.14.1-all.zip 或者 百度網盤中包含該插件,可直接下載;
下載完不用解壓,直接拷貝到項目文件下的這個文件下:
注意:新項目沒有gradle這個文件夾,需要新建一個,文件名不要寫錯。
將下載壓縮包加壓到其他文件夾內,需要配置環境變量 path: D:\Program Files\gradle\gradle-2.14.1\bin,根據你文件位置配置,如果不會不會百度。
修改配置:
找到下面路徑下的 GradleBuilder.js文件
用代碼編輯器打開 GradleBuilder.js:
將: 'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip' 改為: '../gradle/gradle-2.14.1-all.zip'
保存關閉。
九、打包
cd到app目錄下,執行: ionic cordova build android
打的apk包在畫紅線那個路徑下面。將apk文件發送到手機就可以安裝了
參考:https://yanxiaodi.gitbooks.io/ionic2-guide/content/tutorial;該地址有時刷新不出來,需要要多少試幾次。
https://www.cnblogs.com/chenglu/p/8608121.html