ELectron

git代码地址请 点击我

目标

1. 传统桌面端应用
2. electron 介绍
3. electron 核心技术
4. electron 开发体验
5. electron 入门内容介绍
   • 快速创建应用
   • electron 通信
   • demo

传统桌面端应用的开发

windows linux macos

1. 原生开发 直接将语言编译成可执行文件 直接调用系统 API 完成 UI 绘制 window： c++ MFC QT macos：OC swift 运行效率高

2. 托管平台 一次编译后 得到中间文件 通过平台或者虚拟机完成二次加载编译或解释运行

• C# .Net Framework window 应用
• java/Swing

electron

github 开源的框架，构建跨平台桌面应用程序

Atom 2014 开源

谁在用electron

postman、语雀、atom、WhatsApp

什么时候使用electron

1. 特定领域软件(pos机、财务软件、开发者工具、打印场景)
2. 同时开发 web + 桌面应用

electron 核心技术

electron = chromium(chrome 实验版) + node.js(操作系统底层 API 能力 path fs) + native API(调用原生应用程序接口)

Chromium是一个开源的Web浏览器项目，由Google发起和维护。它是许多流行的Web浏览器，包括Google Chrome、Microsoft Edge、Opera基础

electron 开发体验

优势

• 兼容性 可以使用最新的API和语法
• Node js 调用系统 API 操作文件 使用 npm模块
• 跨域

劣势

• 应用体积过大，哪怕写一个小功能打包也比较大(三四十MB)
• 支持度
• 性能
• 不支持 windowxp (可以使用别的技术比如nw)

基本原理

• electron 快速搭建
• preload 在渲染器进程加载之前加载 并且能够有权访问两个 渲染器全局(window document) node 环境
• 进程间融信
  • 主进程主动向渲染进程发送消息 win.webContents.send
  • 渲染进程主动向主进程发送消息 ipcRenderer.send ipcMain.on
  • 渲染进程主动向主进程发送消息并异步等待结果
    • ipcRenderer.invoke
    • ipcMain.handle

开发的时候注意有一些参数是面向不同平台的(window/macOS),所以有一些东西code没 take effect也很正常

打包

electron-builder 功能全面 electron-package

打包的时候注意 只有window环境可以打包window macOS打包macOS

基于webRTC + Electron实现远程控制

webRTC web real-time communication 是一项试试通信基础 允许网络应用或者站点 不借助中间媒介的情况下 建立浏览器点对点(peer 2 peer)的连接。

目标

能够远程控制用户电脑，提供点击和键入的功能

角色

控制端：客服、研发 傀儡端：用户

流程

1. 获取控制码
2. 控制端输入控制码连接傀儡端
3. 傀儡端将捕获的画面传至控制端
4. 控制端的鼠标和键盘指令传送至傀儡端
5. 傀儡端相应控制指令

汇总

• 服务端
  • 建立端与控制码的联系
  • 通过控制码找到用户
• 客户端
  • 捕获到画面
  • 播放画面
  • 捕获指令
  • 响应指令

技术点

• 怎么捕获画面 electron desktopCapturer
• 怎么完成用户间连接、画面、指令的传输
  • webRTC
    • getUserMedia 获取多媒体数据 音频 视频
    • RTCPeerConnection 建立P2P 连接、传输多媒体数据
    • RTCDataChannel 数据传输
• 怎么响应指令
  • robotjs

工程搭建

yarn create @quick-start/electron

desktopCapturer

如何接受和响应指令

robotjs 桌面自动化库 可以控制鼠标和键盘

• 支持 mac windows linux
• node C++

但是这个东西第一次安装会存在问题，直接安装大概率报错，需要去 官网 看看

重新整理一下安装步骤：

1. 首先要电脑有python，下载地址：https://mirrors.huaweicloud.com/python/2.7.15/ ，选python-2.7.15.amd64.msi
   • 下载安装
   • 右键个性化，然后搜索高级系统设置，进入点击下面的环境变量

如果最后还是没生效的话，cmd输入 where Python 看看是不是有别的路径，以及重启大法，反正我重启就好了

2. npm install --global --production windows-build-tools

功能

• 鼠标移动 robot.moveMouse
• 鼠标点击 robot.mouseClick
• 按键 robot.keyTap