electron使用electron-builder进行MacOS的 打包、签名、公证、上架、自动更新

一、前言

由于electron在macOS下的坑太多，本文不可能把所有的问题都列出来，也不可能把所有的解决方案贴出来；本文也不太会讲解每一个配置点为什么要这么设置的原因，因为有些点我也说不清，我尽可能会说明的。所以，你要抛弃你之前所有已经完成的东西，最好弄一个全新的系统，严格按照本文的步骤做。

建议用vmware虚拟机，装一个全新的macOS系统。配合vmware的拍照功能，如果中途出错，可以回退到虚拟机的上一个正常状态，非常方便。

我也是在这篇文章以及网友的帮助下才走通这个流程的，你可以参考一下。

Electron-builder 构建MacOS应用小白教程（打包 & 签名 & 公证 & 上架） - 掘金

二、系统配置

如果你需要这个环境，请私信我，200元送你（如果你需要，请在csdn上私信我，或者评论区留言，我会联系你的）。

我也是从别人那花钱买来的，另外我也是花钱各种请教，才总结出来的经验。当然，文档当中，我也会尽可能把我的经验放进去。

  • VMware® Workstation 17 Pro（17.0.0 build）

  • macOS Sonoma (版本14.0 Beta版) 

  • Xcode (Version 15.1) 

三、基本信息假设

由于配置需要一些信息，现对一些配置项做出假设

1.  您的appleId账号是 996@qq.com

https://idmsa.apple.com/

https://developer.apple.com

四、证书申请

1、加入 苹果应用开发者

这玩意需要交钱，按年付费，现在没法给大家截图了。只记得当时的坑是，得用比较新的 iphone 或者 mac，下载官方提供的一个应用，在里面注册提交资料即可。

https://developer.apple.com/programs/

2、生成 证书签名请求证书 文件

（1）按以下顺序，会在桌面生成一个 “CertificateSigningRequest.certSigningRequest” ，注意保存好该文件，以后要用的到。

（2）与此同时，会在钥匙串中生成一对密钥，这就是公钥和私钥，很重要，尤其私钥,如图所示

将这两个密钥导出后保存下来。这个私钥导出后，可以给别的开发人员用。别的开发人员导入这个“私钥文件和证书（.cer后缀的文件，在本文的后面会生成）文件”后，就可以在他的电脑上打包了。

下图就是本次生成的 证书签名请求文件、公钥、私钥文件

关于证书的知识，看这个文章：

https://www.jianshu.com/p/1e5f04ad396c/

https://www.jianshu.com/p/81610614225d

3、创建证书 Certificates

注意，不要在xcode里面创建证书（新版本的xcode里面创建不了 Mac Installer Distribution 证书；且不要用Apple Distribution 证书）

打开网址：

https://developer.apple.com/account

按以下步骤生成五个证书

将证书下载好后，按如下名称命名，以后要用。

4、创建 appId （即 Identifiers ）

此处创建的：

bundle ID：cn.kafaka.greader

我自己账号的TeamID：GN5XP7HD2C 

上面两个合起来，就是 appId: GN5XP7HD2C.cn.kafaka.greader （注意后面的打包配置文件中有个appId配置项，不一定完全是这个，我会在那个配置文件中做 特别 说明）

5、添加 Devices

在electron-builder中，可以打包出mas和mas-dev两个目标项。mas打包出来的 pkg 要上传到 应用商店 Mac App Store（简称 mas）；mas-dev打包出来的 app，要做本地测试，如果该app能正常运行，那么mas中打包出来的pkg就没问题。

而打包mas-dev时，要在应用中嵌入设备的uuid，该uuid会在下一步创建Profile时用到。

这里获取到的 uuid是 ：564DBF37-1976-5C42-B5B9-584D407DB380

如果截图中的 硬件 UUID 和 预置UUID不一样，那就用 硬件uuid。如果实在不行，你把两个uuid都添加到 Devices中。

6、创建 Profiles 

按以下步骤生成3个Profiles

五、项目基本配置

1、图标生成

你搜索一个 electron-icon-builder 关键词吧，能找到的

2、plist文件

（1）entitlements.mac.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>

（2）entitlements.mac.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.cs.allow-jit</key><true/><key>com.apple.security.cs.allow-unsigned-executable-memory</key><true/><key>com.apple.security.cs.allow-dyld-environment-variables</key><true/>
</dict>
</plist>

 （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.plist

