我将从鸿蒙Electron应用的“原生能力融合”角度切入，以实用的“系统托盘与桌面通知增强”为核心案例，兼顾开发效率与用户体验，适合CSDN开发者快速上手。
鸿蒙Electron实用技巧：系统托盘与原生通知深度适配
发布平台：CSDN
作者：XXX
标签：鸿蒙、Electron、系统托盘、原生通知、桌面应用
前言：桌面应用的“原生感”直接影响用户体验，而系统托盘与通知是核心交互入口。本文聚焦鸿蒙桌面端特性，通过实战案例讲解Electron应用如何适配鸿蒙系统托盘、自定义通知样式，并集成“后台运行”“快捷操作”等实用功能，代码简洁可直接复用。
一、核心价值：为什么要做鸿蒙原生适配？
Electron默认的系统托盘与通知在鸿蒙桌面端会出现“风格割裂”问题——比如通知样式与系统不一致、托盘图标模糊。适配后可实现：
视觉统一：托盘图标、通知样式完全贴合鸿蒙桌面设计规范；
功能增强：支持鸿蒙通知的点击跳转、托盘右键菜单快捷操作；
后台稳定：关闭主窗口后通过托盘保持应用后台运行，符合桌面使用习惯。
适配前提：鸿蒙桌面端系统版本≥3.0，Electron版本≥25.x（支持Linux托盘特性优化）。
二、快速初始化：环境与基础配置
2.1 项目搭建与依赖
# 新建项目mkdirharmony-tray-demo&&cdharmony-tray-demonpminit -y# 安装核心依赖（仅需Electron）npminstallelectron@27.3.0 --save-dev2.2 准备鸿蒙风格资源
为适配鸿蒙视觉，需准备：
托盘图标：2种尺寸（16x16px用于托盘，32x32px用于高分屏），建议为PNG格式透明图标；
通知图标：与鸿蒙系统通知图标风格统一（可使用系统默认图标或自定义）。
在项目根目录创建resources文件夹，放入图标资源（示例命名：tray-16.png、tray-32.png）。
三、实战开发：系统托盘与通知核心实现
核心功能：鸿蒙风格系统托盘（含右键菜单）、自定义原生通知、窗口关闭后托盘常驻、点击托盘恢复窗口。
3.1 主进程核心代码（main.js）
const{app,BrowserWindow,Tray,Menu,Notification,ipcMain}=require('electron');constpath=require('path');letmainWindow=null;// 主窗口实例lettray=null;// 系统托盘实例// 判断是否为鸿蒙系统（基于Linux内核特性）functionisHarmonyOS(){returnprocess.platform==='linux'&&(process.env.OS_VERSION?.includes('HarmonyOS')||fs.existsSync('/etc/harmonyos-release'));}// 创建主窗口functioncreateMainWindow(){mainWindow=newBrowserWindow({width:600,height:400,title:'鸿蒙Electron托盘演示',icon:path.join(__dirname,'resources/tray-32.png'),// 窗口图标webPreferences:{preload:path.join(__dirname,'preload.js'),contextIsolation:true}});mainWindow.loadFile('index.html');// 关闭窗口时隐藏到托盘（不退出应用）mainWindow.on('close',(e)=>{if(app.quitting){mainWindow=null;}else{e.preventDefault();mainWindow.hide();// 发送托盘通知showHarmonyNotification('应用后台运行','点击系统托盘可恢复窗口');}});}// 创建鸿蒙风格系统托盘functioncreateHarmonyTray(){// 根据屏幕DPI选择合适的托盘图标consttrayIconPath=process.screen.getPrimaryDisplay().scaleFactor>1?path.join(__dirname,'resources/tray-32.png'):path.join(__dirname,'resources/tray-16.png');tray=newTray(trayIconPath);tray.setToolTip('鸿蒙Electron演示');// 鼠标悬浮提示// 托盘右键菜单（鸿蒙风格：简洁实用）consttrayMenu=Menu.buildFromTemplate([{label:'恢复窗口',click:()=>{mainWindow.show();if(mainWindow.isMinimized())mainWindow.restore();}},{label:'发送测试通知',click:()=>showHarmonyNotification('测试通知','这是适配鸿蒙的原生通知')},{type:'separator'},// 分隔线{label:'退出应用',click:()=>{app.quitting=true;app.quit();}}]);tray.setContextMenu(trayMenu);// 点击托盘图标切换窗口显示/隐藏tray.on('click',()=>{if(mainWindow.isVisible()){mainWindow.hide();}else{mainWindow.show();mainWindow.restore();}});}// 显示适配鸿蒙的原生通知functionshowHarmonyNotification(title,body){// 鸿蒙系统自定义通知样式constnotificationOptions={title,body,icon:path.join(__dirname,'resources/tray-32.png'),// 通知图标silent:false// 开启通知声音};// 针对鸿蒙系统的特殊配置（利用Linux通知服务特性）if(isHarmonyOS()){notificationOptions.tag='harmony-electron-demo';// 通知分组标识notificationOptions.actions=[{type:'button',text:'打开应用'}];// 通知按钮}constnotification=newNotification(notificationOptions);// 通知点击事件notification.on('click',()=>{mainWindow.show();mainWindow.restore();});// 通知按钮点击事件（鸿蒙系统）notification.on('action',()=>{mainWindow.show();mainWindow.restore();});notification.show();}// 应用生命周期管理app.on('ready',()=>{createMainWindow();createHarmonyTray();// 应用启动后发送欢迎通知showHarmonyNotification('应用已启动','系统托盘已常驻，关闭窗口不退出');});// 所有窗口关闭时退出（macOS特殊处理）app.on('window-all-closed',()=>{if(process.platform!=='darwin')app.quit();});// 激活应用时恢复窗口app.on('activate',()=>{if(BrowserWindow.getAllWindows().length===0)createMainWindow();elsemainWindow.show();});// 接收渲染进程的通知请求ipcMain.handle('show-notification',(_,title,body)=>{showHarmonyNotification(title,body);return{status:'success'};});3.2 预加载脚本（preload.js）
安全暴露通知调用API，隔离主进程与渲染进程：
const{ipcRenderer,contextBridge}=require('electron');// 暴露API给前端contextBridge.exposeInMainWorld('harmonyTray',{showNotification:(title,body)=>ipcRenderer.invoke('show-notification',title,body)});3.3 前端交互界面（index.html）
简洁界面，提供手动发送通知的入口，展示核心功能说明：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>鸿蒙托盘与通知演示</title><style>body{font-family:"HarmonyOS Sans SC",sans-serif;/* 鸿蒙系统默认字体 */display:flex;flex-direction:column;align-items:center;justify-content:center;height:90vh;margin:0;background-color:#f7f8fa;color:#333;}.container{text-align:center;padding:20px;background:white;border-radius:12px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}h1{color:#0a58ca;/* 鸿蒙主题色 */margin-bottom:20px;}.btn{padding:10px 20px;margin:10px;border:none;border-radius:6px;background-color:#0a58ca;color:white;font-size:16px;cursor:pointer;transition:background 0.3s;}.btn:hover{background-color:#084298;}.tip{margin-top:20px;color:#666;font-size:14px;text-align:left;}</style></head><body><divclass="container"><h1>鸿蒙系统托盘演示</h1><buttonclass="btn"id="notify-btn">发送自定义通知</button><buttonclass="btn"id="minimize-btn">最小化到托盘</button><divclass="tip"><p>✅ 功能说明：</p><p>1. 关闭窗口后，应用将在系统托盘常驻</p><p>2. 点击托盘图标可恢复窗口</p><p>3. 右键托盘可打开快捷菜单</p><p>4. 通知支持点击跳转至应用</p></div></div><script>// 绑定按钮事件document.getElementById('notify-btn').addEventListener('click',async()=>{consttitle='自定义通知';constbody=`当前时间：${newDate().toLocaleString()}`;awaitwindow.harmonyTray.showNotification(title,body);});document.getElementById('minimize-btn').addEventListener('click',()=>{// 最小化窗口（Electron API需通过预加载脚本暴露，此处简化处理）window.close();// 触发主窗口close事件，隐藏到托盘});</script></body></html>四、关键适配细节：鸿蒙系统专属优化
4.1 托盘图标适配
鸿蒙桌面端支持高分屏自适应，通过screen.getPrimaryDisplay().scaleFactor判断DPI，自动选择16px/32px图标，避免模糊。
4.2 通知样式优化
图标统一：使用与托盘一致的图标，保持视觉连贯；
通知分组：通过
tag属性将应用通知分组，避免通知杂乱；交互增强：添加“打开应用”按钮，符合鸿蒙通知交互习惯。
4.3 窗口关闭逻辑适配
鸿蒙用户习惯“关闭窗口≠退出应用”，通过自定义close事件拦截窗口关闭，改为隐藏到托盘，仅通过“退出应用”菜单触发真正退出。
五、运行与测试（附效果截图）
配置启动脚本：修改package.json：
"scripts": { "start": "electron ." }启动应用：执行
npm start，观察效果：
截图1：应用主界面- 展示鸿蒙风格字体与按钮，视觉统一；截图2：系统托盘- 托盘图标清晰，右键菜单显示快捷操作；
截图3：原生通知- 通知样式与鸿蒙系统融合，含“打开应用”按钮；
截图4：后台运行- 关闭窗口后托盘常驻，发送通知提示。
六、打包与分发：鸿蒙桌面端专属配置
6.1 安装打包工具
npminstallelectron-builder --save-dev6.2 配置package.json打包参数
{"build":{"appId":"com.harmony.electron.tray","productName":"HarmonyTrayDemo","directories":{"output":"dist"},"linux":{"target":"deb",// 鸿蒙桌面端支持deb格式"icon":"resources/tray-32.png","category":"Utility",// 应用分类（鸿蒙应用市场识别）"desktop":{"Comment":"鸿蒙Electron托盘演示工具","Keywords":"harmony;tray;notification","StartupWMClass":"harmonytraydemo"// 避免多实例启动}},"extraResources":["resources/**/*"]// 打包图标资源}}6.3 执行打包
npmrun build打包完成后，在dist目录获取deb包，在鸿蒙桌面端双击即可安装，托盘功能完全保留。
七、常见问题与解决方案
| 问题现象 | 解决方案 |
|---|---|
| 托盘图标模糊 | 确保提供两种尺寸图标，通过scaleFactor动态选择 |
| 通知无声音 | 设置notificationOptions.silent为false，检查鸿蒙系统通知音量 |
| 关闭窗口后应用退出 | 确认主窗口close事件拦截逻辑正确，未设置app.quitting为true |
