Electron跨平台桌面应用程序开发框架入门简介及学习笔记

小辣椒高效Office

Electron是什么及它的优势（摘自网络）

Electron简介

Electron 是是 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。

Electron 可以用于构建具有 html、css、JAVAScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 mac、windows 和 linux 系统

Electron为前端技术人员利用web前端技术开发桌面应用带来了可能，开发人员可利用已经掌握的前端技术如Html、CSS、JavaScript，以及结合一些前端技术框架：Vue、Angular、React、webpack，加之浏览器渲染引擎、Electron封装的系统API快速实现一款桌面应用的开发，Electron做了大部分复杂的工作，开发人员只需要专注在核心业务和前端技术本身。同时，通过一定的优化，Electron可以做到很好的体验。

支持平台

目前支持 Electron 的平台有 OS X、Windows、Linux：

OS X：对于 OS X 系统仅有 64 位的二进制文档，支持的最低版本是 OS X 10.8。
Windows：仅支持 Windows 7 及其以后的版本，之前的版本中是不能工作的。对于 Windows 提供 x86 和 amd64 (x64) 版本的二进制文件。需要注意的是 ARM 版本的 Windows 目前尚不支持。
Linux：预编译的 ia32(i686) 和 x64(amd64) 版本 Electron 二进制文件都是在 Ubuntu 12.04 下编译的，arm 版的二进制文件是在 ARM v7（硬浮点 ABI 与 Debian Wheezy 版本的 NEON）下完成的。预编译二进制文件是否能够运行，取决于其中是否包括了编译平台链接的库，所以只有 Ubuntu 12.04 可以保证正常工作，但是 Ubuntu 12.04+ 、Fedora 21、Debian 8 等平台也被证实可以运行 Electron 的预编译版。

Electron的优缺点

Electron 的优点如下所示：

部署升级方便，用户可以通过浏览器就可以访问。
HTML/JS/CSS 编写，方便且高效。
可支持 Windows、Linux 、Mac系统。
可让js 前端的生态融入进来 ，让开发员有大量的模块和资源可用（类似python第三方库、 vscode插件）

Electron 的缺点如下所示：

对于开发者而言：浏览器适配比较繁琐。有些应用必须指定浏览器版本（比如 OCX 必须是 IE 内核， H5 必须是较高版本），必须打开浏览器，输入一长串 URL 地址。
打包体积大：一个小应用打包下来可能就需要几十兆，不过目前磁盘存储已经不是什么大问题，随着网路环境越来越好，磁盘容积也越来越大，这个问题给用户带来的负担越来越不明显，几乎可以忽略。
占用内存较在：一般50M起步，多数要100-400M,新版不知道有否优化。毕竟开的是浏览器，有点重。
性能有延迟：在100多ms以上，没有Winform 那么快。
开发有一定复杂度：除需要掌握必要的前端知识外，基于Electron开发仍需要了解跨进程通信的一些知识点，进程上的一些问题往往还是容易给开发者带来一定的困惑，有一定的学习成本，但是通过系统学习还是容易攻克的。
版本更新快：它是基于Chromium的，所以Electron跟随Chromium的版本发布节奏，版本迭代较快，这可能会导致一些兼容问题，但幸运的是目前Electron的核心功能一直都算是很稳定的。
安全问题：Electron提供给了开发人员足够的便利，同时也有一些具有风险的开关，开发者需要在开发中妥善处理，避免对应用客户带来安全隐患，开发人员需要关注安全问题。
对于传统C/S桌面客户端开发者：对 web 应用不习惯，尤其是使用专业c# Delphi 软件，大多数会觉得 web 应用没有桌面应用方便或强大。

Electron开发桌面程序需要的前端技术

Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

基于Electron实现的软件

Electron 现已被多个开源应用软件所使用，其中被广大所熟知和使用的 Atom 、MongoDB桌面版管理工具、Skype桌面版、WhatsApp桌面版、HTTP网络测试工具Postman 、接口管理软件ApiFox 、WhatsAp、Teams、支付宝小程序IDE、开发人员熟知的Visual Studio Code编辑器就是基于 Electron 实现的。案例将来还会更多。

一、搭Electron

1、使用克隆库来搭建

1）安装git

