ionic3 从创建到打包成apk

前言：

ionic 3 开发APP， 从零到成功build成apk ，在这里做个记录，以windows 系统为例。

目录：

一、材料准备
二、环境搭建
三、创建项目
四、打包
五、其他

一、材料准备

1. 安装 node.js （提供npm）
   下载地址：（https://nodejs.org/en/）

2. 安装 Python（因为安装依赖过程中提示我需要安装Python，具体原因我没有去找）
   下载地址：（https://www.python.org/downloads/）

3. 安装 Java （打包成 apk 需要用到Java的环境）
   下载地址：（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）
   

   下载之前要点击上面的同意许可

4. 安装Android SDK （打包成 apk 需要用到Android 的API）
   下载地址：（http://www.androiddevtools.cn/）
   

   点击SDK Tools
   选择exe文件下载

5. 下载Android API
   在下载 API 的时候 tools 也要下载同样版本的。

提醒：这些API 需要的内存非常大，所以你安装Android SDK 的时候尽量选择大点的盘安装，为这些API 腾出空间，根据需求选择，不建议全部勾选，土豪随意。

6. 安装 Android Studio （ionic 2x 打包成 apk 依赖 Gradle 编译，安装这个会自动帮我们安装了 Gradle，免去了设置 Gradle 环境变量）
   我电脑是64位，所以选择了这个

二、环境变量设置

• 环境变量需要设置两个 ：Java 、Android SDK

  Java 的环境变量名是： JAVA_HOME
  Android SDK 的环境变量名是： ANDROID_HOME

• 其实也很简单点击电脑屏幕左下角的开始按钮，在输入框里面输入 ‘环境变量’ 回车进入设置窗口

• 以 ANDROID_HOME 为例子如下图（Java 也同理）

  变量名是：ANDROID_HOME
  变量值是：你安装Android SDK的路径 （例：D:\Program Files (x86)\Android\android-sdk）
  一般情况下默认系统变量里面是没有的，所以你要新建一个。

• 接下来是Path的设置

  如果电脑本身已经有这个Path了，就不用新建，没有就要新建一个
  变量名：Path （网上有一些教程是大写 PATH，应该是不区分大小写才对）
  变量值： Android SDK安装目录下面的 tools、tools/bin、platform-tools 的路径，用分号 ";" 隔开，官网建议3个路径都加，详情请移步至（https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html）

三、创建项目

• 创建项目之前首先要安装 ionic cordova

  • 安装 （默认安装最新版）

    npm install -g ionic cordova

• 创建项目

  • myApp 是文件夹名字，随意命名，更多例子请输入 " ionic start -h " 查看帮助

    //创建一个空的项目例子
    ionic start myApp blank

    //创建一个有tabs的项目例子
    ionic start myApp tabs

    //创建一个基于 ionic1 的项目例子 （在这里不讨论这个）
    ionic start myApp blank --type=ionic1

安装依赖的时候有点慢，耐心点就好了

• 启动项目
  • 安装好项目之后就是启动项目了，命令如下

    // 进入这个项目文件夹
    cd dome
    // 运行这个项目
    ionic serve

这样就是启动成功了，端口号是 8100，如果这个端口被占用，会有提示

四、打包

• 这一步是最后一步了，如果以上步骤都成功了，那这一步就很容易了

  // 进入这个项目文件夹
  cd dome
  // 添加Android平台
  ionic cordova platform add android

  • 下面三个根据你的需求选择一个
    // 生成一个debug的 apk文件
    ionic cordova build android --prod
    // 生成一个未签名可发布版本的（release ）的 apk文件
    ionic cordova build android --release
    // 生成两种（debug、release） apk文件
    ionic cordova build android --prod --release

显示这样就是Android平台添加成功了
这样就是打包成功了，下面的路径就是apk文件存放的路径

• 在这里，我遇到一个问题，release 版本在手机里面安装不了（模拟器也不行），debug 版本就可以安装，如果你有幸知道解决的办法，你可以联系我（微信：380018663）或者评论告诉我，以上有什么不对的地方也可以指出来，感谢感谢！！！

五、其他

• 下面附上你可能会用到的链接
  ionic 3 英文文档 （https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/）
  ionic 3 中文文档 （http://www.ionic.wang/css_doc-v3.html#overview）
  Angular4.x、ionic3.x百度网盘下载地址：（https://pan.baidu.com/s/1eTyvq5W）
  Angular4.x、ionic3.x官网实时更新下载地址：（https://www.itying.com/goods-460.html）
  Es6 中文文档 （http://es6.ruanyifeng.com/）
  TypeScript 中文文档 （https://ts.xcatliu.com/introduction/what-is-typescript.html）