一.什么是electron?
官方文档： https://www.electronjs.org/docs
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
Electron = Chromium + nodejs
简而言之， electron是前端构建应用程序的一款框架， 对前端开发者十分友好，使用常用的前端技术（html, js, nodejs,angular/react/vue）就可以创建一个应用程序。
优势：
1) Easy: 把web页面打包成一个桌面应用程序
2) 使用web技术：html+css+js, angular等框架开发出一些流畅度更高的应用
3) 单页面应用程序， 使用electron打包成桌面应用程序
4) 开源，由github开发
5) 跨平台性： 一套代码就能打包到三个平台，只要编写web常用的项目，构建好就能输出平台mac+windowns+linux
6）流行度高：https://www.electronjs.org/apps
7）应用场景： 前端开发必备的VS code, atom都是electron开发的
以下是发布版本时间线， 目前最新版本为8.2.3
electron version timeline
二.快速构建一个electron应用
Step1: 开发环境：node v10.15.3, npm 6.4.1
Step2: 初始化项目 npm init -y
Step3: 安装依赖包
npm i electron
tips: 由于npm的服务器位于国外可能会影响安装。我们可以使用淘宝团队做的国内镜像，淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
npm install -g cnpm registry=https://registry.npm.taobao.org //使用cnpm进行安装，使用方法和npm相同
cnpm install -g electron
Step4:
1) 创建以下目录结构
index.js ：主入口
package.json: 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
html：html,css
File Director Structure
index.js
// import electron instance
constelectron=require('electron');
const{app,BrowserWindow}=electron;
constpath=require('path');
consturl=require('url');
letwin=null;
// listen
app.on('ready',()=>{
//create window
win=newBrowserWindow({
height:600,
width:600
});
// win.loadURL('https://www.baidu.com');
win.loadURL(url.format({
pathname:path.resolve(__dirname,'./html/main.html'),
proctocal:'file',
slashes:true
}));
})
package.json
{
"name":"electron-demo",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts": {
"test":"echo\"Error: no test specified\"&& exit 1",
"start":"electron ."
},
"keywords": [],
"author":"",
"license":"ISC",
"devDependencies": {
"electron":"^8.2.1",
"electron-packager":"^14.2.1"
}
}
html/main.html
<html>
<head>
<title>INFO</title>
<metacharset="utf-8">
<linkrel="stylesheet"type="text/css"href="./css/basic.css">
<linkrel="stylesheet"type="text/css"href="./css/electron.css">
</head>
<body>
<nav>
<divclass="nav-wrapper">
<ahref="#"class="brand-logo">信息列表</a>
</div>>
</nav>
<ulclass="collection">
<liclass="collection-item">信息列表项001<iclass="close-btn">x</i></li>
<liclass="collection-item">信息列表项002<iclass="close-btn">x</i></li>
<liclass="collection-item">信息列表项003<iclass="close-btn">x</i></li>
</ul>
<h3class="space-section">暂无信息，请添加信息</h3>
</body>
</html>
Step5: 执行应用程序
npm start
网友评论