要先安装git ,安装git, 在任何目录右键就有相关的命令文件资源管理器直接敲 cmd 随时在当前目录下克隆来创建项目

2）克隆项目

然后git clone https:// github.com/electron/ele ctron-quick-start

3）安装依赖

克隆后再：cd electron-quick-start

安装依赖并运行（主要是针对package.json 里面的 DevDependencies 这段里面的依赖配置） npm install && npm start 或者直接 cnpm i (一定要先进入到项目目录，是针对当前文件夹来的）也可直接下载 Download Zip源码包下来再解压到你指定的文件夹下面

4）运行项目

运行：在package.json 里 Scripts 段里有一个 start 它模拟 "electron ." 来运行相当于把 "electron ." 封装成 start 这个命令了。所以可以通过： npm start /cnpm start来运行（npm 是node.js里的）

可看到控制台里显示实际执行的是 electron . node_modules :各种依赖库模块 Ct+C 结束运行 Preload.js 是在main.js 讲程创建window时加载的写在webPreferences 里监听了DOMContentLoaded事件使用replacetext来替换 index.html 按指定ID找到几个版本文本 renderer.js 渲染进程（与index.html 一起组成渲染进程 index.html 引用了 <script src="./renderer.js"></script>

2、使用electron-forge(锻造) 脚手架来搭建项目

1) npx是node.js 新版支持的命令

npx create-electron-app my-new-app (推荐用这个) 或 yarn create-electron-app my-new-app

