1、node桌面应用开发的框架 :electron 和 nw.js https://www.jianshu.com/p/c6bdb087e60d
2、使用electron构建跨平台Node.js桌面应用 : https://www.zhangxinxu.com/wordpress/2017/05/electron-node-js-desktop-application-experience/ 或 https://www.jianshu.com/p/2d7bc19cae64
NW.js开发桌面应用
electron开发桌面应用 https://www.w3cschool.cn/electronmanual/(W3C教程) 或 https://www.electronjs.org/docs(官网)
一、进程关系:
1、主进程:主进程管理所有页面和与之对应的渲染进程。
2、渲染进程:一个渲染进程 就相当于 浏览器的 一个标签页。每个渲染进程都是相互独立的,并且只关心他们自己的网页。
如果只开启一个窗口,其实就是在一个渲染进程上执行web程序。即类似浏览器一个标签页上打开网页,这个标签页的地址可以变换。
3、主进程中 console.log,是对应在命令行上的。而渲染进程的 console.log 是打印在 electron 调试模板的控制台上的。
4、Electron 5.0 之后,渲染进程中 使用 Node.js的模块 需要 手动开启这个功能;不然使用require引入模块报错。https://www.cnblogs.com/ezhar/p/13254332.html
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true } }) // nodeIntegration: true 加上这一句 就可以了 5.0以后默认是false
5、 主进程的 process 和 渲染进程的 process是不一样的。主进程 和 渲染进程 之间数据的通信,需要通过事件 或 remote模块。 https://www.cnblogs.com/alex96/p/12145534.html
6、渲染进程 获取 主进程 process 的 参数。渲染进程 通过事件 获取 或 通过 remote模块 获取。实现 下面的 获取 伪 协议 参数,可以直接获取。
// 渲染进程中 ,获取伪协议 party://createMeeting 的参数 import { remote } from 'electron'; console.log('主进程==',remote.process); let mainArgv = remote.process.argv // 通过 remote 直接 获取主进程的 process let urlStr = mainArgv[mainArgv.length-1];
总结:简单的功能 设置 通过事件 比较方便,如:渲染进程 关闭窗口 等 控制主进程 的 功能,使用事件比较方便;
渲染 进程 获取 主进程 的数据 还是 用 remote 比较方便。
7、启动打包后的 exe 程序,传递 的参数在 主进程 的process.argv 中。不管是命令行启动,还是 自定义 URL协议启动【浏览器调用本地exe程序】方式。https://newsn.net/say/electron-fake-protocol-args.html
8、Electron桌面应用打包流程:https://blog.csdn.net/qq_36091574/article/details/80256624
扩展:exe程序 相关的 功能
1、windows 安装包制作工具: Inno Setup、NSIS https://blog.csdn.net/Blasting_expert/article/details/80027188
a、Inno Setup入门教程:http://www.360doc.com/content/13/0327/13/4221543_274235049.shtml 或 https://www.jb51.net/softjc/460940.html
b、inno setuo 安装时 写入 注册表:https://www.cnblogs.com/wainiwann/p/10724696.html 。
如下,是在 党建 项目中,实现 OA 系统 调用 桌面视频会议软件 的 inno 配置。 参考 https://www.cnblogs.com/xienb/p/13445902.html ,在项目中 有效实现了这个功能。
[registry] ;本段处理程序在注册表中的键值 Root:HKCR64;Subkey:party;ValueType: string;ValueData:"party";Flags: uninsdeletevalue Root:HKCR64;Subkey:party;ValueType: string; ValueName:URL Protocol;ValueData:{app}electron-vue.exe;Flags: uninsdeletevalue Root:HKCR64;Subkey:partyshellopencommand;ValueType: string;ValueData:"""{app}electron-vue.exe"" ""%1""";Flags: uninsdeletevalue
2、网页中 调用 本地exe应用程序【自定义协议】:http://blog.sina.com.cn/s/blog_69e8e64e0102yord.html
目前都是通过 在 注册表 上自定义 协议实现的。
3、网页 如何检测本地是否有指定的 exe 程序呢,直接用别人封装好的插件:https://www.cnblogs.com/tangjiao/p/9646855.html
不同的浏览器 判断 是否有自定义协议的原理是不同的。参考github上的 README 说明: https://github.com/ismailhabib/custom-protocol-detection 【自行翻译】
二、主进程的调试:
* 渲染进程 直接在 Chrome 控制台可以调试
1、【亲测】主 进程 中 console.log() ,不能中文开始,不然 不会打印打印。需要前面加英文开头。如
console.log("log测试打印")
三、菜单栏设置 与 右键菜单:https://blog.csdn.net/GISuuser/article/details/86680599
四、多次点击桌面图标只打开一个应用【默认 每点一次,打开一个应用】:
https://segmentfault.com/q/1010000008241523/a-1020000008246522【里面的 的方法已经废弃了,用其它的方式】、
https://blog.csdn.net/DreamFJ/article/details/88532528【推荐,有效】
五、electron 结合 vue 开发应用:https://blog.csdn.net/qq_40673860/article/details/103942444【不推荐,vue-cli2的脚手架,electron版本来老了】 或 https://www.cnblogs.com/mysteryguest/p/electron3_vue-cli3_build.html
https://www.jianshu.com/p/2593ccbf120e【vue-cli3 的脚手架】或 https://zhuanlan.zhihu.com/p/75764907【推荐,vue-cli3 的脚手架,且有说明 打包的情况】
vue的脚手架 里面内置了 electron-vue 的脚手架
注意:electron 项目 文件路径最好不要有中文,不然 electron 打包成exe 可以会报错。
个人实践发现:vue在开发模式下 vue 是以本地http协议进行运行的【方便调试】。打包后,应用是以 file协议进行运行的。
六、electron 主进程 功能配置:
1、electron无边框窗口:实际开发中 electron 自带的 窗口上的菜单UI 结构 和功能不好制订。所以开发中往往 把自带的 边框窗口去掉,在web页面中 重新实现 最小化、最大化、关闭、拖动 等功能。
隐藏顶部菜单 隐藏关闭按钮: https://huangxiaoguo.blog.csdn.net/article/details/107768915
整个electron 外部窗口 全部关闭 mainWindow = new BrowserWindow({ height: 563, useContentSize: true, 1000, frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮,以及菜单栏*/ }) // ///////////////////////////////////////////////////////////////// //隐藏顶部菜单栏,关闭按钮那一栏 不隐藏 mainWindow.setMenu(null);
说明:vs code 编辑器 就是 这样做的。
七、electron 主进程 中 js 设置配置:一般是 渲染进程 通过事件 触发 主进程 设置 窗口 功能。
1、electron无边框窗口 js 中实现 (最小化、最大化、关闭、拖动)以及动态改变窗口大小 的功能:https://blog.csdn.net/fukaiit/article/details/91351448 或 https://blog.csdn.net/weixin_41819731/article/details/103324995(亲测有效)
8、electron 的永久存储:electron 的永久 存储 虽然可以使用 Chrome 的存储,但是不推荐。因为卸载 electron 后,localStorage 等永久存储的 数据 不会被删除。重新安装软件还是会存在的。
说明:桌面软件 永久存储的数据,需要 卸载时删除。最好的办法是 自己写缓存文件 放在 安装目录上。卸载时删除这个文件就可以了。
实现方案1:electron-store 【没有用过】
实现方案2: 自己写 配置 到本地文件中。
*、Electron 的打包构建:生成exe文件 https://blog.csdn.net/panco_/article/details/90906966