17-5 RN之iOS打包

今朝有熊
176 阅读4分钟

课程目标

本节课程的目标是：

  1. 学习如何进行 iOS 应用的打包和上传。
  2. 配置开发者账号、证书和配置文件。
  3. 使用 react-native-upload 实现自动化打包和上传。

1. HTTP 请求配置

在 iOS 上，默认情况下无法直接访问 HTTP 请求。需要在项目中进行以下配置：

  1. 打开项目的 info.plist 文件。

  2. 添加以下内容，允许非 HTTPS 请求：

    <key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2. 手动打包 iOS 应用

2.1 为什么需要手动打包一次

  • iOS 的打包参数复杂，每个项目可能存在差异。
  • 为了确保以后可以通过命令行自动化打包，第一次需要手动打包以获取必要的配置文件和参数。

2.2 手动打包步骤

第一步：使用 Xcode 打包

  1. 打开项目的 ximalaya.xcworkspace 文件。

  2. 在 Xcode 菜单中，选择 Product -> Archive，等待打包完成。

  3. 打包完成后，进入 Window -> Organizer，选择刚才打包的应用。

  4. 点击右侧的 Distribute App 按钮。

    • 如果上传到测试平台，选择 Ad Hoc。
    • 如果上传到 App Store，选择 iOS App Store。

  5. 点击 Export 按钮，将文件保存到本地磁盘。

第二步：获取导出选项文件

  1. 在项目根目录下创建一个新的文件夹 /ios-export/。

  2. 将导出的 ExportOptions.plist 文件复制到 /ios-export/ 文件夹中，并重命名：

    • 测试环境文件：ad-hoc.plist
    • App Store 文件：app-store.plist

3. 配置开发者账号

3.1 注册开发者账号

  • 个人账号和公司账号：99 美元/年。
  • 企业账号：299 美元/年。

3.2 创建 App ID

  1. 打开 苹果开发者中心。

  2. 进入 Certificates, Identifiers & Profiles。

  3. 点击 Identifiers，选择 App IDs。

  4. 点击右上角的  +  按钮创建新的 App ID：

    • 描述：填写应用名称。
    • Bundle ID：填写唯一标识符（如 com.imooc.listen）。注意不要使用通配符。
    • 选择应用需要的功能（如推送、地图等）。

  5. 点击 Continue -> Register，完成注册。

3.3 创建证书

  1. 在 Certificates, Identifiers & Profiles 中，选择 Certificates。

  2. 点击右上角的  +  按钮，选择发行证书。

  3. 打开 macOS 的 钥匙串访问，创建证书签名请求：

    • 选择 证书助理 -> 从证书颁发机构请求证书。
    • 填写邮箱地址和常用名称，选择 存储到磁盘。

  4. 将生成的 .certSigningRequest 文件上传到开发者中心。

  5. 下载生成的 .cer 文件，并双击安装到钥匙串中。

3.4 创建配置文件

  1. 在 Certificates, Identifiers & Profiles 中，选择 Profiles。

  2. 点击右上角的  +  按钮，创建新的配置文件：

    • 选择 Ad Hoc 或 App Store。
    • 选择刚刚创建的 App ID 和证书。
    • 添加需要安装的设备（Ad Hoc 配置需要添加设备 UUID，可通过蒲公英工具获取）。
    • 设置配置文件名称（如 listen-ad-hoc）。

  3. 点击 Generate -> Download，下载配置文件。

  4. 双击配置文件，将其添加到 Xcode 中。

4. 使用 react-native-upload 自动化打包

4.1 配置导出选项

  1. 确保在 /ios-export/ 文件夹中已有以下文件：

    • 测试环境：ad-hoc.plist
    • App Store 环境：app-store.plist

4.2 配置开发者账号和密码

  1. 在 苹果开发者中心 中，生成一个 App 专用密码。

  2. 打开项目根目录的 upload.json 文件，添加以下内容：

    {
    "ios": {
        "apple_id": "你的苹果开发者账号",
        "app_specific_password": "你的专用密码"
    }
}

4.3 添加打包命令

  1. 在项目的 package.json 文件中，添加以下脚本命令：

    {
    "scripts": {
        "build-ios-ad-hoc": "npx upload-pgy --plist=./ios-export/ad-hoc.plist",
        "build-ios-appstore": "npx upload-appstore --plist=./ios-export/app-store.plist"
    }
}

4.4 执行打包命令

  1. 打包并上传到蒲公英测试平台：

    yarn build-ios-ad-hoc

  2. 打包并上传到 App Store：

    yarn build-ios-appstore

5. 注意事项

5.1 本地与服务器接口一致性

  • 确保本地开发和生产环境的接口前缀一致，避免因接口路径不同导致的问题。

  • 修改 .env 文件：

    • 本地环境：api_url=/mock/11
    • 生产环境：api_url=/mock/11/bear

5.2 校验失败的处理

  • 如果上传 App Store 时校验失败：

    1. 打开 Xcode 的 Window -> Organizer。
    2. 检查错误信息，通常是因为没有在 iTunes Connect 中创建对应的 App。

6. 总结

6.1 本节内容总结

  1. 学习了如何手动打包 iOS 应用，并获取必要的配置文件。
  2. 配置了开发者账号、证书和配置文件。
  3. 使用 react-native-upload 实现了自动化打包和上传。

6.2 思想总结

  • 自动化：通过 react-native-upload 简化了打包和上传流程。
  • 规范性：通过手动打包获取参数，保证了自动化打包的准确性。
avatar
文章
阅读
粉丝