Blog
Blog copied to clipboard
mengtuifrontend
Electron-萌推IM PC客户端分享
Electron-萌推IM PC客户端分享
一、Electron
1.1、简介
- Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
- Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
- Node + Chromium https://www.electronjs.org/docs/tutorial/first-app
// main.js
const { BrowserWindow, app } = require("electron")
app.on("ready", () => {
const bw = new BrowserWindow()
bw.loadURL("https://www.mengtuiapp.com/#/")
})
1.2、主进程
- Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
1.3、渲染进程
每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
1.3 主进程和渲染进程通信
1.3.1、 ipcMain 和 ipcRenderer(异步)
https://www.electronjs.org/docs/api/ipc-main https://www.electronjs.org/docs/api/ipc-renderer
1.3.2、 remote(同步)
https://www.electronjs.org/docs/api/remote
1.4、使用Electron API,Node API
Electron同时对主进程和渲染进程暴露了Node.js 所有的接口 https://www.electronjs.org/docs/tutorial/application-architecture#using-nodejs-apis
1.5、壳工具功能分析
壳工具主要功能
- 包装web页面为可执行文件
- 提供给web调用Electron或系统功能的能力
1.5.1、代码结构
1.5.2、bridge.js
index.js
- 挂载方法
- 右键点击注册
method_map.js
- 渲染进程方法定义
- 主进程方法声明
method_manager.js(即将废弃)
- 调用主进程方法转换和管理
https://www.electronjs.org/docs/api/ipc-renderer https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
remote 重构
https://www.electronjs.org/docs/api/remote#remote
http://git.innotechx.com/projects/X/repos/pt-fe-aegis/commits/56024dde5d3befccfd7eaf2c88a6a11daab141fe
1.5.3、复制粘贴功能
图片的复制
- contextmenu 事件 https://www.runoob.com/jsref/event-oncontextmenu.html
- 前提:web支持粘贴base64
- 将图片转为base64写入剪切板
1.5.4、壳工具“组件”,主进程和html的组合
截图组件
使用
// 注册
__electronBridge__.registerScreenshots((res)=>{console.log("res ",res)})
// 调用
__electronBridge__.screenshots()
原理
https://juejin.im/post/5bbac5cee51d450e7042ad2c
主进程
- 创建窗口，加载html
- 通知渲染进程 截图，重设，关闭等
渲染进程
- desktopCapturer.getSources 截图
- canvas 截图编辑
- 发送图片base64给主进程
浮窗组件
使用
__electronBridge__.sendNotification({title:"title-test",body:"<body><h2 style='background:red;color:white'>"+Date.now()+"</h2></body>"})
原理
主进程
- 创建窗口，加载html,窗口位置个数及管理
- 通过url参数传入定义的html结构
渲染进程
- 读参数渲染页面
1.5.5、壳工具主要的Electron接口
托盘及托盘菜单，任务栏闪动
二、打包和构建
2.1、简介
2.2、app打包
2.2.1、electron-builder vs electron-packager+*
https://blog.csdn.net/weixin_33936401/article/details/88722952 https://www.electron.build/
- 默认exe安装包体验差(可配，但不方便)
- 一键所有，不灵活，只用部分功能不方便
https://github.com/electron/electron-packager
2.2.2、pack.js
electron-packager 生成可执行文件
electron-installer-dmg,innosetup-compiler-cn 生成安装包，测试环境zip包
2.2.3、测试环境包，调试包处理
2.2.4、build-changelog.js,Changelog及版本管理脚本
- 版本号检测
- 方便书写，同时修改多个文件的版本
- handlebars http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/
2.3、 bridge.js
- webpack target:electron-renderer
三、打包server
3.1、简介
- 设置静态ip
- 设置不待机，不自动关闭网络
3.2、openSSH
https://baike.baidu.com/item/OpenSSH/1137789?fr=aladdin
3.3、远程桌面
- 升级专业版激活 http://www.xitongcheng.com/jiaocheng/xtazjc_article_42563.html
- 开启远程桌面 https://jingyan.baidu.com/article/64d05a02a354d29e54f73bd1.html
- 远程桌面连接客户端(windows自带，mac Microsoft Remote Desktop)
3.4、jenkins
https://baike.baidu.com/item/Jenkins/10917210?fr=aladdin
http://10.105.40.88:8080/
3.5、http-server
https://www.npmjs.com/package/http-server
http://10.105.40.88:9999/
3.6、clear-old-file.js
四、部分问题和解决方案总结
InnoSetup中文界面,命令行打包
- 简介 https://www.onlinedown.net/soft/4693.htm
- 汉化 https://www.cnblogs.com/liancs/archive/2012/09/14/2685061.html
- node封装,npm 发布 https://www.npmjs.com/package/innosetup-compiler-cn
windows区域选取卡顿
- win branch-ebuild-screenshots-test
- 自带工具演示
electron-packager打测试包,debug包
rewrite config.js
五、展望
- 热更新预研
- 软件签名
- bridge.js,安装包文件自动上传
- 改造为脚手架
