zoukankan      html  css  js  c++  java
  • 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 Filessdk

     

    配置环境变量

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

     

    在系统变量中新建:

      变量名:ANDROID_HOME

      变量值:C:Program Filessdk

     

    在Path变量中将

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

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

     

    检查配置是否正确:

      android -h

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

    SDK Manager.exe工具

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

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

      mirrors.neusoft.edu.cn

    回到主界面,点packages再点reload

     

    按照下面图片进行勾选:

     

     

    点右下角 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安装

    cd到app目录补全文件

    执行:  

      cnpm i

    cd到app目录运行项目

    执行:

      ionic serve

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

     

    七、添加平台

    cd 到app目录下,执行

      ionic cordova platform add android

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

    八、下载gradle插件

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

    选择 gradle-2.14.1-all.zip

    或者

    网盘地址:

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

     

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

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

     

    修改配置:

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

     

    用代码编辑器打开 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

     

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

    十、APK签名

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

      ionic cordova build android –release

     

    签名步骤: 

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

     

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

     

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

     

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

     

    十一、可能发生的错误

    1、打包时出现的问题:

    解决方法:

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

    再执行一次打包命令:

      ionic cordova build android

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

  • 相关阅读:
    栈溢出笔记1.3 准备Shellcode
    聊聊手游的那些惊喜与惊吓
    GIS+=地理信息+容器技术(4)——Docker执行
    与AQS有关的并发类
    HDU 2102 A计划
    生产系统ELK日志采集系统
    datagrip离线安装驱动jar
    oracle无效索引重建
    18年总结及19年展望
    shell符号解释
  • 原文地址:https://www.cnblogs.com/chenglu/p/8608121.html
Copyright © 2011-2022 走看看