Ionic3开发教程 - 发布IOS版本（4）

Ionic3开发系列教程
Ionic3开发教程 - 环境准备（1）
Ionic3开发教程 - 开发（2）
Ionic3开发教程 - 发布Android版本（3）
Ionic3开发教程 - 发布IOS版本（4）
Ionic3开发教程 - 更新（5）

Ionic3常用命令行，所有命令都必须在项目根目录下执行

ionic start App1 tabs
ionic serve
ionic cordova platform rm ios    //移除android/ios平台
ionic cordova platform add ios  //创建android/ios平台，自动执行ionic cordova resources ios，创建图标和启动屏幕
ionic cordova build ios/android
ionic cordova resources ios，创建图标和启动屏幕
ionic cordova plugin rm cordova-plugin-camera//移除插件
ionic cordova plugin add cordova-plugin-camera//添加插件

查看更多命令：官网地址
查看命令参数：ionic serve --help

首先，ios打包必须在Mac OS系统环境下进行，使用Xcode做真机调试、打包发布。
没有Mac的也可以使用虚拟机(建议全部下载最近的软件)：IT之家学院：一步一步教你VMWare安装苹果Mac OS X

整体的步骤可以分布以下几步：

1. 安装Ionic3的运行环境，完成浏览器调试
2. 苹果开发者中心创建各种证书和文件
3. Xcode下完成真机调试
4. Xcode打包开发环境包，测试极光推送
5. Xcode打包生产环境报，发布到App Store

1、安装Ionic3的运行环境

• Nodejs环境
  下载*.pkg安装文件，下载地址v8.11.3
  安装完Nodejs后，默认就安装了npm命令支持，不过国内由于墙的问题，建议安装cnpm;

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

默认使用npm安装的包都保存在c:/users/root/appdata/roaming/npm，如果要修改npm默认安装目录；
1、执行npm config ls，查看当前目录信息

image.png

**2、修改prefix的值：npm config set prefix * **

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

• Ionic3环境
  执行命令sudo npm install [email protected] -g
  安装好nodejs和ionic3之后，就已经可以在浏览器中进行调试了，命令：sudo ionic serve

2. 苹果开发者中心创建各种证书和文件

首先需要先创建一个Appid，然后进入苹果开发者中心，创建开发者账号。
要申请什么类型账号请看：苹果开发者账号类型区别

开通开发者账号之后，你需要创建这些

1. 开发证书、发布证书、开发环境推送证书+生成环境推送证书（可选）
   极光官网提供证书申请教程
2. Devices：测试设备，最多100台（加了再删，占用一个名额，不恢复）
3. App ids：ios应用，没有数量限制
4. 开发环境和发布环境PP文件(Provision profiles)
   这里要说明以下为什么在配置文件里不见选择推送证书的选项，是因为我们在配置APP ID的时候已经绑定了推送证书，而在配置文件里又绑定了APP ID，所以就等于已经通过APP ID绑定了推送证书了
5. keys(可选)：基于token的身份验证，创建后只能下载一次。极光推送中的第二种验证方式，多个极光应用，可以共用同一个keys；不用麻烦的创建多个应用的开发、发布推送证书。

最后有这些东西：

• 四个证书：1.开发者证书 2.发布者证书 3.开发环境推送证书 4.生产环境推送证书
• 一个APP ID
• 一个测试设备(Device)
• 两个配置文件(Profile)

在Mac本地双击导入4张证书、双击导入两个pp文件（用于xcode签名）。
如果要使用极光推送，那么进入钥匙串管理，把两张推送证书导出为.p12文件，记住密码，上传到极光推送ios验证。

3. Xcode下完成真机调试

步骤：

1. 创建ios平台文件

ionic cordova platform rm ios   
ionic cordova platform add ios  
ionic cordova resources ios//正常执行完上面两句，资源文件都已经被更新，如果没有更新则执行本行命令
ionic cordova build ios

创建好ios平台目录后，双击打开 项目名.xcodeproj，会自动在xcode中打开本项目。

2. 签名

   
   
   image.png

3. Capabilities设置

   
   
   image.png
   
   
   image.png

4. info设置

   
   
   image.png

5. build setting》code signing设置

   
   
   image.png

6. 项目-info.plist设置

   
   
   image.png

7. JPushConfig.plist设置(极光必须)

   
   
   image.png

8. 极光后台证书验证(极光必须)

   
   
   image.png

9. app ids推送服务开启(极光必须)

   
   
   image.png
10. 设置Edit Scheme(极光必须)
    这里的设置具体不清楚是做什么的， 只知道设置了debug还是release，和发布打包时的环境production、devement有关系。建议如果开发环境设置为debug；生产环境除了Run其他全部为release；
    极光后台测试开发环境设置为debug，生产环境设置为release；
11. 生成.ipa安装包(极光必须)
    极光推送必须打包ipa，安装到iphone进行测试。查看极光测试日志，可以打开mac的终端查看app进程的实时日志。

极光推送问题排查神贴：常见问题 - JPush 合集（持续更新）
安卓打包发布神贴：IONIC3 打包安卓apk详细过程（大量图文）

12、App打包ios上架：https://www.jianshu.com/p/8c5350a82f80

---

如何清除角标

这个问题极光社区大神做了总结，简而言之就是：

1、Android上的角标和极光推送没有毛关系

2、IOS上的角标清除

需要分别清除服务器和客户端的角标
清除服务器角标：jpush.setBadge(0)、jpush.resetBadge()
清除客户端角标：

1. 方法一：

jpush.setApplicationIconBadgeNumber(0).then(()=>{
        alert("角标清除");
});

2. 方法二：
   打开Classes/AppDelegate.m文件，添加生命周期，执行角标清零方法

- (void)applicationDidBecomeActive:(UIApplication *)application
{
//    NSLog(@"\n ===> 程序重新激活 !");
    application.applicationIconBadgeNumber = 0;
    
}

极光社区大神贴：极光推送的角标问题——让人又爱又恨的小红点
间书IOS生命周期总结： iOS程序执行顺序和UIViewController 的生命周期