HUA
首页/文章/electron

如何将 Electron 项目上架

2024-09-11
1451 字约 5 分钟
...
学习

前言

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 中配置权限对应的描述。

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", 
    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'), 
    },
    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'), 
      provisioningProfile: path.join(rootDir, 'distribution_profile.provisionprofile'), 
    },
    mac: {
      identity: null, 
      icon: "logo_mac.ico",
      type: "development", 
      target: 'mas-dev', 
    },
  },
});

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 文件，如果没什么问题会自动上传到你的开发者中心。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
electron2025-03-05
不依赖第三方库自己实现 Electron 的主与渲染进程的国际化功能
正文 直接贴出代码： 主进程实现 首先需要在 文件中获取当前系统的语言，然后初始化国际化相关： 文件： 文件 然后在主进程中就可以通过 来实现国际化了。 渲染进程的实现 App 在启动的时候渲染进程已经执行了国际化的初始化，所以在主进程已经保存了一份当前语言的 信息，所以渲染进程就不需要进程这一步，直接从主进程获取即可。 主进程进程添加一个 事件，供渲染进程获取国际化相关数据： 首先我们要在 preload 中提前将国际化相关的信息写入...
学习
electron2025-03-05
应用多开，限制只启动一个应用，防止多个实例
通过app.requestSingleInstanceLock来控制应用的多开，返回值为boolean。 此方法的返回值表示你的应用程序实例是否成功取得了锁。如果它取得锁失败，你可以假设另一个应用实例已经取得了锁并且仍旧在运行，并立即退出。 即：如果当前进程是应用程序的主要实例，则此方法返回true，同时你的应用会继续运行。如果当它返回false，如果你的程序没有取得锁，它应该立刻退出，并且将参数发送给那个已经取到锁的进程。 在macO...
学习
electron2024-09-23
Electron实现文件缓存背景
背景 基于Electron研发的一款IM企业通信桌面端应用，会存在非常多文件、图片、视频类型回话消息。在Electron应用（桌面客户端软件）中，快速加载并显示图片是提升用户体验的关键。然而，传统的图片加载方式往往存在加载速度慢、资源占用高等问题，影响了用户的使用体验。 解决的问题 1. 支持自定义配置存储的磁盘位置 2. 支持长期存储 3. 支持自定义存储大小 4. 支持自定义存储类型（如图片、视频、文件，或者更细致化到MIME） 5...
学习
electron2024-09-23
我的 Electron 客户端也可以全量和增量更新了
前言 本文主要介绍 客户端应用的自动更新，包括全量和增量这两种方式。 全量更新： 运行新的安装包，安装目录所有资源覆盖式更新。 增量更新： 只更新修改的部分，通常是渲染进程和主进程文件。 本文并没有拿真实项目来举例子，而是起一个 新的项目 从 0 到 1 来实现自动更新。 如果已有的项目需要支持该功能，借鉴本文的主要步骤即可。 前置说明： 1. 由于业务场景的限制，本文介绍的更新仅支持 操作系统，其余操作系统未作兼容处理。 2. 更新流...
学习
electron2024-09-20
我的 Electron 客户端被第三方页面入侵了
问题描述 公司有个内部项目是用 来开发的，有个功能需要像浏览器一样加载第三方站点。 本来一切安好，但是某天打开某个站点的链接，导致 整个客户端直接变成了该站点的页面 。 这一看就是该站点做了特殊的处理，经排查网页源码后，果然发现了有这么一句代码。 翻译一下就是：如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。 奇怪的是两者不是 跨域 了吗，为什么 还可以影响顶级窗口。 先说一下我当时的一些解决办法： 1. 用 替换 2. 给 添...
学习
electron2024-09-13
Electron+WebRTC实现局域网内的远程控制软件
我的工位上有一台笔记本（windows），一个显示器，一台服务器（linux）。显示器同时连接笔记本和服务器，当需要用到服务器的时候：1.使用todesk等软件进行连接；2.直接把显示器切换到服务器桌面，然后给服务器插上鼠标键盘。在这种场景下，屏幕画面的传输对我来说并不是必要的，这种场景下能不能用一套键鼠控制两个电脑呢？边做边学便有了这个小工具。记录下来，其中遇到的问题和解决方案。 通过electron + Vue + primevue...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录