ionic3 创建项目至apk打包全过程教程 一、安装nodejs 二、安装jdk(无需配置环境变量) 三、安装sdk(需要配置环境变量) 四、安装cordova 五、安装ionic 六、创建ionic项目 七、添加平台 八、下载gradle插件 九、打包 十、APK签名 十一、可能发生的错误

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

主要流程:

安装node.js  -->  安装jdk  -->  安装AndroidSDK  -->  安装cordova  -->  安装ionic -->  创建项目  -->  编译项目apk

 

不要安装最新版。

不建议更改安装路径。

网盘地址:

  链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7

 

查看nodejs版本:

  node -v

查看npm版本:

  npm -v

安装淘宝镜像 :

  npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本:

  cnpm -v

二、安装jdk(无需配置环境变量)

不建议更改安装路径。

网盘地址:

  链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7

 

查看版本:

  java -version

三、安装sdk(需要配置环境变量)

网盘地址:

  链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7

 

右键X解压

重命名为sdk

跟jdk放在一个父目录,便于查找。C:Program Filessdk

 

配置环境变量

计算机——右键属性——-高级系统设置——-环境变量

 

在系统变量中新建:

  变量名:ANDROID_HOME

  变量值:C:Program Filessdk

 

在Path变量中将

  ;%ANDROID_HOME%platform-tools;%ANDROID_HOME% ools

  添加到变量值最后(注意前面有分号)

 

检查配置是否正确:

  android -h

执行命令就代表安装无误。

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

SDK Manager.exe工具

打开界面上的Tools,选择options,先配置国内镜像:

域名千万不要输入http或者https协议前缀

  mirrors.neusoft.edu.cn

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

回到主界面,点packages再点reload

 

按照下面图片进行勾选:

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

点右下角 install packages 来安装,耐心等待即可。

四、安装cordova

cmd执行:

  cnpm install -g cordova@6

 

查看版本:

  cordova -v

五、安装ionic

cmd执行:

  cnpm install -g ionic@3.12.0

查看版本:

  ionic -v

六、创建ionic项目

创建

cd到要放置app的目录下,执行:

  ionic start myapp tabs --skip-npm

解释:

  myapp:项目名称(自定义)

  tabs:ionic模板,还有blank

  --skip-npm:跳过npm安装

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

cd到app目录补全文件

执行:  

  cnpm i

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

cd到app目录运行项目

执行:

  ionic serve

如果出现 localhost,有几个localhost就输入几

 ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

七、添加平台

cd 到app目录下,执行

  ionic cordova platform add android

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

添加完平台后app目录下会多了一个 platforms 文件夹

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

八、下载gradle插件

打开:http://services.gradle.org/distributions/

选择 gradle-2.14.1-all.zip

或者

网盘地址:

  链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7

 

下载完不用解压,直接拷贝到项目文件下的这个文件下:

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

注意:新项目没有gradle这个文件夹,需要新建一个,文件名不要写错。

 

修改配置:

找到下面路径下的 GradleBuilder.js文件

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

用代码编辑器打开 GradleBuilder.js:

将:  

  'https\://services.gradle.org/distributions/gradle-2.14.1-all.zip' 

改为: 

  '../gradle-2.14.1-all.zip'

如下图:

将:

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

改为:

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

保存关闭。

九、打包

cd到app目录下,执行:

  ionic cordova build android

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

打的apk包在画红线那个路径下面。将apk文件发送到手机就可以安装了。

十、APK签名

此时你已经有了debug的包,这个包是用来进行本地开发测试使用的,这个apk包是有签名的,所以他能被安装到手机上,但是这个包不能用来上架。所以我们要执行下面的命令,用来生成一个没有签名的apk包。

  ionic cordova build android –release

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

签名步骤: 

1、生成签名(.keystore)文件

打开cmd,cd到jdk的bin目录,执行:

  keytool -genkey -v -keystore cl.keystore -alias cl.keystore -keyalg RSA -validity 20000

说明:  

  -genkey 产生密钥

  -keystore cl.keystore 证书的文件名

  -alias cl.keystore证书的别名

  -keyalg RSA 使用RSA算法对签名加密

  -validity 20000该数字证书的有效期

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

2、签名apk

把将要签名的apk放在jdk文件bin目录下,cmd执行:

  jarsigner -verbose -digestalg SHA1 -sigalg MD5withRSA -tsa http://sha256timestamp.ws.symantec.com/sha256/timestamp -keystore cl.keystore -signedjar icl.apk android-release-unsigned.apk cl.keystore

说明:  

  jarsigne  是工具名称

  -verbose  表示将签名过程中的详细信息打印出来

  -digestalg SHA1 -sigalg MD5withRSA -tsa http://sha256timestamp.ws.symantec.com/sha256/timestamp  时间戳

  -keystore cl.keystore  之前生成的证书 
  -signedjar icl.apk  签名后的apk 
  android-release-unsigned.apk  需要签名的apk 
  cl.keystore  证书的别名

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

 

这样签名完成的apk就可以上架了。

 

至此,一个app项目从创建到打包已经完成。

 

十一、可能发生的错误

1、打包时出现的问题:

ionic3 创建项目至apk打包全过程教程
一、安装nodejs
二、安装jdk(无需配置环境变量)
三、安装sdk(需要配置环境变量)
四、安装cordova
五、安装ionic
六、创建ionic项目
七、添加平台
八、下载gradle插件
九、打包
十、APK签名
十一、可能发生的错误

解决方法:

进入SDK Manager.exe,安装SDK Platform API25

再执行一次打包命令:

  ionic cordova build android

欢迎交流~http://www.cnblogs.com/chenglu/