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.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://user-gold-cdn.xitu.io/2020/5/26/1724f04e695be76f?w=1197&h=638&f=png&s=85316 "截图工具原理")
https://juejin.im/post/5bbac5cee51d450e7042ad2c
###### 主进程
* 创建窗口，加载html
* 通知渲染进程 截图，重设，关闭等

###### 渲染进程
* desktopCapturer.getSources 截图
* canvas 截图编辑
* 发送图片base64给主进程
<!-- * 1、创建全屏透明窗口,设置不显示鼠标
* 2、获取屏幕截图 desktopCapturer
* 3、屏幕图片做背景，绘制区域 -->
##### 浮窗组件
![](https://user-gold-cdn.xitu.io/2020/5/26/1724f04d4d558af6?w=1439&h=899&f=png&s=495938 "浮窗组件")

###### 使用
```js
__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,安装包文件自动上传
改造为脚手架

mengtuifrontend / Blog

Electron-萌推IM PC客户端分享 #36

Electron-萌推IM PC客户端分享

一、Electron

1.1、简介

1.2、主进程

1.3、渲染进程

1.3 主进程和渲染进程通信

1.3.1、 ipcMain 和 ipcRenderer(异步)

1.3.2、 remote(同步)

1.4、使用Electron API,Node API

1.5、壳工具功能分析

1.5.1、代码结构

1.5.2、bridge.js

index.js

method_map.js

method_manager.js(即将废弃)

1.5.3、复制粘贴功能

图片的复制

1.5.4、壳工具“组件”,主进程和html的组合

截图组件

使用

原理

主进程

渲染进程

1.5.5、壳工具主要的Electron接口

托盘及托盘菜单，任务栏闪动

二、打包和构建

2.1、简介

2.2、app打包

2.2.1、electron-builder vs 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及版本管理脚本

2.3、 bridge.js

三、打包server

3.1、简介

3.2、openSSH

3.3、远程桌面

3.4、jenkins

3.5、http-server

3.6、clear-old-file.js

四、部分问题和解决方案总结

InnoSetup中文界面,命令行打包

windows区域选取卡顿

electron-packager打测试包,debug包

五、展望