Electron-vue开发实战（七）| icon设置与发布等

LOGO⁍

logo-large

本项目图标logo采用现代渐变logo图标icon设计元素-素材集合 (canva.cn)设计，直接加了个H的字母在上面

不同平台上应用的LOGO尺寸和格式也不尽相同。三个平台所需的图片格式如下：^[1]

Linux - png
macOS - icns
Windows - ico

可以先准备好png，再转换

都放入build/icons文件夹

不知道为啥我的icon复制过来就还是electron原来的样子。。

只能改名再放进去，直接打包会报错（我好迷惑）

package.json里的配置如下（原先就有）：

"mac": {
  "icon": "build/icons/icon.icns"
},
"win": {
  "icon": "build/icons/icon.ico"
},
"linux": {
  "icon": "build/icons"
}

AppID是什么⁍

AppID是与注册表相关的东西。我们在主进程index.js里也要使用。否则打包后的应用将失去Windows平台的应用通知功能。

注册表下的内容，如HKEY_CLASSES_ROOT\CLSID下存放了所有的类和组件类别，但是模块可以由很多个类组成，那么这些类组成的这个模块，在COM中被称为应用，每一个应用对应着的这些模块，会有一些相同的设置，例如安全性、访问权限等，其中Dll代理其中一部分。

为了表示某个CLSID是属于某个AppID（将CLSID关联AppID），我们需要在HKEY_CLASSES_ROOT\CLSID{你的CLSID}键中，新建一个叫AppID的值，其中的内容就是它所属的AppID。^[2]

在package.json中添加

1	`"appId": "com.augu1sto.hexo-manager",`

打包其他配置⁍

在Windows平台上，默认打包出来的安装包并没有办法选择安装的路径，只会默认装到C盘的用户目录。这个并不是我们想要的。我们想要的是让用户自己选择安装的路径。

所以需要修改windows的一些配置以及加上一个nsis的配置来实现：^[1:1]^[3]

"win": {
  "icon": "build/icons/icon.ico",
  "target": "nsis"
},
"nsis": {
          // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
          oneClick: false,
          // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowElevation: true,
          // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
          allowToChangeInstallationDirectory: true,
          // 安装图标
          installerIcon: 'build/icons/icon.ico',
          // 卸载图标
          uninstallerIcon: 'build/icons/icon.ico',
          // 安装时头部图标
          installerHeaderIcon: 'build/icons/icon.ico',
          // 创建桌面图标
          createDesktopShortcut: true,
          // 创建开始菜单图标
          createStartMenuShortcut: true
}

可以增加参数

// 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大
            arch: [
              'x64'
              // 'ia32'
            ]

设置在系统通知里的名字：

打开你的main/index.js，在Windows平台的时候加上这个productName：

// ...
import pkg from '../../package.json'

// ...
// ...

if (process.platform === 'win32') {
  //app.setAppUserModelId(pkg.build.appId) 
  app.setAppUserModelId(pkg.build.productName) 
}

打包⁍

yarn run build

报了错

解决：使用了electron-store的包，要放在依赖（非开发依赖里）

"dependencies": {
  //...
  "electron-store": "^8.0.1"
}

解决了上面说的图标问题后，总算成功了

发布⁍

软件版本号—规范与命名规则⁍

在一个产品产生的过程中会经历很多阶段，从需求确立直到发版，在不同的阶段会有不同的命名，我们来看看。^[4]

Alpha版表示该软件刚刚具有雏形，有了基本功能，大多用于开发者之间交流，bug还比较多，尚待修改完善。
Beta版表示该软件消除了严重的错误，但还需要大量测试来进一步修改剩下的bug，这部分修改主要针对UI。
Rc版表示该软件基本不存在会导致错误的严重bug，与正式版接近。
Release版该版本表示一个正式版本，此版本会面向用户，称为标准版。简写为R。举例：如1.0.0Beta，表示该软件进入测试版本。

软件版本号由四部分组成：

第一部分为主版本号
第二部分为子版本号
第三部分为阶段版本号
第四部分为日期版本号加希腊字母版本号

软件版本自动构建与发布⁍

可以参考^[5]，添加脚本

手动发布⁍

在github上创建release

Releases · Augu1sto/Hexo-Manager (github.com)