桌面右键功能开发

需求开发右键点击文件上传到对应的页面中

  • 开始整活 win mac liunx 三端同时开发

win

遇到的坑先梳理下 刚开始一定是要下载依赖,我用的最多的是pnpm,

  • 先决条件,我们需要在依赖拉完再进行原生的依赖拉取,加上我是在mac的虚拟机里搞win那么系统的架构就区分成arm64和windown常见的x86两种
js 复制代码
"postinstall": "electron-builder install-app-deps",

来拉取electron-builder的原生依赖

问题: 原因由于软连接找不到对应的包,或者说找到的不对,那么采用npm更扁平化的方式拉取所有依赖;然后将postinstall移除,将原生的依赖放到打包时来找

但是由于要在虚拟机里搞,所以一直认为要先搞定arm64的再到x86里面搞,那么就区分开了打包的两种情况

js 复制代码
"build:win:x64": "npm run build && electron-builder --win --x64 --config -c.nsis.include=build/builder-installer.x64.nsh",

"build:win:arm64": "npm run build && electron-builder --win --arm64 --config -c.nsis.include=build/builder-installer.arm64.nsh",

上述命令就是再打包时命令式的让electron-builder读取builder-installer.x64.nsh和builder-installer.arm64.nsh

js 复制代码
!macro customInstall
  ; --- 右键上传菜单注册 ---
  ; 创建一个名为 "UploadToPage" 的动作键 (* 代表所有文件类型)
  WriteRegStr HKCR "*\shell\UploadToPage" "" "上传到 bridge"
  ; (可选) 为菜单项添加一个图标,使用你应用的主程序图标
  WriteRegStr HKCR "*\shell\UploadToPage" "Icon" "$INSTDIR\${APP_FILENAME}.exe"
  ; 定义点击菜单项时要执行的命令 ("%1" 是占位符,代表被右键点击的文件的完整路径)
  WriteRegStr HKCR "*\shell\UploadToPage\command" "" '"$INSTDIR\${APP_FILENAME}.exe" "%1"'
!macroend
; =========================================================================
; ▼▼▼ 卸载时触发的单个 customUnInstall 宏 ▼▼▼
; =========================================================================
!macro customUnInstall
  ; --- 删除右键菜单注册表项 ---
  DeleteRegKey HKCR "*\shell\UploadToPage"

!macroend

上述是nsh特有的钩子,具体自己可以去找下相关的,这里不做多解释;

再于问题 :我打包arm时,成功了,但是应用在运行时发生找不到原版 robotjs 还是 @jitsi/robotjs, 结果-查找发现robotjs 对 Windows ARM64 的支持情况总结 核心结论: 目前,无论是原版 robotjs 还是 @jitsi/robotjs,都没有为 Windows ARM64 (win32-arm64) 提供官方的、预编译好的二进制文件。

转念然后直接打x86的,这次成功,且可运行,留有疑问,这种arm上打x86的方式,说是electron-builder会去自动识别来做调整,这块需要进一步学习研究;

然后对于在arm上运行x86的应用看来也是可行的,给出的解释:

借助了 Windows on ARM 内置的 x86/x64 仿真层。这个兼容层非常高效,能让 32 位和 64 位的 Intel/AMD 应用在 ARM 架构的 CPU 上运行,用户几乎感觉不到差异。这是你目前问题最完美的解决方案。

好👌 结合业务思路大概说下:读取文件,将文件地址,以及文件转化成上传的格式,来实现结合到业务中

mac

接下来进入mac功能,也很简单就是在electron-builder中加入

js 复制代码
# ▼▼▼ 在这里添加文件关联配置 ▼▼▼

fileAssociations:

# 为每个需要支持的扩展名创建一个条目

- ext: docx

name: Microsoft Word Document

role: Editor # 将你的应用注册为这些文件的"编辑器"角色

- ext: pptx

name: Microsoft PowerPoint Presentation

role: Editor

- ext: xls

name: Microsoft Excel 97-2003 Worksheet

role: Editor

- ext: xlsx

name: Microsoft Excel Worksheet

role: Editor

- ext: csv

name: Comma Separated Values File

role: Editor

- ext: txt

name: Text Document

role: Editor

- ext: pdf

name: PDF Document

role: Editor

上传逻辑

js 复制代码
app.on('open-file', (event, filePath) => {

event.preventDefault();

log.info(`[macOS] Received open-file event for: ${filePath}`);

  


// 这里的逻辑与 Windows 的逻辑完美复用

if (mainWin) {

// 如果窗口已存在,直接发送任务并唤醒窗口

mainWin.webContents.send('upload-file-task', filePath);

if (mainWin.isMinimized()) mainWin.restore();

if (!mainWin.isVisible()) mainWin.show();

mainWin.focus();

} else {

// 如果应用是随文件首次启动,暂存路径,等待窗口创建

initialFilePath = filePath;

}

});

上传逻辑服用,但是app.on('open-file',)这个是mac特有的,

然后依然拉依赖时用npm,打包也是;

相关项目依赖

js 复制代码
"electron": "^20.3.12",

"electron-builder": "^23.6.0",

"electron-vite": "^2.3.0",

"react": "^18.3.1",
相关推荐
im_AMBER1 小时前
React 20 useState管理组件状态 | 解构 | 将事件处理函数作为 props 传递 | 状态提升
前端·javascript·笔记·学习·react.js·前端框架
_OP_CHEN2 小时前
【Linux系统编程】(十六)揭秘 Linux 程序地址空间:从虚拟地址到内存管理的底层逻辑实战
linux·操作系统·虚拟地址空间·系统编程·进程地址空间·虚拟内存管理·程序地址空间
Swift社区10 小时前
React Navigation 生命周期完整心智模型
前端·react.js·前端框架
Kyle012316 小时前
计算机体系结构中的中断处理机制:硬件响应与软件识别的协同架构
架构·操作系统·计组
Dragon Wu19 小时前
TailWindCss 核心功能总结
前端·css·前端框架·postcss
小林up21 小时前
【MIT-OS6.S081作业4.3】Lab4-traps-Alarm
操作系统·xv6
Dragon Wu1 天前
TanStack Query(React Query) 常用api及操作总结
前端·javascript·前端框架
前端达人1 天前
原生JavaScript vs 前端框架,2026年该怎么选?
开发语言·前端·javascript·前端框架·ecmascript
漫天黄叶远飞1 天前
React 组件通讯全攻略:拒绝 "Props" 焦虑,掌握数据流动的艺术
前端·react.js·前端框架
文心快码BaiduComate1 天前
插件开发实录:我用Comate在VS Code里造了一场“能被代码融化”的初雪
前端·后端·前端框架