开篇寄语
前些天，伯衡君介绍了如何通过Flutter打造全系统应用，并分享了如何创建用Flutter打造的app，具体可以参看下方的前情提要，但是，对于桌面级应用，Flutter以目前的程度来说还不是很完善，很多丰富多彩的库在手机上运行良好，但是在桌面级上就不能使用了，而这次伯衡君为大家分享如何通过Electron，只要会html，css和html就能快速打造你人生第一个桌面级应用哦，分享给大家。
前情提要
官方网站
内容详情
要使用electrojs，首先是在本机上安装nodejs，nodejs的官方网址是https://nodejs.org/，无论是下载LTS版还是Current版，都是可以的，下载安装就可以。
如何验证安装是否成功？只需要在terminal（Mac或者Linux），cmd（Windows），分别输入以下两个代码：
node -v npm -v
如果看到有版本号出现，就说明安装成功了。
之后就是安装Electrojs，输入以下代码：
mkdir my-electron-app && cd my-electron-app npm init -y npm i --save-dev electron
之后就会在硬盘中创建并打开一个my-electron-app，从vs code中打开，就会看到一个package.json，此时，就要创建你的第一个应用啦，新建一个名为main.js的文件，然后输入以下代码：
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
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()
}
})
创建html文件，创建一个名为index.html的文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
</body>
</html>
创建另一个js文件，preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
编辑之前说的package.json：
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
然后，在terminal安装最新的electron。
npm install electron@latest
安装完成后，继续输入：
npm start
就会看到出现了程序启动的调试结果，如下图所示：
接下来是打包程序，就可以可以生成Windows，MacOS和Linux的app啦。
npm install --save-dev @electron-forge/cli npx electron-forge import
接下来是这样：
npm run make
随后，就会看到在my-electron-app生成的三种系统的文件。
解压缩出来就是各种软件了。
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-
