node 桌面应用【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


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/2593ccbf120evue-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

原文地址:https://www.cnblogs.com/wfblog/p/10021566.html