ionic3 從創(chuàng)建到打包成apk

前言:

ionic 3 開發(fā)APP, 從零到成功build成apk 愉耙,在這里做個(gè)記錄,以windows 系統(tǒng)為例赌渣。

目錄:

一吠卷、材料準(zhǔn)備
二祭隔、環(huán)境搭建
三、創(chuàng)建項(xiàng)目
四千贯、打包
五搔谴、其他

一桩撮、材料準(zhǔn)備
  1. 安裝 node.js (提供npm)
    下載地址:(https://nodejs.org/en/

  2. 安裝 Python(因?yàn)榘惭b依賴過程中提示我需要安裝Python,具體原因我沒有去找)
    下載地址:(https://www.python.org/downloads/

  3. 安裝 Java (打包成 apk 需要用到Java的環(huán)境)
    下載地址:(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    下載之前要點(diǎn)擊上面的同意許可

  4. 安裝Android SDK (打包成 apk 需要用到Android 的API)
    下載地址:(http://www.androiddevtools.cn/

    點(diǎn)擊SDK Tools

    選擇exe文件下載

  5. 下載Android API
    在下載 API 的時(shí)候 tools 也要下載同樣版本的蚁吝。

提醒:這些API 需要的內(nèi)存非常大窘茁,所以你安裝Android SDK 的時(shí)候盡量選擇大點(diǎn)的盤安裝,為這些API 騰出空間浩淘,根據(jù)需求選擇张抄,不建議全部勾選署惯,土豪隨意极谊。


  1. 安裝 Android Studio (ionic 2x 打包成 apk 依賴 Gradle 編譯轻猖,安裝這個(gè)會自動幫我們安裝了 Gradle域那,免去了設(shè)置 Gradle 環(huán)境變量)
    我電腦是64位咙边,所以選擇了這個(gè)

二次员、環(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安裝目錄下面的 toolstools/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

安裝依賴的時(shí)候有點(diǎn)慢慧库,耐心點(diǎn)就好了
  • 啟動項(xiàng)目
    • 安裝好項(xiàng)目之后就是啟動項(xiàng)目了,命令如下

      // 進(jìn)入這個(gè)項(xiàng)目文件夾
      cd dome
      // 運(yùn)行這個(gè)項(xiàng)目
      ionic serve

這樣就是啟動成功了馋嗜,端口號是 8100齐板,如果這個(gè)端口被占用,會有提示

四葛菇、打包

  • 這一步是最后一步了甘磨,如果以上步驟都成功了,那這一步就很容易了

    // 進(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
顯示這樣就是Android平臺添加成功了

這樣就是打包成功了济舆,下面的路徑就是apk文件存放的路徑
  • 在這里,我遇到一個(gè)問題莺债,release 版本在手機(jī)里面安裝不了(模擬器也不行)滋觉,debug 版本就可以安裝,如果你有幸知道解決的辦法九府,你可以聯(lián)系我(微信:380018663)或者評論告訴我椎瘟,以上有什么不對的地方也可以指出來,感謝感謝V堆7挝怠!

五儡羔、其他

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市仇冯,隨后出現(xiàn)的幾起案子之宿,更是在濱河造成了極大的恐慌,老刑警劉巖苛坚,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件比被,死亡現(xiàn)場離奇詭異,居然都是意外死亡泼舱,警方通過查閱死者的電腦和手機(jī)等缀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來娇昙,“玉大人尺迂,你說我怎么就攤上這事∶罢疲” “怎么了噪裕?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長股毫。 經(jīng)常有香客問我膳音,道長,這世上最難降的妖魔是什么皇拣? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任严蓖,我火速辦了婚禮,結(jié)果婚禮上氧急,老公的妹妹穿的比我還像新娘。我一直安慰自己毫深,他們只是感情好吩坝,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哑蔫,像睡著了一般钉寝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闸迷,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天嵌纲,我揣著相機(jī)與錄音,去河邊找鬼腥沽。 笑死逮走,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的今阳。 我是一名探鬼主播师溅,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼茅信,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了墓臭?” 一聲冷哼從身側(cè)響起蘸鲸,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎窿锉,沒想到半個(gè)月后酌摇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嗡载,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年窑多,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鼻疮。...
    茶點(diǎn)故事閱讀 39,785評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡怯伊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出判沟,到底是詐尸還是另有隱情耿芹,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布挪哄,位于F島的核電站吧秕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏迹炼。R本人自食惡果不足惜砸彬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望斯入。 院中可真熱鬧砂碉,春花似錦、人聲如沸刻两。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽磅摹。三九已至滋迈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間户誓,已是汗流浹背饼灿。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留帝美,地道東北人碍彭。 一個(gè)月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親硕旗。 傳聞我的和親對象是個(gè)殘疾皇子窗骑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容