网站搭建准备呼和浩特网站制作 建设

当前位置： 首页 > news >正文

网站搭建准备,呼和浩特网站制作 建设,seo黑帽技术,it行业一、前言 由于electron在macOS下的坑太多#xff0c;本文不可能把所有的问题都列出来#xff0c;也不可能把所有的解决方案贴出来#xff1b;本文也不太会讲解每一个配置点为什么要这么设置的原因#xff0c;因为有些点我也说不清#xff0c;我尽可能会说明的。所以…一、前言 由于electron在macOS下的坑太多本文不可能把所有的问题都列出来也不可能把所有的解决方案贴出来本文也不太会讲解每一个配置点为什么要这么设置的原因因为有些点我也说不清我尽可能会说明的。所以你要抛弃你之前所有已经完成的东西最好弄一个全新的系统严格按照本文的步骤做。 建议用vmware虚拟机装一个全新的macOS系统。配合vmware的拍照功能如果中途出错可以回退到虚拟机的上一个正常状态非常方便。 我也是在这篇文章以及网友的帮助下才走通这个流程的你可以参考一下。 Electron-builder 构建MacOS应用小白教程打包 签名 公证 上架 - 掘金 二、系统配置 如果你需要这个环境请私信我200元送你如果你需要请在csdn上私信我或者评论区留言我会联系你的。 我也是从别人那花钱买来的另外我也是花钱各种请教才总结出来的经验。当然文档当中我也会尽可能把我的经验放进去。 VMware® Workstation 17 Pro17.0.0 build macOS Sonoma (版本14.0 Beta版)  Xcode (Version 15.1)  三、基本信息假设 由于配置需要一些信息现对一些配置项做出假设 1、您的appleId账号是 996qq.com https://idmsa.apple.com/ https://developer.apple.com 2、加入 苹果应用开发者 这玩意需要交钱按年付费现在没法给大家截图了。只记得当时的坑是得用比较新的 iphone 或者 mac下载官方提供的一个应用在里面注册提交资料即可。 https://developer.apple.com/programs/ 3、创建appleId的 app 专用密码 相关资料见使用 App 专用密码 - 官方 Apple 支持 (中国) (1) 打开网址并登录 Manage your Apple ID (2) Manage your Apple ID 在此创建 (3) 假设我们创建的密码为aaaa-bbbb-cccc-dddd 四、证书申请 1、生成 证书签名请求证书 文件 1按以下顺序会在桌面生成一个 “CertificateSigningRequest.certSigningRequest” 注意保存好该文件以后要用的到。 2与此同时会在钥匙串中生成一对密钥这就是公钥和私钥很重要尤其私钥,如图所示 将这两个密钥导出后保存下来。这个私钥导出后可以给别的开发人员用。别的开发人员导入这个“私钥文件和证书.cer后缀的文件在本文的后面会生成文件”后就可以在他的电脑上打包了。 下图就是本次生成的 证书签名请求文件、公钥、私钥文件 关于证书的知识看这个文章 https://www.jianshu.com/p/1e5f04ad396c/ https://www.jianshu.com/p/81610614225d 2、创建证书 Certificates 注意不要在xcode里面创建证书新版本的xcode里面创建不了 Mac Installer Distribution 证书且不要用Apple Distribution 证书 打开网址 https://developer.apple.com/account 按以下步骤生成五个证书 将证书下载好后按如下名称命名以后要用。 3、创建 appId 即 Identifiers
此处创建的 bundle IDcn.kafaka.greader 我自己账号的TeamIDGN5XP7HD2C  上面两个合起来就是 appId: GN5XP7HD2C.cn.kafaka.greader 注意后面的打包配置文件中有个appId配置项不一定完全是这个我会在那个配置文件中做 特别 说明 4、添加 Devices 在electron-builder中可以打包出mas和mas-dev两个目标项。mas打包出来的 pkg 要上传到 应用商店 Mac App Store简称 masmas-dev打包出来的 app要做本地测试如果该app能正常运行那么mas中打包出来的pkg就没问题。 而打包mas-dev时要在应用中嵌入设备的uuid该uuid会在下一步创建Profile时用到。 这里获取到的 uuid是 564DBF37-1976-5C42-B5B9-584D407DB380 如果截图中的 硬件 UUID 和 预置UUID不一样那就用 硬件uuid。如果实在不行你把两个uuid都添加到 Devices中。 5、创建 Profiles  按以下步骤生成3个Profiles 五、项目基本配置 1、图标生成 你搜索一个 electron-icon-builder 关键词吧能找到的 2、plist文件 1entitlements.mac.inherit.plist ?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dictkeycom.apple.security.app-sandbox/keytrue/keycom.apple.security.inherit/keytrue/ /dict /plist 2entitlements.mac.plist ?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dictkeycom.apple.security.cs.allow-jit/keytrue/keycom.apple.security.cs.allow-unsigned-executable-memory/keytrue/keycom.apple.security.cs.allow-dyld-environment-variables/keytrue/ /dict /plist 3entitlements.mas.inherit.plist ?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dictkeycom.apple.security.app-sandbox/keytrue/keycom.apple.security.inherit/keytrue/ /dict /plist 4entitlements.mas.plist 注意本文件中的 三个部分得更改为你自己的。该文件中的其它部分内容你可以根据自己的情况修改。 keycom.apple.security.application-groups/key     array         stringGN5XP7HD2C.cn.kafaka.greader/string     /array keycom.apple.application-identifier/key     stringGN5XP7HD2C.cn.kafaka.greader/string keycom.apple.developer.team-identifier/key     stringGN5XP7HD2C/string ?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dictkeycom.apple.security.cs.allow-jit/keytrue/keycom.apple.security.cs.allow-unsigned-executable-memory/keytrue/keycom.apple.security.cs.allow-dyld-environment-variables/keytrue/keycom.apple.security.network.client/keytrue/keycom.apple.security.network.server/keytrue/keycom.apple.security.files.user-selected.read-write/keytrue/keycom.apple.security.app-sandbox/keytrue/keycom.apple.security.application-groups/keyarraystringGN5XP7HD2C.cn.kafaka.greader/string/arraykeycom.apple.application-identifier/keystringGN5XP7HD2C.cn.kafaka.greader/stringkeycom.apple.developer.team-identifier/keystringGN5XP7HD2C/stringkeycom.apple.security.files.bookmarks.app-scope/keytrue/keycom.apple.security.files.bookmarks.document-scope/keytrue/ /dict /plist 你可以根据自己的情况可添加以下内容 // 看名字就知道与 用户选则文件相关         keycom.apple.security.files.user-selected.read-only/key         true/         keycom.apple.security.files.user-selected.read-write/key         true/ // 看名字就知道与 下载相关         keycom.apple.security.files.downloads.read-write/key         true/ // 看名字就知道与 网络访问相关 keycom.apple.security.network.client/key         true/         keycom.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?pathelectron/ 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: {}} } 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 arw ./* 如果不执行可能在 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上传到应用商店后也能正常运行的。 1、package.json {name: electron-quick-start,version: 1.5.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-dev,arch: universal}],icon: ./build/icons/icon.icns},masDev: {identity: penghui deng (8MUK7LXZQ5),hardenedRuntime: false,gatekeeperAssess: false,entitlements: ./build/entitlements.mas.plist,entitlementsInherit: ./build/entitlements.mas.inherit.plist,provisioningProfile: ./build/greader_mac_app_development.provisionprofile},dmg: {}} } 2、安装证书 3、打包 npm run dist 八、打包dmg 你也可以打包成dmg格式这个格式可以发布到你的官网以便其它人使用。不过这个格式需要 进行“公证”否则别人安装时会提示错误。 1、 package.json 注意 1appId部分和mas的配置是一样的如果打包后闪退可以在前添加 teamId 即 改成  GN5XP7HD2C.cn.kafaka.greader 2mac下有notarize 部分设置这个是为了 进行“公证” {name: electron-quick-start,version: 1.0.0,description: A minimal Electron application,main: 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: [dmg],icon: ./build/icons/icon.icns,hardenedRuntime: true,gatekeeperAssess: false,entitlements: ./build/entitlements.mas.plist,entitlementsInherit: ./build/entitlements.mas.inherit.plist,provisioningProfile: ./build/greader_developer_id_application.provisionprofile,notarize: {teamId: GN5XP7HD2C}},dmg: { }} } 2、 安装证书 得安装如下图的所示的证书 3、打包 打包命令行其中的两个export  是设置环境变量设置好后打包时会自动公证。 APPLE_APP_SPECIFIC_PASSWORD 参见前面的章节 export APPLE_ID996qq.com export APPLE_APP_SPECIFIC_PASSWORDaaaa-bbbb-cccc-dddd npm run dist 下图为打包结果其中 notarization successful 即提示已公证成功 九、打包zip zip其实就是把 .app 格式做成一个压缩包解压后释放出 .app 格式的文件然后双击直接运行。 注意在macOS上.app 格式的其实就是一个文件夹只是操作系统会把名字以.app结尾的文件夹识别别一个 macOS应用程序而已。 这个格式也需要进行“公证”否则别人安装时也会提示错误。 这个同 打包dmg 一模一样只是在 target 中添加一个 “zip”即可。 十、异常分析 1、运行打包的app时出现异常查看原因 看下图图片红色线条框起来的部分是异常类型和原因说明例如下图大概意思是 无效签名。这就说明你的证书有问题需要重新从 开者发王者下载然后重新部署到mac上。 十一、自动更新 1、安装electron-updater npm i electron-updater npm i electron-log 2、package.json 配置 得添加下一行值随意。添加这一行后才会生成 latest.yml 文件 repository: https://github.com/electron/electron-quick-start 3、代码在主进程中 放置如下代码 main.js 代码 将 前面打包的 文件放到服务器目录中 http://www.xxx.com/release/ 1对于windows请打包出nsis将如下图所示的3个文件放到服务器端 2对于macOS请打包出要公证将如下图所示的3个文件放到服务器端 3对于Linux请打包出要公证将如下图所示的3个文件放到服务器端 // Modules to control application life and create native browser window const { app, BrowserWindow, dialog, ipcMain } require(electron) const path require(node:path) const log require(electron-log); const { autoUpdater } require(electron-updater);/* // 为啥要用看看mac吧 app.commandLine.appendSwitch(no-sandbox); app.commandLine.appendSwitch(disable-gpu); app.commandLine.appendSwitch(disable-software-rasterizer); app.commandLine.appendSwitch(disable-gpu-compositing); app.commandLine.appendSwitch(disable-gpu-rasterization); app.commandLine.appendSwitch(disable-gpu-sandbox); app.commandLine.appendSwitch(–no-sandbox); ///报错ERROR:gpu_init.cc(481)] 修复禁用硬件加速 app.disableHardwareAcceleration();/ 日志输出目录 on Linux: ~/.config/app name/log.log on macOS: ~/Library/Logs/app name/log.log on Windows: %USERPROFILE%\AppData\Roaming\app name\logs\log.log / log.transports.file.level true; //是否输出到 日志文件 log.transports.console.level true; //是否输出到 控制台 var logFilePath log.transports.file.getFile(); log.error(log_file_path logFilePath);/ log.error(error!); log.info(info!); log.warn(warn!); log.verbose(verbose!); log.debug(debug!); log.silly(silly!); /function createWindow() {// Create the browser window.const mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(dirname, preload.js)}})// and load the index.html of the app.mainWindow.loadFile(path.join(dirname, index.html))// Open the DevTools.// mainWindow.webContents.openDevTools()return mainWindow; }ipcMain.handle(toCheckUpdate, (e) {checkAppVersionUpdate() });/** 从服务器检测 新版本并获取更新地址*/ function checkAppVersionUpdate() {// 从服务器获取 更新地址var G_UpdateDirUrl http://www.xxx.com/release/;doAppVersionUpdate(G_UpdateDirUrl); }function doAppVersionUpdate(updateDirUrl) {// 检查更新相关接口请查阅网址https://blog.csdn.net/DAJJbb/article/details/126767869/*macOS: DMG.Linux: AppImage, DEB and RPM.Windows: NSIS.*/// 设置是否自动下载默认是true,当点击检测到新版本时会自动下载安装包autoUpdater.autoDownload true;// 如果安装包下载好了当应用退出后是否自动安装更新autoUpdater.autoInstallOnAppQuit false;autoUpdater.logger log;// 设置版本更新服务器地址autoUpdater.setFeedURL(updateDirUrl);// 开始检查更新事件autoUpdater.on(checking-for-update, function () {log.info(checking-for-update);})// 没有可更新版本autoUpdater.on(update-not-available, function (info) {log.info(update-not-available);})// 发现可更新版本autoUpdater.on(update-available, function (info) {log.info(update-available);})// 更新下载进度事件autoUpdater.on(download-progress, function (progressObj) {log.info(download-progress);// mainWindow.webContents.send(on-soft-download, progressObj.percent);});// 下载完成autoUpdater.on(update-downloaded, function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {// mainWindow.webContents.send(on-soft-download, 100);// 已经下载完成询问用户是否退出更新const dialogOpts {type: info,buttons: [重启, 以后更新],title: 版本更新,message: 检测到新版本是否更新};dialog.showMessageBox(dialogOpts).then((returnValue) {if (returnValue.response 0) {autoUpdater.quitAndInstall();}});});// 检查更新/*setInterval(() {autoUpdater.checkForUpdates()}, 1000 * 60 * 5);*/autoUpdater.checkForUpdates(); }// This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() {createWindow()app.on(activate, function () {// On macOS its common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length 0) createWindow()})// 15秒钟后开始检测更新setTimeout(function () { checkAppVersionUpdate(); }, 1000 * 15); })// Quit when all windows are closed, except on macOS. There, its common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd Q. app.on(window-all-closed, function () {if (process.platform ! darwin) app.quit() })// In this file you can include the rest of your apps specific main process // code. You can also put them in separate files and require them here.其它图片备份