使用IDE打开项目

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
WebStorm需要破解使用,推荐淘宝购买一个激活码,十块钱即可使用正版一年。


安装Android SDK(打包安卓APK需要)

Android开发环境包括Android SDK +IDE。IDE目前官方推荐的是Android Studio ,习惯Eclipse的也可使用Eclipse+ADT(Plugin)。 Android SDK、IDE(Android Studio)、ADT插件及SDK各种离线安装包的下载地址见下边链接。

https://www.android-studio.org/

安装详细步骤暂时忽略,具体SDK版本内容可参考如下: SDK版本 SDK Tools版本

安装Xcode(打包苹果IPA需要,仅MAC电脑)

直接在App Store中搜索安装Xcode即可!

打包android

添加平台

使用WebStorm终端执行如下命令

 ionic cordova platform add android

此命令运行完成后会新增红色箭头所指的platforms、plugins、www等文件夹及文件。 添加android平台 platform新增目录及文件

编译H5内容

ionic打包android时会将编译项目后生成的www文件的内容拷贝到platform下,为了确保打包时www文件夹内容为最新,最好每次打包前都执行以下命令:

ionic cordova prepare android

打包预编译

打包APK

debug版本

开发测试使用时可直接打包debug版本,debug版本在某些手机上无法安装。如果需要给他人安装使用,请打包release版本及生产版本。 执行如下命令即可生成apk包

 ionic cordova build android

安卓Debug

生产版本

打包生产版本命令与打包测试版命令相似,仅多一个--release选项,完整命令如下,但需要一个JKS签名证书及一个签名配置文件。

生成JKS签名证书

使用JDK自带的JTools即可生成签名证书

keytool -genkey -alias tomcat(别名) -keypass 123456(别名密码) -keyalg RSA(生证书的算法名称,RSA是一种非对称加密算法) -keysize 1024(密钥长度,证书大小) -validity 365(证书有效期,天单位) -keystore release.jks(指定生成证书的位置和证书名称) -storepass 123456(获取keystore信息的密码)

生成JKS证书

生成签名配置文件

打包生产包,光有JKS签名证书还不够,还需要一个release-signing.properties文件,文件内容如下:

storeFile=release.jks(JSK签名证书的路径,可以使绝对路径也可以是相对路径)
keyAlias=tomcat(生成JKS签名证书时配置的别名即alias)
storePassword=123456(生成JKS签名证书时配置keystore密码)
keyPassword=12345(生成JKS签名证书时配置的kaypass)
生成APK

在拥有JKS签名证书及签名配置文件release-signing.properties之后,将这两个文件放置到platforms/android根目录即android平台文件的根目录下即可运行命令完成打包。

ionic cordova build android --release

房子签名证书及签名配置文件 android生产打包

可能遇到的问题

JDK版本不正确

JDK版本不正确 将JDK版本修改1.8即可

failed to excute aapt

aapt错误 添加插件cordova-android-support-gradle-release

ionic cordova plugin add cordova-android-support-gradle-release

添加后重新打包即可。 解释:aapt错误一般是android底层依赖不匹配导致,此插件通过强制统一底层依赖版本而避免错误的产生。

SDK版本不对应

缺少对应的SDK版本 打开android studio安装对应缺少的版本后即可正常打包

打包IOS

添加平台

使用WebStorm终端执行如下命令

 ionic cordova platform add ios

此命令运行完成后会新增红色箭头所指的platforms、plugins、www等文件夹及文件。 添加ios平台 platform新增目录及文件

编译H5内容

ionic添加ios平台时会将编译项目后生成的www文件的内容拷贝到platform下,为了确保打包时www文件夹内容为最新,最好每次打包前都执行以下命令:

ionic cordova prepare ios

预编译H5至IOS

生成IPA

ios打包ipa或打包到ios手机只能使用xcode。 首先使用xcode打开platfos/ios文件夹或其下的.xcodeproj或.xcworkspace文件。 xcode打开文件

配置bundle ID以及开发者账号

设置bundle ID及开发者账号 如图所示,需要配置bundle ID以及开发者账号。 如果出现如图所示问题,则修改bundle ID,bundle ID是苹果应用的唯一标示,不能重复,如果与他人的重复即会出现如图所示错误。

配置target为 Generic ios device

切换打包目标 点击箭头所示位置切换打包目标为Generic ios device Generic ios device

导出archive

product->archive 如图所示,点击product下的archive,当archive任务执行完成后,会弹出如下所示界面: archive完成 点击红圈中的distribute app按钮进行下一步,点击后界面如下图 选择导出版本 上图中:

  • IOS App:Store代表生产版本,可以用来发布至App Store。
  • AD HOC:生产版本,仅能供当前开发者账号下的测试设备安装。
  • EnterPrise:企业版本,供企业放置在分发服务期(如蒲公英)上供内部员工下载安装使用,无设备限制。
  • Development:测试版本,仅供开发者及账号下的测试设备安装使用。 选中需要导出的IPA版本,并点击next进入下一步,如下图 APP Thining App Thinning可以译成“应用瘦身”。指的是App store 和操作系统在安装iOS或者watchOS的 app 的时候通过一些列的优化,尽可能减少安装包的大小,使得 app 以最小的合适的大小被安装到你的设备上。 这里不做任何选中,直接点击next到下一步,如下图: reSigning 这一步顾名思义在这对IPA进行二次签名,选中auto选项并next下一步即可,如下图: 导出IPA 到这里就是导出IPA的最后一步,点击export选择IPA存放目录即可。 ipa

可能遇到的问题

conflicting provisioning seeting冲突的签名信息

conflicting provisioning seeting 如图所示,此类问题是Xcode存在的bug,解决方法如下: 解决开发者签名冲突 如图所示红圈处,先关闭勾选,然后 shift+command+k清理一下,请完后再点击勾选上并配置好开发者账号,然后再次shift+command+k清理一下即可。