前言
electron是一个可以利用 JavaScript HTML CSS 等技术构建原生程序的框架，也就是说，利用electron可以让我们使用web技术来开发桌面应用。electron的GUI核心来自于Chrome，使用V8（JavaScript引擎），本身是基于C++编写的。市面上很多的程序，都是用electron开发的，例如：vscode atom 等。
electron一个很大的特点就是跨平台。electron兼容Windows，Linux以及Mac平台，利用electron开发的程序可以在这几个平台上运行。electron基于chromium，nodejs，这就让你可以用HTML CSS JavaScript构建应用。并且还是开源的，拥有活跃的社区来维护项目。
讲了这么多，现在就让我们来构建第一个属于自己的electron程序吧！
准备
使用electron前，你需要安装nodejs。在终端输入以下命令，来检查nodejs是否安装 :
node -v
npm -v
如果终端返回了相对应的nodejs与npm的版本信息，那么恭喜你，你可以进行下一步了；如果没有返回，那么你则需要安装nodejs与npm，然后重新输入命令检查，再进行下一步。
安装Electron
你可以创建一个名为"electron-app"的文件夹，然后打开它，并在这个文件夹当中执行终端。输入以下命令：
npm init -y
npm i --save-dev electron
Electron的基本目录结构
electron-app/
├── package.json
├── main.js
└── index.html
我们可以通过上面的结构，分别将 package.json main.js index.html 创建出来。
创建main.js
在electron-app目录下创建 main.js 文件（main.js是electron的主脚本文件，它指定了运行主进程electron程序的入口，在electron程序中，只能有一个 main.js 文件），你可以在 main.js 中输入以下代码：
constelectron=require('electron')//导入模块
constBrowserWindow=electron.BrowserWindow
constMenu=electron.Menu
constapp=electron.app
functioncreateWindow() {
constwin=newBrowserWindow({
width:414,//定义窗口行高
height:700,
webPreferences: {
nodeIntegration:true
}
})
win.loadFile('index.html')//将index.html导入窗口
}
app.whenReady().then(createWindow)//创建窗口
//侦听器
app.on('window-all-closed', ()=>{
if(process.platform!=='darwin') {
app.quit()
}
})
app.on('activate', ()=>{
if(BrowserWindow.getAllWindows().length===0) {
createWindow()
}
})
创建index.html
我们在 main.js 文件当中，将 index.html 文件加载到了窗口当中，那么index.html文件就是窗口的内容了
index.html 文件可以这样写：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Hello World!</title>
<metahttp-equiv="Content-Security-Policy"content="script-src 'self' 'unsafe-inline';"/>
</head>
<bodystyle="background: white;">
<h1>Hello World!</h1>
<p>
这是我的第一个electron程序！
</p>
</body>
</html>
修改package.json
编辑 package.json ，改为下面内容:
{
"name":"electron-app",
"version":"0.1.0",
"author":"name",
"description":"Electron app",
"main":"main.js",
"scripts": {
"start":"electron ."
}
}
运行程序
就这样，你的第一个electron程序已经编写好了，输入下面的命令来运行它吧：
npm start
运行成功:
打包程序
1.导入 Electron Forge
在终端输入下面的命令：
npx @electron-forge/cli import
2.创建分发版本
在终端输入以下命令：
npm run make
我们的第一个electron程序就被打包在out目录下了
网友评论