npx相当于多步传统的方式 npm install -g @electron-forge/cli (安装脚手架）或 cnpm安装 electron-forge init my-new-app cd my-new-app npm start

但npx使用的是npm 可能下载慢或下载不了，可考虑使用cnpm npx运行时控制台可看到简洁的安装过程，最后一步是安装相关的依赖

2）使用Vscode打开项目

项目下载或克隆后，使用Vscode编辑器来打开生成以下文件会放在src目录下： index.js 主进程 index.html 渲染进程 index.css index.html用到的css

3）运行项目

打开package.json 在scripts节中可看到 "start" : "electron-forge start", 所以你可以使用npm start 来运行同理，可使用 npm make 来生成exe文件

4）关闭DevTools

运行可看到打开了调试工具这个是在index.js 主进程的 createWindow 最后使用了一句 mainWindow.webContents.openDevTools();

5）渲染进程重载网页

改完index.html 或index.css后，可以不中止，直接在view-reload 重新加载网页

3、手工写代码来搭建Electron项目，更好理解代码

1）手工创建新项目

先创建项目目录，不能有空格，不能有中文在vscode 打开这个目录

2）新建3个文件 index.html index.css index.js

在index.html文件中，输入html:5 可产生一个基本的html框架或 !+Tab键也可以（必须是html文件中，js文件中不行）输入div或html+tab (不用 <div> 也可) 再新建main.js 右键在文件资源管理器打开，再在上面输入cmd 就会自动到达这个目录的命令行输入 npm init --yes 回车，它就会在当前目录下生成 package.json文件它会自动找main.js 入口，并配置好入口

也可手工再编辑修改package.json的内容

3）在当前项目安装一下Electron（开发环境）

虽然我们全局已安装了electron ,但输入 electron. 没有代码自动补齐或提示需要在Vscode 再用cnpm i electron --save-dev 再安装一次, 把它写到package.json中的devDependencies中依赖里这样再敲 electron. 代码就会自动提示了所以建议在项目里面安装一次这个模块

4）Require electron

再引用 const {app,BroserWindow}=require("electron")

5）app添加监听ready事件

再监听应用的启动事件。需要事件名及回调函数

app.on("ready", () => {
    const mainWindows = new BrowserWindows({
        width: 600,
        height: 400

mainWindow.loadFile(path.join( dirname,'index.html')); //path.join dirname 都是node.js的

electron可直接引用node.js里面的东西

在前面要先引用 const path=require('path'); //mainWindow.loadUrl(' https:// github.com '); }

二、开发工具中配置Eslint (js代码检测工具）

1、安装Eslint 插件

ESLint（有时发音为Easy Lint）是一种静态代码分析工具，用于识别JavaScript代码中发现的有问题的模式,可配置

安装此插件后，代码敲错，会有提示安装：cnpm install -g eslint （全局安装不需要注重目录）

2、项目中配置Eslint插件

cd 到项目的目录终端下运行：eslint --init 1）选择3种方式，只查找问题，.... ，第3种可强制修改你的格式（也可右键格式化你的代码 shift+alt+f） 2）再问你是在 javascript modules(import/export) 还是 CommonJS(require/exports) 使用，选择这个（node.js使用是require)

3)再问你是在 React Vue.js None of these (选择这个）

4)然后问你是否使用TypeScript, 选择No

会生成一个 .eslintrc.js 配置文件（其实就是我们刚才选择的配置）

再回到刚才错误代码，就有提示了 就是你虽然全局安装了，但需要用eslint --init 在当前项目中使用（其实就是生成一个.eslintrc.js配置文件）

5)使用node 来运行 js文件随便创建一个文件，内容为 console.log(process.platform) 在终端输入：node test.js 就可运行得到是 win32 (windows平台）

三、electron的运行流程

运行electron项目是执行命令：electron .

1、它先找项目中的package.json中的入口

找到 "main": "main.js", 加载这个主进程它实例化 BrowserWindow ，也就创建了一个渲染进程它再加载本地的index.html 文件（html css ) 展示给用户这个应用的页面再使用IPC 去完成任务并从主进程得到信息

2、主进程与渲染进程

一个electron应用只有一个主进程，但可以有多个渲染进程，每个Electron中的web页面运行在它自己的渲染进程里

3、进程与线程的区别

进程(Process) ：是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调试的基本单位，是操作系统结构的基础 线程(Thread）： 在一一个程序里的一个执行路线就叫做线程（thread), 更准确的定义是：线程是”一个进程内部的控制序列“ 线程和进程 ：一个程序至少有一个进程，一个进程至少有一个线程

4、可在new BrowserWindow 时增加属性 parent:

设置窗体的父窗体

5、在主进程和渲染进程里修改内容怎么刷新

在主进程里修改东西，必须重新运行 electron .

在渲染进程里改东西，可以使用网页-View-Force Reload 来刷新

6、如何在主进程和渲染进程中使用nodejs模块及NodeJs第三方模块

主进程中无需任何配置就可使用Nodejs模块

const fs=require("fs") 主进程打印console.log 需要在终端里看，而不是在浏览器时里的开发工具里的console里看（DevTools)

渲染进程： 第一种方法: preload 加载的可直接使用 在 new BrowserWindow(查看官网它的详细参数）时使用 webPreferences:{ preload:path.join(__dirname,"renderer/preload.js") BrowserWindow通过preload.js 可直接使用nodejs模块

第二种方法：不在preload加载的 如果要在index.html 引用Nodejs的模块如 index.html里加了 <script src="rederer.js"></script> 在rederer.js 中如果使用 require 就会出错。必须在main.js 中的创建这个渲染进程 new BrowserWindow (对应那个index.html) 加上下面配置 webPreferences:{ nodeIntegration: true, contextIsolation: false

}

7、加个按钮来显示调用文件的内容

1、在index.html 增加个按钮 <button id="opednFile"> 打开 </button>

2、再定义 <div id="content"> //将来最好改成textArea ，代码显示更美观一些

3、再为 div 增加个样式

4、在renderer.js中要监听按钮单击事件

window.onload = () => {
    contentDom = document.querySelector('#openFile')
    openFileDom = document.querySelector('#content')
    openFileDom.onclick = () => {
        alert('test')
        const fs = require('fso')
        fs.readFile('package.json', (err, data) => {
            if (err) {
                console.log(err)
                return
            console.log(data.toString())
            contentDom.innerHTML = data.toString()

四、调用h5里的拖放Api 及Nodejs实现文件拖放

1、在窗体的 onload 设置 ondragenter ondrop等事件

window.onload = () => {
    var contentDom = document.querySelector('#content')
    // =function() 可改成箭头函数 =()=>
    //阻止这些事件的默认行为
    contentDom.ondragenter = contentDom.ondragover = contentDom.ondragleave = () => {
        return false
    contentDom.ondrop=(e)=>{

Electron是什么及它的优势 （摘自网络）