如何将 Electron 项目上架 Apple StoreElectron 应用程序可以运行在 Windows、macO

前言

Electron 是一个开源框架，它允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。

Electron 应用程序可以运行在 Windows、macOS 和 Linux 上，为用户提供了一种统一的方式来开发和维护软件。

本文将探讨如何将 Electron 构建的桌面应用程序上架到 App Store 中。

创建证书

进入苹果开发者平台

developer.apple.com/account

进入证书列表：

创建证书(Certificates)

Certificates 用于对需要上架应用进行签名

创建 Apple Development 和 Apple Distribution 两个证书。

Apple Development 证书用于在 Apple Developer 网站上注册的计算机上签署用于开发和测试的应用程序。

注册方法会在准备配置文件中描述。

带有 Apple Development 证书签名的应用无法提交到 Mac 应用商店。

为此，应用程序必须使用 Apple Distribution 证书进行签名。

但请注意，使用 Apple Distribution 证书签名的应用程序不能直接运行，它们必须由 Apple 重新签名才能运行，也就是只有从 Mac 应用商店下载后才能运行。

创建&上传证书签名请求

在启动台中找到“钥匙串访问”

在“常用名称”栏位中，输入密钥的名称。

将“CA 电子邮件地址”栏位留空。

选择“存储到磁盘”，然后点按“继续”，将证书保存到本地即可。

回到刚才创建证书的页面，选择刚刚生成的 CSR 文件

至此 Apple Development 的证书创建完成

用同样的方式再创建好 Apple Distribution 证书

创建ID(identifier)

identifier 应用的唯一标识

注册开发设备

获取开发设备id：设置->通用->关于本机->系统报告

进入设备管理页面添加设备

分两次将你设备的 UDID 和 UUID 填入 Device ID 中（特别是m1以上的机型，一定需要分两次填写）

安装证书

打开 Apple PKI，下载以下的证书并安装

www.apple.com/certificate…

如果已有则跳过此步骤

创建provisioning profile

每个应用需要创建两个 provisionprofile，分别是 development 和 distribution，后续如果证书、设备、应用Id有任何变更都要到这里来更新 profile。

创建 development 时请记得勾选全部的设备。

创建 distribution 时要选择 Apple Distribution 的证书。

profile 生成完下载到项目文件夹下，然后双击安装 development 描述文件，并且必须安装上。

申请 Development 与 Distribution 各自的 profile 文件

注意，下载 profile 后记得双击安装 development 描述文件

xcode相关操作

进入 xcode 设置，点击 Settings->Accounts，登录你的开发者账号，点击右下角 Download Manual Profiles，此时会将你开发者账号中的 profiles 全部更新到 xcode 中。

每次在 apple developer 中新增 provisioning profile 都要到这里点击 Download Manual Profiles，否则你的 Transporter 将无法上传应用到 Mac App Store。

点击 Manage Certificates ，确保里面有最开始配置的 certificates ，主要是 Mac Developent 和 Mac App Distribution 证书。

打包应用

1、创建 `entitlements.mas.plist` 文件

此文件用来记录和声明应用的权限，这里的权限最终会被合并到 info.plist 文件中。

如果苹果审核人员对应用提出审核意见，大概率就需要调整这个文件。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    // 这些是固定权限
    <key>com.apple.security.app-sandbox</key> //要提交到mas必须有sandbox权限
    <true/>
    <key>com.apple.security.application-groups</key>
    <array>
      <string>XXXXXXX.com.appname.username</string>  //你的teamId.你应用的bundleId
    </array>
    <key>com.apple.application-identifier</key>
    <string>XXXXXXX.com.appname.username</string>  //你的teamId.你应用的bundleId
    <key>com.apple.security.cs.allow-jit</key> //electron20+必须有此项否则闪退
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key> //防闪退
    <true/>
    <key>com.apple.security.cs.allow-dyld-environment-variables</key> //防闪退
    <true/>
    //此项以下开始为自定义的权限，根据你的应用情况按需添加，不能多不能少
    <key>com.apple.security.files.user-selected.read-only</key> //如果electron有showOpenDialog则必须有此项
    <true/>
    <key>com.apple.security.files.user-selected.read-write</key> //如果electron有showSaveDialog则必须有此项
    <true/>
    <key>com.apple.security.files.downloads.read-write</key>
    <true/>
  </dict>
</plist>

自定义权限还需要在 electron_builder 中配置对应的用户提示。

这里以摄像头为例，配置完描述和提示，在应用中当用户使用到摄像头相关功能时，系统会自动弹出对话框，让用户选择是否授权。

2. `entitlements.mas.plist` 中添加 `com.apple.security.device.camera` 权限。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    ...
    <key>com.apple.security.device.camera</key>
    <true/>
  </dict>
</plist>

electron_builder 中配置权限对应的描述。

//electron-builder config
mac:{
  extendInfo:{
    "NSCameraUsageDescription": "请允许程序访问你的摄像头",
  }
}

3、entitlements.mas.inherit.plist

固定描述，照抄。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.inherit</key>
    <true/>
  </dict>
</plist>

4、entitlements.mas.loginhelper.plist

固定描述，照抄。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>com.apple.security.app-sandbox</key>
        <true/>
    </dict>
</plist>

5、设置electron_builder相关配置

electron_builder.build({
  config: {
    productName: "应用名称", // 应用名称
    appId: "com.domain.name", // 应用appId
    masDev: {
      type: "development",
      hardenedRuntime: false,
      gatekeeperAssess: false,
      entitlements: path.join(rootDir, 'entitlements.mas.plist'),
      entitlementsInherit: path.join(rootDir, 'entitlements.mas.inherit.plist'),
      provisioningProfile: path.join(rootDir, 'development_profile.provisionprofile'), //development的描述文件，确保系统描述文件里已经安装好
    },
    mas: {
      type: "distribution",
      hardenedRuntime: false,
      entitlements: path.join(rootDir, 'entitlements.mas.plist'),
      entitlementsInherit: path.join(rootDir, 'entitlements.mas.inherit.plist'),
      entitlementsLoginHelper: path.join(rootDir, 'entitlements.mas.loginhelper.plist'), //如果需要testflight则该项必须
      provisioningProfile: path.join(rootDir, 'distribution_profile.provisionprofile'), //distribution描述文件
    },
    mac: {
      identity: null, // 这里必须设为null，否则electron-builder会重复签名导致应用崩溃
      icon: "logo_mac.ico",
      type: "development", // 如果打mas包，此处为distribution；如果是masdev包，此处为development
      target: 'mas-dev', // 打出什么包：mas、mas-dev、dmg
    },
  },
});

6、打包注意事项

如果是需要将安装包提交给 app store，那么你需要打 mas 包，在本地沙盒模式下模拟运行打 mas-dev 包。

如果需要在 testflight 中测试 mas 包，记得配置 entitlements.mas.loginhelper.plist文件。

mas-dev 打包后是一个 .app 文件，如果你之前的 development provisionprofile 在本地安装正确，那么可以直接运行，如果提示签名错误则需要回去检查。

mas 打包后则包含 .app 文件和 pkg 安装包，然后通过 Transporter 应用来上传 pkg 包到 app store 、审核、 testflight 测试。

如果在 Transporter 上传失败，那么可能是签名或 plist 中没有声明 sandbox 权限等。

上传应用到AppStore

在应用商店中下载 Transporter，登录开发者账号，添加刚才打包的 pkg 文件，如果没什么问题会自动上传到你的开发者中心。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。

如何将 Electron 项目上架 Apple Store

前言