（新手推荐）技术胖博客以及Electron教程：https://jspang.com/detailed?id=62
Electron官方文档：https://www.electronjs.org/docs
ElectronAPI手册：https://www.electronjs.org/docs/api
点击查看【bilibili】
Electron开发手册 - 图6关注赞赏支持
需要掌握的三门语言JS,HTML,CSS

1.安装Vscode IDE

这个是写代码的工具,主要是免费,功能强大,外观也好看

官网下载：https://code.visualstudio.com/Download

（推荐下载压缩包）
解压后直接就能用，简单方便
image.png

扩展插件:

安装中文语言

image.png

皮肤主题（个人推荐）

搜索：escook-theme
image.png

代码自动排版

搜索：Prettier - Code formatter

注释翻译

image.png
搜索：Google Translate
快捷键Ctrl+Alt+t 翻译并替换

颜色标识括号

搜索：Bracket Pair Colorizer 2

Electron开发手册 - 图11

文本缩进着色
搜索：indent-rainbow

Electron开发手册 - 图12

vs code 终端中文显示乱码

image.png

Electron开发手册 - 图14

  1. chcp 65001

2.安装node.js

Electron是建立在nodejs框架上面进行开发。

1.官网：nodejs.org

安装包直接下载:
node-v12.13.0-x64.rar
image.png
路径可以设置D:\nodejs,这里打勾✔就行

node安装成功

  1. //打开VS终端输入
  2.  node -v
  3. //=> v12.13.0 我安装的node.js版本号，说明安装成功

image.pngimage.png
这里我安装在D:\nodejs，环境变量自动生成
image.png
如果没有就自己手动新建

npm安装命令

  1. //node自带npm命令,后面会大量使用npm命令来进行安装各种第三方模块
  2. npm install 模块
  3. //简写
  4. npm i 模块
  5. //全局安装
  6. npm i -g 模块
  9. //MAC系统全局安装需要获取管理员权限
  10. sudo npm i -g 模块

npm卸载命令

  1. npm uninstall 模块

常用功能:
npm install —save:
会把msbuild包安装到node_modules目录中L:
会在package.json的dependencies属性下添加msbuild
之后运行npm install命令时，会自动安装msbuild到node_modules目录中
之后运行npm install —production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中
npm install —save-dev:
会把msbuild包安装到node_modules目录中
会在package.json的devDependencies属性下添加msbuild
之后运行npm install命令时，会自动安装msbuild到node_modules目录中
之后运行npm install —production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中
通俗来说，—save是已经上线后的项目运行时必须要的东西；—save-dev是开发者在编辑项目时需要的东西；

package.json文件

  1. //初始化package.json文件
  2. npm init
  4. //package.json文件
  5. {
  6.   "script":{
  7.     "启动": "electron ."
  8.   }
  9. }
  10. //自定义脚本命令
  11. npm run 启动

win系统配置npm全局默认路径

如下图**移动到D:\nodejs建立2个目录node_global和**nodejs\node_cache

Electron开发手册 - 图19

每次重启电脑后使用npm都要重新设置!

  1. //然后运行以下2条命令
  2. npm config set prefix "D:\nodejs\node_global"
  3. npm config set cache "D:\nodejs\node_cache"
  6. npm config get prefix  查看目录路径
  7. //设置成功后使用 npm install -g 全局安装会把安装的文件放入D:\nodejs\node_global中,方便使用和卸载

编辑环境变量 NODE_PATH
D:\nodejs\node_global
image.png**

2.创建Electrion项目

快速搭建

https://github.com/PowerDos/serialport_electron_start/tree/master/demo/electron-quick-start

  1. # Clone this repository
  2. git clone https://github.com/electron/electron-quick-start
  3. # Go into the repository
  4. cd electron-quick-start
  5. # Install dependencies
  6. npm install
  7. # Run the app
  8. npm start

主程序：

创建一个文件夹，用VS打开文件夹，在文件夹中创建main.js文件
image.png

1.main.js

  1. //main.js内容
  2. console.log("人鱼情未了")

2.生成package.json配置文件

image.png

  1. //在VS终端输入命令，yes代表自动全部选择YES
  2. npm init --yes

3.下载Electron模块

image.png

  1. //首先安装cnpm,因为npm命令下载有时候是国外的链接,网速不行卡住就需要切换cnpm,设置淘宝镜像
  2. npm install -g cnpm --registry=https://registry.npm.taobao.org
  4. //MAC系统需要获取管理权限
  5. sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
  8. //Electron模块文件比较大,使用cnpm下载 --save:自动设置到package.json配置
  9. cnpm i electron --save

4.运行程序

image.png

  1. //package.json配置文件加入脚本命令
  2.   "scripts": {
  3.     "test": "echo \"Error: no test specified\" && exit 1",
  4.     "start":"electron ."
  5.   },