注意，本文件中的 三个部分，得更改为你自己的。该文件中的其它部分内容，你可以根据自己的情况修改。

    <key>com.apple.security.application-groups</key>
    <array>
        <string>GN5XP7HD2C.cn.kafaka.greader</string>
    </array>


    <key>com.apple.application-identifier</key>
    <string>GN5XP7HD2C.cn.kafaka.greader</string>

    <key>com.apple.developer.team-identifier</key>
    <string>GN5XP7HD2C</string>

<?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.cs.allow-jit</key><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.network.client</key><true/><key>com.apple.security.network.server</key><true/><key>com.apple.security.files.user-selected.read-write</key><true/><key>com.apple.security.app-sandbox</key><true/><key>com.apple.security.application-groups</key><array><string>GN5XP7HD2C.cn.kafaka.greader</string></array><key>com.apple.application-identifier</key><string>GN5XP7HD2C.cn.kafaka.greader</string><key>com.apple.developer.team-identifier</key><string>GN5XP7HD2C</string><key>com.apple.security.files.bookmarks.app-scope</key><true/><key>com.apple.security.files.bookmarks.document-scope</key><true/>
</dict>
</plist>

你可以根据自己的情况，可添加以下内容

         // 看名字就知道与 用户选则文件相关
        <key>com.apple.security.files.user-selected.read-only</key>
        <true/>
        <key>com.apple.security.files.user-selected.read-write</key>
        <true/>

        // 看名字就知道与 下载相关
        <key>com.apple.security.files.downloads.read-write</key>
        <true/>

        // 看名字就知道与 网络访问相关

       <key>com.apple.security.network.client</key>
        <true/>
        <key>com.apple.security.network.server</key>
        <true/>

3、package.json

注意其中使用的 electron 和 electron-builder（高版本的已经直接把签名 公证等功能集成到一块了，比较省事；如果你用底版本，可能需要自己添加各种包，可能会出现其它问题）的版本号

    "devDependencies": {
        "electron": "^28.0.0",
        "electron-builder": "^24.9.1"
    },

关于会被打包的文件：dependencies会自动打包进去的；devDependencies不会打包进去，只是在开发时执行各种打包命令用的；builder中的files选项，用来指定哪些文件打包进去， 如果不指定，可能会把项目根目录下的所有文件打包进去。

打包时，electron-builder 会自动下载 electron版本，会缓存在以下目录中，可以自行下载好后放进去：

https://registry.npmmirror.com/binary.html?path=electron/

Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

