前言:
ionic 3 開發(fā)APP, 從零到成功build成apk 愉耙,在這里做個(gè)記錄,以windows 系統(tǒng)為例赌渣。
目錄:
一吠卷、材料準(zhǔn)備
二祭隔、環(huán)境搭建
三、創(chuàng)建項(xiàng)目
四千贯、打包
五搔谴、其他
一桩撮、材料準(zhǔn)備
安裝 node.js (提供npm)
下載地址:(https://nodejs.org/en/)安裝 Python(因?yàn)榘惭b依賴過程中提示我需要安裝Python,具體原因我沒有去找)
下載地址:(https://www.python.org/downloads/)-
安裝 Java (打包成 apk 需要用到Java的環(huán)境)
下載地址:(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
-
安裝Android SDK (打包成 apk 需要用到Android 的API)
下載地址:(http://www.androiddevtools.cn/)
下載Android API
在下載 API 的時(shí)候 tools 也要下載同樣版本的蚁吝。
提醒:這些API 需要的內(nèi)存非常大窘茁,所以你安裝Android SDK 的時(shí)候盡量選擇大點(diǎn)的盤安裝,為這些API 騰出空間浩淘,根據(jù)需求選擇张抄,不建議全部勾選署惯,土豪隨意极谊。
- 安裝 Android Studio (ionic 2x 打包成 apk 依賴 Gradle 編譯轻猖,安裝這個(gè)會自動幫我們安裝了 Gradle域那,免去了設(shè)置 Gradle 環(huán)境變量)
二次员、環(huán)境變量設(shè)置
-
環(huán)境變量需要設(shè)置兩個(gè) :Java 、Android SDK
Java 的環(huán)境變量名是: JAVA_HOME
Android SDK 的環(huán)境變量名是: ANDROID_HOME 其實(shí)也很簡單點(diǎn)擊電腦屏幕左下角的開始按鈕淑蔚,在輸入框里面輸入 ‘環(huán)境變量’ 回車進(jìn)入設(shè)置窗口
-
以 ANDROID_HOME 為例子如下圖(Java 也同理)
變量名是:ANDROID_HOME
變量值是:你安裝Android SDK的路徑 (例:D:\Program Files (x86)\Android\android-sdk)
一般情況下默認(rèn)系統(tǒng)變量里面是沒有的市殷,所以你要新建一個(gè)。
-
接下來是Path的設(shè)置
如果電腦本身已經(jīng)有這個(gè)Path了醋寝,就不用新建音羞,沒有就要新建一個(gè)
變量名:Path (網(wǎng)上有一些教程是大寫 PATH,應(yīng)該是不區(qū)分大小寫才對)
變量值: Android SDK安裝目錄下面的 tools、tools/bin办陷、platform-tools 的路徑民镜,用分號 ";" 隔開,官網(wǎng)建議3個(gè)路徑都加制圈,詳情請移步至(https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)
三们童、創(chuàng)建項(xiàng)目
- 創(chuàng)建項(xiàng)目之前首先要安裝 ionic cordova
-
安裝 (默認(rèn)安裝最新版)
npm install -g ionic cordova
-
- 創(chuàng)建項(xiàng)目
-
myApp 是文件夾名字,隨意命名鲸鹦,更多例子請輸入 " ionic start -h " 查看幫助
//創(chuàng)建一個(gè)空的項(xiàng)目例子
ionic start myApp blank//創(chuàng)建一個(gè)有tabs的項(xiàng)目例子
ionic start myApp tabs//創(chuàng)建一個(gè)基于 ionic1 的項(xiàng)目例子 (在這里不討論這個(gè))
ionic start myApp blank --type=ionic1
-
- 啟動項(xiàng)目
- 安裝好項(xiàng)目之后就是啟動項(xiàng)目了,命令如下
// 進(jìn)入這個(gè)項(xiàng)目文件夾
cd dome
// 運(yùn)行這個(gè)項(xiàng)目
ionic serve
- 安裝好項(xiàng)目之后就是啟動項(xiàng)目了,命令如下
四葛菇、打包
-
這一步是最后一步了甘磨,如果以上步驟都成功了,那這一步就很容易了
// 進(jìn)入這個(gè)項(xiàng)目文件夾
cd dome
// 添加Android平臺
ionic cordova platform add android- 下面三個(gè)根據(jù)你的需求選擇一個(gè)
// 生成一個(gè)debug的 apk文件
ionic cordova build android --prod
// 生成一個(gè)未簽名可發(fā)布版本的(release )的 apk文件
ionic cordova build android --release
// 生成兩種(debug眯停、release) apk文件
ionic cordova build android --prod --release
- 下面三個(gè)根據(jù)你的需求選擇一個(gè)
- 在這里,我遇到一個(gè)問題莺债,release 版本在手機(jī)里面安裝不了(模擬器也不行)滋觉,debug 版本就可以安裝,如果你有幸知道解決的辦法九府,你可以聯(lián)系我(微信:380018663)或者評論告訴我椎瘟,以上有什么不對的地方也可以指出來,感謝感謝V堆7挝怠!
五儡羔、其他
- 下面附上你可能會用到的鏈接
ionic 3 英文文檔 (https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/)
ionic 3 中文文檔 (http://www.ionic.wang/css_doc-v3.html#overview)
Angular4.x宣羊、ionic3.x百度網(wǎng)盤下載地址:(https://pan.baidu.com/s/1eTyvq5W)
Angular4.x璧诵、ionic3.x官網(wǎng)實(shí)時(shí)更新下載地址:(https://www.itying.com/goods-460.html)
Es6 中文文檔 (http://es6.ruanyifeng.com/)
TypeScript 中文文檔 (https://ts.xcatliu.com/introduction/what-is-typescript.html)