image.png

  1. //package.json脚本命令,start会在当前文件夹里找到electron.exe启动程序
  2. //运行
  3. npm start
  5. //如果electron使用 -g 全局安装,则可以直接使用electron .,但是不会在项目里下载node_modules文件夹
  6. //所以不建议新手使用该方法.
  7. cnpm i -g electron
  8. //运行
  9. electron .
  11. //CTRL+C 退出程序

**

官方窗口渲染（UI）:

下载解压electron-quick-start-master.zip
用VS打开这个文件夹
image.png

1.需要手动设置main.js里的参数,旧版本默认true,新版本默认false

  1.     //main.js
  2.     webPreferences: {
  3.       nodeIntegration:true  //设置true才能在其他文件里调用主进程的函数
  4.     }

2.下载Electron模块

image.png

  1. 方案一:
  2. //下载官方package.json配置文件里指定的electron@v8.2.1版本
  3. npm i
  5. 方案二:
  6. //更新至最新版
  7. cnpm install --save-dev electron@latest
  1. //运行
  2. npm start

启动成功:

image.png

手动渲染（UI）:

手动创建2个文件

1.main.js

  1. var electron = require('electron')  //引入electron模块
  3. var app = electron.app   // 创建electron引用
  5. var BrowserWindow = electron.BrowserWindow;  //创建窗口引用
  7. var mainWindow = null ;  //声明要打开的主窗口
  8. app.on('ready',()=>{
  9.     mainWindow = new BrowserWindow({
  10.         width:400,
  11.         height:400,
  12.         webPreferences:{nodeIntegration:true}  //设置别的页面可以调用函数
  13.     })   //设置打开的窗口大小
  15.     mainWindow.loadFile('index.html')  //加载那个页面
  17.     //监听关闭事件，把主窗口设置为null
  18.     mainWindow.on('closed',()=>{
  19.         mainWindow = null
  20.     })
  22. })

2.index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>我的程序名称</title>
  7. </head>
  8. <body>
  9.     Hello World!
  10. </body>
  11. </html>

3.生成package.json配置文件

  1. 操作与上面 主程序 一致

4.下载Electron模块

  1. 操作与上面 主程序 一致

渲染进程注意事项

创建多个子窗口属性

创建和控制浏览器窗口。
需要注意的是，在主进程和渲染进程调用的方式不一样
在主进程中直接调用：const {BrowserWindow} = require(‘electron’)
在渲染进程中则需使用remote来调用：const {BrowserWindow} = require(‘electron’).remote
参考：https://www.jianshu.com/p/95bf81f84a53
image.png
image.png

鼠标跟随事件

使用

问题解决:iframe传参到新窗口的坑

1.父窗口有三个iframe,分别为a,b,c
image.png
2.从a打开了放大镜,创建新窗口,如何把c的监控鼠标移动数据传输到a的新窗口上?

  1. //父窗口 index.html
  2. <iframe src="a.html"></iframe>
  3. <iframe src="b.html"></iframe>
  4. <iframe src="c.html"></iframe>
  6. <script>
  7.   //a.html使用的函数,创建新窗口
  8.   function fangdajing() {
  9.   window.open('a2.html')
  10. }
  11. window.addEventListener('message', function (msg) {  //监听
  12.   //监听成功开始监控 c.html 鼠标是否移动
  13.   frames['c'].contentWindow.document.addEventListener('mousemove', function (e) {
  14.     //e是c.html返回的对象数据
  15.     msg.source.postMessage("(X:" + e.clientX + ",Y:" + e.clientY + ")", "*");
  16.   })
  17. </script>
  20. //子窗口 a.html
  21.     <div id='fangdajing'>放大镜</div>
  23.     //监听点击事件调用父窗口函数创建新窗口 a2.html
  24.     <script>
  25.       document.getElementById('fangdajing').addEventListener('click', function (e) {
  26.       window.parent.fangdajing()
  27.     })
  28.     </script>
  30. //子窗口 a2.html
  31.     <div id="子窗口"></div>
  33.     <script>
  34.       window.opener.postMessage('') //打开窗口直接发送数据与父窗口连接
  36.     //不断的监听父窗口返回 c.html 的鼠标移动信息并显示在页面上
  37.     window.addEventListener('message', function (msg) {
  38.       document.getElementById("子窗口").innerHTML = JSON.stringify(msg.data)  //接收父窗口发送过来得数据
  39.     })
  40.     </script>

3.效果 移动鼠标.gif (7.69MB)

window.open()

百度上的例子都无法在electron里使用.这里只能使用接收和发送数据的方式来使用
iframe **与** window.open() **在 Electron里的区别:
window.parent 等于 窗口.返回父窗口
Electron里使用 window.open() 创建的子窗口不能使用 window.parent 调用父窗口变量和方法
Electron里使用