{"name": "electron-quick-start","version": "1.3.2","description": "A minimal Electron application","main": "src/main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps"},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^28.0.0","electron-builder": "^24.9.1"},"dependencies": {},"build": {"appId": "cn.kafaka.greader","files": ["src/*"],"mac": {"category": "public.app-category.utilities","target": [{"target": "mas","arch": "universal"}],"icon": "./build/icons/icon.icns"}}
}

4、项目结构预览

请注意：build里面是存放一些打包资源的，electron-builder未配置时，默认从这个文件夹中找一些配置英，所以不要改这个文件夹名字。

六、打包 mas

1、package.json

注意：

（1）看好mac、mas、dmg部分的配置，如果你没成功，就仔细对比和我的区别，配置的项不要多、不要少、位置也不要变。

（2）不要自作聪明，自认为加一点配置或者少一点配置就没问题，因为有些坑，我实在说不完，所以就不说了，你照着配置就好

{"name": "electron-quick-start","version": "1.3.2","description": "A minimal Electron application","main": "src/main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps"},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^28.0.0","electron-builder": "^24.9.1"},"dependencies": {},"build": {"appId": "cn.kafaka.greader","files": ["src/*"],"mac": {"category": "public.app-category.utilities","target": [{"target": "mas","arch": "universal"}],"icon": "./build/icons/icon.icns"},"mas": {"identity": "penghui deng (GN5XP7HD2C)","hardenedRuntime": false,"gatekeeperAssess": false,"entitlements": "./build/entitlements.mas.plist","entitlementsInherit": "./build/entitlements.mas.inherit.plist","provisioningProfile": "./build/greader_mac_app_distribution.provisionprofile"},"dmg": {"sign": false,"background": "./build/osx/dmg_bk.png","icon": "./build/icons/icon.icns","iconSize": 120,"iconTextSize": 14,"contents": [{"x": 112,"y": 165},{"x": 396,"y": 165,"type": "link","path": "/Applications"}],"window": {"height": 380}}}
}

2、安装证书

将以下3个证书安装（双击cer文件运行，或者 把cer文件拖拽到 钥匙串访问 应用中）到钥匙串 的"登录"中。

安装好后，要包含以下3个。

证书安装成功后，有每个证书有以下两个特点：

（1）看到没，证书前面有个“小三角”，说明证书关联到 证书密钥的；密钥就是前面创建的 证书签名请求 文件： “CertificateSigningRequest.certSigningRequest”

（2）再看，点击证书后，上面有个“此证书有效”。如果不是这个结果，你得装该证书的的“签发者”证书，把下面4个证书下载下来装上。下载地址：https://developer.apple.com/account/resources/certificates/add

3、打包

（1）确保系统日期没问题，系统日期是 中国大陆区，时间和 北京时间是一样的，如果要修正日期，可用命令行：

方法一：调整时区，让系统自动调整。
sudo systemsetup -settimezone "Asia/Shanghai"如果上面的命令没有把日期调整过来，你可以试着重启系统。方法二：如果方法一不行，那就得强制手动改时间了。
sudo systemsetup -settimezone "Asia/Shanghai"
sudo systemsetup -setusingnetworktime off
sudo date <月><日><小时><分钟><年>// 例如：要将日期设置为 2023 年 8 月 8 日，时间为下午 2 点 30 分，您可以执行以下命令：sudo date 080214302023sudo systemsetup -setusingnetworktime on

如果时间不正确，可能出现如图所示的 时间戳问题

(2) 在项目根目录下执行这个命令

chmod -R a+rw ./*

如果不执行，可能在 Transporter 提交时出现如下问题

（3）更改package.json 中的版本号

（4）执行以下命令进行打包

 打包运行后，命令行结果大概是这样的，注意核对输出结果中的证书应用是正确的。

 这一步也不要“公证”，公证有可能导致打包的pkg内部出问题，导致在上传到 transporter 时出现其它未知问题（这个问题，我不清楚，听前辈的经验，没错的）。

如果应用的证书不正确，可能是证书安装问题。electron-builder打包时会根据一定规则选择证书，如果证书选择错误，就把无关的证书删除掉。

如果弹出如下框，一般是你的操作系统的登录密码（如果你对该 “登录”钥匙串设置独立密码了，那就是你设置的那个密码）

(5) 上传应用

打开 transporter 应用，如果没有就在 Mac App Store中下载

将dist\mas-universal（你的有可能是dist\mas 目录）目录中的pkg文件上传到 transporter中

上传交付后，大概如下所示

4、常见问题

（1）问题1

去掉 mac下面的 notarize 配置

七、打包mas-dev

这个是包含了deviceid的，即打包好后可以发给目标设置进行测试。好比你有不同版本的macOS操作系统，你可以将他们的uuid收集起来，打包好后，发给他们，以便测试你的软件是否在其它操作系统上正常运行。如果可以正常运行，那么打包的mas上传到应用商店后，也能正常运行的。

八、打包dmg

你也可以打包成dmg格式，这个格式可以发布到你的官网，以便其它人使用。不过这个格式，需要 进行“公证”，否则别人安装时会提示错误。

九、打包zip

zip其实就是把 .app 格式做成一个压缩包，解压后释放出 .app 格式的文件，然后双击直接运行。

注意：在macOS上，.app 格式的其实就是一个文件夹，只是操作系统会把名字以.app结尾的文件夹识别别一个 macOS应用程序而已。

这个格式也需要进行“公证”，否则别人安装时也会提示错误。

其它图片备份

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/294019.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Apache Flink 进阶教程（六）：Flink 作业执行深度解析

Apache Flink 进阶教程（六）：Flink 作业执行深度解析

目录 前言 Flink 四层转化流程 Program 到 StreamGraph 的转化 StreamGraph 到 JobGraph 的转化 为什么要为每个 operator 生成 hash 值&#xff1f; 每个 operator 是怎样生成 hash 值的&#xff1f; JobGraph 到 ExexcutionGraph 以及物理执行计划 Flink Job 执行流程…
阅读更多...
基于博弈树的开源五子棋AI教程[4 静态棋盘评估]

基于博弈树的开源五子棋AI教程[4 静态棋盘评估]

引子 静态棋盘的评估是棋力的一个很重要的体现&#xff0c;一个优秀的基于博弈树搜索的AI往往有上千行工作量&#xff0c;本文没有做深入讨论&#xff0c;仅仅写了个引子用来抛砖引玉。 评估一般从两个角度入手&#xff0c;一个是子力&#xff0c;另一个是局势。 1 评估维度 …
阅读更多...
《工具箱-SVN》SVN安装、备份、迁移教程

《工具箱-SVN》SVN安装、备份、迁移教程

文章目录 一、服务器搭建SVN1.检查SVN是否存在2.安装SVN3.创建版本库4.创建版本库存放文件地址5.修改配置文件5.1 vim authz5.2 vim passwd5.3 vim svnserve.conf 6.启动并查看SVN7.SVN Checkout8.SVN Update9.SVN Commit 二、SVN-无法连接主机&#xff0c;目标计算机积极拒绝&…
阅读更多...
使用Docker-镜像命令

使用Docker-镜像命令

镜像名称一般分两部分组成:[repository]:[tag] 在没有指定tag时&#xff0c;默认是latest&#xff0c;代表最新版本的镜像 目录 案例一&#xff1a;从DockerHub中拉取一个nginx镜像并查看 1.1. 首先去镜像仓库搜索nginx镜像&#xff0c;比如DockerHub ​编辑 1.2.操作拉取n…
阅读更多...
【clickhouse】在CentOS中离线安装clickhouse

【clickhouse】在CentOS中离线安装clickhouse

一、下载地址 通过以下链接进行rpm安装包的下载 https://packages.clickhouse.com/rpm/stable/ 根据需求下载对应版本 注意&#xff1a;ClickHouse 20.8.2.3版本新增加了 MaterializeMySQL 的 database 引擎&#xff0c;该 database 能映射到 MySQL 中的某个 database&#…
阅读更多...
渲染图和效果图的一样吗？渲染图与效果图区别？

渲染图和效果图的一样吗？渲染图与效果图区别？

在建筑、设计及电影制作等一系列领域&#xff0c;你可能经常听说渲染图和效果图这两个词汇。它们虽然在视觉表现上有许多相似之处&#xff0c;但在实质上却有着极其不同的特性和用途。此文主要探讨提供优质效果图云渲染服务&#xff0c;以及渲染图与效果图之间的区别。 一、 效…
阅读更多...
MyBatis 关联查询

MyBatis 关联查询

目录 一、一对一查询&#xff08;sqlMapper配置文件&#xff09; 1、需求&#xff1a; 2、创建account和user实体类 3、创建AccountMapper 接口 4、创建并配置AccountMapper.xml 5、测试 二、一对多查询&#xff08;sqlMapper配置文件&#xff09; 1、需求&#xff1a;…
阅读更多...
flask之文件管理网页（上传，下载，搜索，登录，注册） -- 翔山 第一版

flask之文件管理网页（上传，下载，搜索，登录，注册） -- 翔山 第一版

前面说要做一个可以注册&#xff0c;登录&#xff0c;搜索&#xff0c;上传下载的网页&#xff0c;初版来了 第一版主代码 from flask import request, Flask, render_template, redirect, url_for, send_from_directory import bcrypt import ossavePath os.path.join(os.ge…
阅读更多...
Apache Flink 进阶教程（七）：网络流控及反压剖析

Apache Flink 进阶教程（七）：网络流控及反压剖析

目录 前言 网络流控的概念与背景 为什么需要网络流控 网络流控的实现&#xff1a;静态限速 网络流控的实现&#xff1a;动态反馈/自动反压 案例一&#xff1a;Storm 反压实现 案例二&#xff1a;Spark Streaming 反压实现 疑问&#xff1a;为什么 Flink&#xff08;bef…
阅读更多...
SVM —— 代码实现

SVM —— 代码实现

SMO 算法的实现步骤&#xff1a; 代码如下&#xff1a; import numpy as np import matplotlib.pyplot as plt import seaborn as sns import random# 设置中文字体为宋体&#xff0c;英文字体为 times new roman sns.set(font"SimSun", style"ticks", fo…
阅读更多...
【虹科分享】金融服务急需数据层改造

【虹科分享】金融服务急需数据层改造

文章速览&#xff1a; 数字化转型正在颠覆银行与金融业金融服务的未来Redis Enterprise赋能实时金融应用 金融服务越来越注重实时互动体验&#xff0c;重构关键业务流程&#xff0c;从数据层入手该怎么做&#xff1f; 一、数字化转型正在颠覆银行与金融业 金融科技行业的初创…
阅读更多...
7. 结构型模式 - 代理模式

7. 结构型模式 - 代理模式

亦称&#xff1a; Proxy 意图 代理模式是一种结构型设计模式&#xff0c; 让你能够提供对象的替代品或其占位符。 代理控制着对于原对象的访问&#xff0c; 并允许在将请求提交给对象前后进行一些处理。 问题 为什么要控制对于某个对象的访问呢&#xff1f; 举个例子&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023