Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
这是Electron官网https://www.electronjs.org/上对Electron的介绍。
本系列的源码地址:https://gitcode.net/leqi/electronapp
今天,我们就开始学习Electron。按照惯例,一切从“Hello,World!”开始吧。通过这个教程,你的app将会打开一个浏览器窗口,来展示“你好,Electron!”。
在使用Electron进行开发之前,您需要安装 Node.js。 我们建议您使用最新的LTS版本。
Nodejs可以在这里下载Nodejs官网。
要检查 Node.js 是否正确安装,请在您的终端输入以下命令:
node -v
npm -v
Visual Studio Code(文章后面会直接简称为Code)是一款开源的,在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择,包含大量扩展,几乎支持任何编程语言。你可以在Visual Studio Code官网下载到最新版的Code。
1.在电脑上新建一个名为electronapp的文件夹,然后在Code中打开此文件夹。
2.在Code中使用快捷键Ctrl+`(反引号)
打开Terminal(终端)。
输入命令
npm init -y
-y
参数表示项目使用默认的配置参数。
此时会在根目录下创建一个名为package.json的文件,内容与终端中显示的一致。
3.安装Electron
npm install --save-dev electron
4.修改package.json文件,在scripts
字段下增加一条start
命令:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
}
start
命令能让你在开发模式下打开你的应用。
5.创建main.js
首先,修改package.json的main
字段
"main": "main.js",
然后在根目录下新建一个main.js文件,并写入如下代码:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
6.新建index.html文件,并写入如下代码:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron应用title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
head>
<body>
<h1>你好,Electron!h1>
<p>
这是我的第一个Electron应用。
p>
body>
html>
最后你的Code看起来是这样子的:
package.json
中devDependencies
字段中显示了Electron的版本号。当然,你安装的版本可能与笔者的有出入,以你本机安装的版本为准,无需手动修改。
7.运行你的第一个Electron应用
打开终端输入命令,Electron应用将会被启动
npm start
1.安装electron-packager
npm install --save-dev electron-packager
2.打包应用
npx electron-packager .
该命令的完整形式如下:
npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
具体可参考GitHub - electron/electron-packager: Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
命令执行完后会在你的根目录下多出一个名为electronapp-win32-x64的文件夹。
双击electronapp.exe
即可运行应用程序。