学习目标
从0搭建一个Hello world级别的桌面客户端应用程序
先说说Electron是什么？
- 基于 Chromium(谷歌浏览器) 和 Node.js
- 用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库, 说白来就是使用web前端技术来开发桌面客户端
- Electron本质上是一个 Node.js 应用程序, 这意味这我们基于electron开发桌面客户端和我们写正常的node项目是一样
- 兼容 Mac、Windows 和 Linux，可以很轻松的构建出三个平台的应用程序
- 对于前端工程师来说0门槛就可快速上手
废话不多话, 让我们一起搭建一个简单的Electron项目吧
- 初始化项目, 和我们初始化node项目是一摸一样的
npm init // 会生成package.json
- 修改package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ." // 重点是修改这句, node项目中我们使用node . 这个把node替换成electron
}
}
- 安装electron模块
cnpm i -S electron
- 编写我们的程序入口文件: main.js
//main.js, 创建窗口等所有系统事件都要在这里处理
// electron模块所提供的功能都是通过命名空间暴露出来的
// electron.app负责管理electron应用程序的生命周期
// electron.BrowserWindow负责创建窗口
const { app, BrowserWindow } = require('electron');
// 保持window对象的全局引用, 如果不这么做, 当javascript对象被垃圾回收的时候, window对象将自动关闭
let win;
function createWindow(){
// 创建浏览器窗口
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 加载index.html文件, 也就是界面显示哪些内容
win.loadFile('index.html');
// 打开开发者调试工具
win.webContents.openDevTools();
// 当window被关闭, 这个事件会被出触发
win.on('closed', ()=>{
// 取消引用window对象, 如果应用程序支持多个窗口的话, 通常会把多个window对象存放到一个数组中
// 关闭, 删除相应的元素
win = null;
});
}
//electron会在初始化后并准备创建浏览器窗口时调用这个函数, 部分api在ready事件触发后才能使用
app.on('ready', createWindow);
//当全部窗口关闭时退出
app.on('window-all-closed', ()=>{
if(process.platform !== 'darwin'){
app.quit();
}
});
app.on('activate', ()=>{
if(win === null){
createWindow();
}
});
// 在这个文件中, 可以继续编写剩余的主进程代码
// 也可以拆分成几个文件, 然后用require导入
- 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron</title>
</head>
<body>
hello electron
</body>
</html>
- 项目已经搭建完毕, 让我们运行一下看看效果吧
npm start
image.png
看到这个页面, 恭喜你已经成功编写来一个桌面客户端程序, 是不是很简单！！！
