electron 桌面应用

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

---

 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、启动打包后的 exe 程序，传递 的参数在 主进程 的process.argv 中。不管是命令行启动，还是 自定义 URL协议启动【浏览器调用本地exe程序】方式。https://newsn.net/say/electron-fake-protocol-args.html

 　  6、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:party\shell\open\command;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 【自行翻译】

二、菜单栏设置 与 右键菜单：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://www.jianshu.com/p/2593ccbf120e【vue-cli3 的脚手架】或 https://zhuanlan.zhihu.com/p/75764907【推荐，vue-cli3 的脚手架，且有说明 打包的情况】

　　vue的脚手架 里面内置了  electron-vue  的脚手架

　　注意：

• • 使用 vue add electron-builder 命令 提供 的electron版本太低了,可以先选择一个版本，后面再升级electron包。或者 手动安装electron：
  • 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,
    width: 1000,
    frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮，以及菜单栏*/
  })

//  /////////////////////////////////////////////////////////////////
//隐藏顶部菜单栏，关闭按钮那一栏 不隐藏
mainWindow.setMenu(null);

　　说明：vs code 编辑器 就是 这样做的。 

六、electron 的永久存储：electron 的永久 存储 虽然可以使用 Chrome 的存储，但是不推荐。因为卸载 electron 后，localStorage 等永久存储的 数据 不会被删除。重新安装软件还是会存在的。

　  说明：桌面软件 永久存储的数据，需要 卸载时删除。最好的办法是 自己写缓存文件 放在 安装目录上。卸载时删除这个文件就可以了。

　  实现方案1：electron-store 【没有用过】

　  实现方案2： 自己写 配置 到本地文件中。