ionic2 环境搭建 2018-04-26

ionic3 创建项目至apk打包全过程教程


主要流程:

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


一、安装nodejs

不要安装最新版。

不建议更改安装路径。

网盘地址:

  链接: 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 Files\sdk


配置环境变量

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


在系统变量中新建:

变量名:ANDROID_HOME

变量值:C:\Program Files\sdk


在Path变量中将

;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

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


检查配置是否正确:

 android -h

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

ionic2 环境搭建 2018-04-26_第1张图片

SDK Manager.exe工具

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

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

  mirrors.neusoft.edu.cn

ionic2 环境搭建 2018-04-26_第2张图片

回到主界面,点packages再点reload


按照下面图片进行勾选:

ionic2 环境搭建 2018-04-26_第3张图片


ionic2 环境搭建 2018-04-26_第4张图片


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

四、安装cordova

cmd执行:

cnpm install -g cordova@6

 

查看版本:

cordova -v

五、安装ionic

cmd执行:

cnpm install -g [email protected]

查看版本:

ionic -v

六、创建ionic项目

创建

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

ionic start myapp tabs --skip-npm

解释:

  myapp:项目名称(自定义)

  tabs:ionic模板,还有blank

  --skip-npm:跳过npm安装

ionic2 环境搭建 2018-04-26_第5张图片

cd到app目录补全文件

执行:

cnpm i

cd到app目录运行项目

执行:

ionic serve


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

ionic2 环境搭建 2018-04-26_第6张图片

七、添加平台

cd 到app目录下,执行

ionic cordova platform add android

ionic2 环境搭建 2018-04-26_第7张图片

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

ionic2 环境搭建 2018-04-26_第8张图片

八、下载gradle插件

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

选择 gradle-2.14.1-all.zip

或者

网盘地址:

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


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

ionic2 环境搭建 2018-04-26_第9张图片

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


修改配置:

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

ionic2 环境搭建 2018-04-26_第10张图片


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

将:  

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

改为: 

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


如下图:

将:

改为:


保存关闭。

九、打包

cd到app目录下,执行:

ionic cordova build android

ionic2 环境搭建 2018-04-26_第11张图片
ionic2 环境搭建 2018-04-26_第12张图片


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

十、APK签名

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

ionic cordova build android –release

ionic2 环境搭建 2018-04-26_第13张图片
ionic2 环境搭建 2018-04-26_第14张图片


签名步骤: 

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该数字证书的有效期

ionic2 环境搭建 2018-04-26_第15张图片


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  证书的别名

ionic2 环境搭建 2018-04-26_第16张图片
ionic2 环境搭建 2018-04-26_第17张图片


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


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


十一、可能发生的错误

1、打包时出现的问题:

ionic2 环境搭建 2018-04-26_第18张图片

解决方法:

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

再执行一次打包命令:

 ionic cordova build android



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

你可能感兴趣的:(ionic2 环境搭建 2018-04-26)