Electron之Hello world（一）
1. Electron简介
Electron 是由Github开发，以Node.js为基本开发环境，以Chromium 为浏览器，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。
简言之，Electron是一个以网页为交互的桌面图形用户界面（GUI）开源库。也是说可以帮助我们开发多款以网页为页面的桌面应用程序。比如像桌面版的网易云音乐，编译器、小工具，小游戏等。
Electron官网：https://www.electronjs.org
Electron Github: https://github.com/electron
Electron文档：https://www.electronjs.org/docs
2. Electron应用
用lectron开发的应用有：VS Code客户端、GitHub客户端、Atom客户端等等。
Electron应用：https://www.electronjs.org/apps
3. Electron vs NW.js
NW.js是基于Chromium和的应用程序运行时node.js。您可以使用NW.js用HTML和JavaScript编写本机应用程序。它还使您可以直接从DOM调用Node.js模块，并启用一种使用所有Web技术编写本机应用程序的新方式。
NW.js官网：https://nwjs.io/
特点：
（1）以网络最流行的技术编写原生应用程序的新方法
（2）基于HTML5, CSS3, JS and WebGL而编写
（3）完全支持nodejs所有api及第三方模块
（4）可以使用DOM直接调用nodejs模块
（5）容易打包和分发
（6）支持运行环境包括32位和64位的Window、Linux和Mac OS
NW.js和Electron基本类似，但是Electron生态比较好一点，应用广泛，有专业的团队在维护，文档等这些比较全面，虽然NW.js和Electron都支持桌面程序，但缺点就是打包文件打，没有原生的程序效率高。
推荐书籍
百度云盘：https://pan.baidu.com/s/1xqoPWBTHTCQZOaAZMiAbzg
链接密码：95yr
4. Electron Hello world应用程序
4.1 环境安装
安装node.js，参考：https://blog.csdn.net/antma/article/details/86104068
4.2 编译器选择
官方推荐使用 Atom 或者 Visual Studio Code开发Electron，但本人作为后端人员偏向IDEA Webstrom,所以接下来开发几乎都用IDEA Webstrom 。
4.3 安装electron
1、在webstormworkplace中，新建Electrom-demo,作为Electrom学习所有的案例的集合
2、打开Windows power Shell,查看node和npm的版本
# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -v
3、安装electron过程
cd E:\webstormworkplace\Electron-demo
#安装 electron
npm install --save-dev electron
出现错误：原因是我开了代理（翻墙），因此关闭代理（翻墙）
再次执行npm install --save-dev electron，成功慢慢下载，但太慢了
安装失败和速度解决方式：
1.如果通过 npm 安装失败，您可以尝试直接从 electron/electron/releases 直接下载 Electron。
2.在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:
npm install --verbose electron
3.如果上述错误仍然存在, 则可能需要将参数 unsafe-perm 设置为 true
sudo npm install electron --unsafe-perm=true
4.代理安装
对此，我还是选择手动下载去https://github.com/electron/electron/releases 直接下载 Electron
那么选择那个版本下载呢，肯定是稳定版本，那么到底是哪个稳定版本呢，从刚才的截图可以得知
下载：electron-v8.2.1-win32-x64.zip
没有开代理，速度仍然很慢，所以我还是去弄代理下载了......，没有代理只能慢慢等
下载完成，下面的警告表示你没有初始化node.js项目，等下弄就可以。
4.4 electron的简单使用
1、新建目录lession1,把文件放进去
2、初始化node.js项目转化为electron项目
cd Electron-demo\lession1
#初始化node.js项目
npm init
#只填写入口文件
entry point: (index.js) main.js
一直回车默认
lession1/package.json,生成的package.json有electron的版本
{
"name": "lession1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^8.2.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
在scripts脚本中，添加
"start": "electron ."
此时的lession1/package.json
{
"name": "lession1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^8.2.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC"
}
3、创建lession1/main.js以及index.html
main.js
//引用 electron的API
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
//启动打开窗口
app.whenReady().then(createWindow)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello
</body>
</html>
4、启动Electron程序，需要等待几十秒
#进入目录
cd lession1
#启动
npm start
5、效果
4.5 electrom 的简单改造
对原来的electrom案例进行改造，添加一些信息显示
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
node 版本： <script>document.write(process.versions.node)</script>,
Chrome 版本： <script>document.write(process.versions.chrome)</script>,
Electron 版本：<script>document.write(process.versions.electron)</script>.
</body>
</html>
启动：
#进入目录
cd lession1
#启动
npm start
效果：显示版本和打开开发者工具
