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

Posted 2021-05-01 Java高级进阶

一.准备工作：

需要安装：
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环境配置

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环境配置

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

2.配置环境

[新版本都不需要设计环境变量了，软件会自动写入环境变量]

3.测试

打开cmd，输入node -v，返回node版本号即为安装成功。

3.AndroidSDK环境配置

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环境配置

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:\Study\Android\ionic\Project

2.创建一个名为myApp的还有tabs的项目（ionic start <project-name> <optional-template>） 可选模板为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下