Ionic+Cordova WebApp Android打包及環境搭建

icyfire 發布于2019-08-20 13:47 / 2661人閱讀

摘要：寫一下這兩天打包的總結，希望幫人省下一些搜索的時間。環境配置下載地址配置環境和環境配置步驟基本一樣，測試打開，輸入，返回版本號即為成功。把圖標等文件用該命令上傳自己的項目到服務器，上傳完成后會有一個項目編號。

寫一下這兩天打包app的總結，希望幫人省下一些搜索的時間。

一.準備工作：

需要安裝：
Nodejs、AndroidSDK、Apache-ant、Jdk，
Ionic、Cordova。

我這里用到的版本

Nodejs：node-v6.3.1-x86.msi
Apache-ant：apache-ant-1.9.4
JDK：jdk-8u101-windows-i586.exe

二.環境配置： 1.Jdk環境配置

1.安裝
下載地址（注意根據自己所需選擇32位&64位）
http://www.oracle.com/technet...

2.配置環境

右鍵計算機——高級系統設置——高級——環境變量，如圖：

選擇【新建系統變量】--彈出“新建系統變量”對話框，在“變量名”文本框輸入JAVA_HOME,在“變量值”文本框輸入JDK的安裝路徑，單擊“確定”按鈕，如圖：

在“系統變量”選項區域中查看PATH變量，如果不存在，則新建變量 PATH，否則選中該變量，單擊“編輯”按鈕，在“變量值”文本框的起始位置添加“%JAVA_HOME%bin;%JAVA_HOME%jrebin; ，單擊確定按鈕，如圖：

CLASSPATH 環境變量放在最后面，是因為以后出現的莫名其妙的怪問題80%以上都可能是由于CLASSPATH設置不對引起的，所以要加倍小心才行。CLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtool.jar。要注意的是最前面的".;" 如圖：

3.至此Jdk環境配置完成

打開cmd，輸入java -version，返回java版本號即為配置成功

2.NodeJs環境配置

1.下載地址

https://nodejs.org/en/download/

2.配置環境

[新版本都不需要設計環境變量了，軟件會自動寫入環境變量]

3.測試

打開cmd，輸入node -v，返回node版本號即為安裝成功。

3.AndroidSDK環境配置

1.下載地址

https://developer.android.com...

2.配置環境

和JAVA類似，在環境變量中找到Path選中，點擊下面的【編輯】，在變量值里加入androidSDK中tools和platform-tools的目錄路徑，這里我的是D:android-sdktools;D:android-sdkplatform-tools;當然兩個之間要加個分號“;”。

Path = D:android-sdktools;D:android-sdkplatform-tools;

3.測試

打開cmd，輸入adb，不報錯即為成功。

4.Apache-ant環境配置

1.下載地址

http://ant.apache.org/bindown...

2.配置環境

和JAVA環境配置步驟基本一樣，

ANT_HOME D:SWEapache-ant-1.8.4
CLASSPATH ;%ANT_HOME%lib;
PATH ;%ANT_HOME%bin;

3.測試

打開cmd，輸入ant -version，返回版本號即為成功。

5.Ionic和Cordova的安裝

1.下載及安裝

打開cmd，如果之前裝過，建議先運行一次

npm uninstall -g ionic

再執行

npm install -g ionic cordova

2.測試

輸入ionic -v和cordova -v，分別返回ionic和cordova版本號即為安裝成功

三.打包

小Tip：新版本的ionic和cordova加入了telemetry，如果你也遇到這樣的錯誤

You have been opted out of telemetry. To change this, run: cordova telemetry on.

可以試試下面的方法解決

Commands to resolve or disable this, using CLI

cordova/ionic telemetry on

cordova/ionic telemetry off

cordova/ionic build --no-telemetry

1.進入你要創建項目的路徑：

cd E:StudyAndroidionicProject

2.創建一個名為myApp的還有tabs的項目（ionic start ）可選模板為sidemenu 側滑、tabs 底部tab切換、blank 空白）

ionic start myApp tabs

3.myApp就為項目名稱,進入myApp這個文件夾:

cd myApp

4.把項目復制到這個文件夾后，添加android平臺:

ionic platform add android

5.ionic會將本地的資源文件（支持png、psd和ai，尺寸越大越好）上傳到它的服務器進行處理。
本地資源文件放到resources目錄下，如果是某個平臺多帶帶的資源，可以放到對應平臺下，比如resources/Android/icon.png。
這樣就會把處理好的資源自動放到該平臺下，而不是所有平臺都放。

ionic resources [--splash] [--icon]

把圖標等文件用該命令上傳自己的項目到ionic服務器，上傳完成后會有一個項目編號。把res文件夾下的文件替換到 platforms/android/res下，把簽名文件復制到 platforms/android/ 下

6.生成androidapk:

ionic build android

即生成apk，文件保存在platforms/android/build/outputs/apk下

云服務器 GPU云服務器 android環境搭建 android開發環境搭建 Android環境搭建2015 cordova-android

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81241.html

ionic4+vue+cordova開發混合應用

摘要：摘要是可以讓我們使用開發即使來移動應用的框架。如果你熟悉可以直接使用開發，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以來說明這兩者如何結合使用。除此之外還引入和來對把我們代碼打包成安卓或應用。。摘要 ionic是可以讓我們使用web開發即使來移動應用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽離成四個版本，@ionic/co...

Yujiaao 2019-08-23 17:00 評論0 收藏0
使用Ionic3框架開始第一個混合開發APP

摘要：什么是框架框架是一個混合開發框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關技術快速開發多平臺的移動。使用全局安裝和。輸入，這是添加一個平臺的命令。注意這個包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個應用。什么是混合開發？簡單來說，就是在開發移動應用中同時使用Native和Web的開發方式。什么是Ionic3框架？ Ionic3框架是一個混合開發...

wangshijun 2019-08-02 15:57 評論0 收藏0
使用Ionic3框架開始第一個混合開發APP

摘要：什么是框架框架是一個混合開發框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關技術快速開發多平臺的移動。使用全局安裝和。輸入，這是添加一個平臺的命令。注意這個包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個應用。什么是混合開發？簡單來說，就是在開發移動應用中同時使用Native和Web的開發方式。什么是Ionic3框架？ Ionic3框架是一個混合開發...

Mr_houzi 2019-08-21 11:54 評論0 收藏0