Electron-开发实践：制作icns图标
【省流】
封装了一个mac上将png转为icns的应用，
欢迎大家使用： https://electron-icns.com/
【前言】
将Electron应用打包为Mac应用包的时候，
这里以electron-packager打包为例，
默认打包运行后的应用图标是这样，
【icns】
按electron-packager的文档描述传入icon字段即可，
但是在mac端需要传入icns格式， https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#icon
icns是苹果专用的一种格式，将各种尺寸的图片集合在一起，
【制作icns】
可以在mac上手动制作icns图标
1. 准备一个1024x1024的png透明底图标，例如pic.png放到一个文件夹下
2. 创建一个tmp.iconset文件夹，然后执行下列命令
sips -z 16 16 pic.png --out tmp.iconset/icon_16x16.png
sips -z 32 32 pic.png --out tmp.iconset/icon_16x16@2x.png
sips -z 32 32 pic.png --out tmp.iconset/icon_32x32.png
sips -z 64 64 pic.png --out tmp.iconset/icon_32x32@2x.png
sips -z 128 128 pic.png --out tmp.iconset/icon_128x128.png
sips -z 256 256 pic.png --out tmp.iconset/icon_128x128@2x.png
sips -z 256 256 pic.png --out tmp.iconset/icon_256x256.png
sips -z 512 512 pic.png --out tmp.iconset/icon_256x256@2x.png
sips -z 512 512 pic.png --out tmp.iconset/icon_512x512.png
sips -z 1024 1024 pic.png --out tmp.iconset/icon_512x512@2x.png执行后就会得到各种尺寸的图片
3. 执行iconutil命令制作icns图标
iconutil -c icns tmp.iconset -o icon.icns执行后就生成了一个icns图标
4. 将这个icns图标传入到electron-packager的icon处再次打包
可以看到mac下已经显示自己定制的图标了
【electron-icns】
上面的方法比较麻烦，封装了一个库，欢迎使用：https://code.insistime.com/#/electron-icns
通过npx使用
npx electron-icns /path/to/your/png/icon通过npm全局使用
npm i -g electron-icns
electron-icns /path/to/your/png/icon通过devDependencies使用
安装
npm i -D electron-icns在package.json中添加命令
{
"scripts": {
"icns": "electron-icns /path/to/your/png/icon"
},
}通过jsapi使用
// cjs
const { icns } = require("electron-icns");
// mjs
import { icns } from "electron-icns";
// icns
const icnsPath = await icns(pngPath);效果
【图标很大】
制作好mac的icns图标后，
有时候会发现图标比其他应用的图标大一些，
例如这种效果：
原因其实很简单，
就是设计图标的时候没有留白，
随便找一个正常的图标打开查看，
这里大概看了下，
如果png的尺寸是1024x1024，
那么留白的尺寸是98px，
可以参考这个设计png，
然后转为icns就可以了。
【总结】
1. icns介绍
2. 手动通过sips和iconutil命令生成icns图标
3. 使用electron-icns库生成icns图标，https://code.insistime.com/#/electron-icns
相关推荐
Electron-开发实践：注册苹果开发者账号
【前言】 当使用electron开发完一个mac应用后， 如果想正常在mac电脑上使用， 还需要对你的应用进行签名和公证， 而签名和公证都需要一个苹果开发者账号， 这个过程中有一些坑，记录一下。 【注册】 注册地址： https://developer.apple.com/cn/programs/e
Electron-开发实践：clipboard剪切板
【前言】 Electron提供获取和写入系统剪切板的操作， 详见：https://www.electronjs.org/docs/latest/api/clipboard 【进程】 clipboard支持主进程使用，支持没有开启sandbox的渲染进程使用 【系统】 大部分clipboard的api
Electron-开发实践：crash上报及解析
【前言】 electron开发实践中，crash的上报不可避免， electron中可以通过crashReporter来上报crash， https://www.electronjs.org/docs/latest/api/crashreporter ， 而处理crash使用的是crashpad，有
Electron-开发实践：DMG安装包定制
【前言】 dmg文件是mac端常见的安装包格式， 前面几篇文章已经使用electron开发并打包好一个应用了， 本文主要讲下定制dmg安装包， 前面几篇文章： 一篇文章学会Electron Electron开发实践：本地数据库SQLite Electron开发实践：使用Monorepo管理Elect
Electron-开发实践：包体积精简
【前言】 前面几篇文章讲了从开发electron应用到mac打包， 相关文章： 一篇文章学会Electron Electron开发实践：本地数据库SQLite Electron开发实践：使用Monorepo管理Electron项目 Electron开发实践：Mac打包 Electron开发实践：注册
Electron-开发实践：本地日志
【前言】 使用electron开发好本地应用后， 本地日志记录必不可少， 这样可以通过日志获取用户操作信息以及定位bug等， 本地日志与实时性的埋点上报稍微有不同， 本地日志量更大，信息更全，且不是所有信息都时候上报。 【与nodejs本地日志的异同】 electron写本地日志和nodejs写本地
Electron-开发实践：定制Mac菜单
【前言】 前面几篇文章讲了从开发electron应用到mac打包， 相关文章： 一篇文章学会Electron Electron开发实践：本地数据库SQLite Electron开发实践：使用Monorepo管理Electron项目 Electron开发实践：Mac打包 Electron开发实践：注册
Electron-开发实践：Mac应用包签名和公证
【前言】 一篇文章学会Electron Electron开发实践：本地数据库SQLite Electron开发实践：使用Monorepo管理Electron项目 当你通过上面这些文章使用Electron开发好一个桌面应用， Electron开发实践：Mac打包 并通过这个文章在本地打包好了mac的应
Electron-开发实践：Mac打包
【前言】 当本地开发好一个 electron 应用后， 最想做的事情就是打包然后分享出去。 如何用 monorepo 管理一个 electron 项目， 可以看这里： Electron开发实践：使用Monorepo管理Electron项目 【构建】 接上一篇，打包是在 packages/dishie
Electron-开发实践：使用Monorepo管理Electron项目
【前言】 本文讲如何用 monorepo 来管理一个 electron 项目 代码地址： https://github.com/uikoo9/dishimonorepo/tree/electronmonorepo 【初始化】 首先需要初始化一个 monorepo 前端项目， 具体步骤可以看这里： 初
Electron-开发实践：注册快捷键
【前言】 本文介绍一下electron应用中如何注册快捷键 【主进程】 主进程注册快捷键比较简单，需要注意的是在app ready后使用， 常见键盘映射： https://www.electronjs.org/docs/latest/api/accelerator 另外在推出app时需要将所有注册的
Electron-开发实践：几种更新方式
【前言】 Electron开发桌面APP后， 接着涉及一个问题就是如何更新后续的版本， 本文介绍几种更新的方式。 【Electron架构】 用Electron开发的桌面APP， 其实包含几个部分： 1\. Electron本身的环境 2\. 主进程，主进程中又分为Nodejs部分，和非Nodejs部
Electron-开发实践：创建Window
【前言】 Electron入门就需要创建一个window， window是用来展示ui的， window是在渲染进程。 【创建window】 新建一个前端项目， package.json内容如下， 可以看到安装了Electron的开发依赖， 即执行过下面的命令， 且有一个start命令用来本地启动E
一篇文章学会Electron
【前言】 javascript语言的强大生命力，为前端开发拓展了很多业务 网页端业务：基于js，html，css开发网页相关业务 服务端业务：基于nodejs开发服务端业务 桌面端业务：基于chromium和nodejs开发桌面业务 移动端业务：基于webview开发移动端业务 【electron简
Electron-开发实践：本地数据库SQLite
【前言】 本地存取数据的一些常见的手段：Cookie，LocalStorage，IndexedDB，SQLite等， 这里做下简单的对比 Cookie 存储大小：4k 设置有效期：可以 服务端获取：可以 特点：简单数据存取 LocalStorage 存储大小：5M 设置有效期：不行 服务端获取：不行