钉钉网页版 App All In One

钉钉网页版 App All In One

Web App

https://im.dingtalk.com/

Electron App

原理解析：使用 electron 封装网页版 App

https://github.com/web-fullstack/dtalk-app

electron 设置 icon 大小 & macOS

bug ❌

solution ✅

trayx16.png 设置托盘图标

/**
 * 托盘
 */

const { app, Tray, Menu } = require('electron')
const path = require('path')
const ROOT = __dirname

// 托盘 icon
const TRAY_ICO = path.join(ROOT, '../icons/trayx16.png')
// const TRAY_ICO = path.join(ROOT, '../icons/trayx32.png')
// const TRAY_ICO = path.join(ROOT, '../icons/tray.png')
const TRAY_ICO_A = path.join(ROOT, '../icons/tray_a.png')

macOS 设置托盘图标或设置窗口图标

当前支持 PNG 和 JPEG 图片格式. 推荐 PNG ,因为它支持透明度和无损压缩.

在 Windows, 你也可以使用 ICO 图标的格式.

常用小图标尺寸
16x16 (100% DPI scale)
20x20 (125% DPI scale)
24x24 (150% DPI scale)
32x32 (200% DPI scale)

常用大图标尺寸
32x32 (100% DPI scale)
40x40 (125% DPI scale)
48x48 (150% DPI scale)
64x64 (200% DPI scale)

256x256

https://yuzhigang.gitbooks.io/electron/content/api/native-image.html

Electron 自定义 macOS 的 Dock 图标

默认 Dock 图标

自定义 Dock 图标 ✅

BrowserWindow 对象的 icon 属性只对 Windows / Linux 系统生效，对于 macOS 需要通过 app.dock.setIcon 进行设置

/* main.js */
const { app, session, Menu, ipcMain } = require('electron')
const { join } = require('path')
const fs = require('fs')

const { createMainWindow } = require('./tools/windows')

const ROOT = __dirname

//  初始化应用
app.once('ready', () => {
  // console.log('ROOT =', ROOT);
  // ROOT = /Users/xgqfrms-mbp/Documents/GitHub/dtalk-app/src
  let win = createMainWindow(join(ROOT, './icons/app.png'))
  // console.log(' ✅ process', process);
  if (process.platform === 'darwin') {
    app.dock.setIcon(join(ROOT, './icons/app.png'));
  }
})

https://juejin.cn/post/6844903957274296327

app icon generator

https://www.cnblogs.com/xgqfrms/p/13235397.html

https://appicon.co/

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---