Electron框架使用入门
Electron框架使用入门
Electron是一个跨平台的桌面应用开发框架，可以让我们用html css js的技术开发跨平台桌面上可以安装的软件。因为Electron使用JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识，Electron 使用 web 页面作为它的 GUI，因此需要你还应掌握Html和SS教程。electron背后是node解释器和chromium浏览器内核，因此体积大。
Electron官网
Electron 文档
http://www.electronjs.org/docs
开发环境的搭建
你可以使用原生的Node.js开发环境来开发Electron应用。 为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。
Windows 开发环境配置
Electron 支持Windows 7 及以上版本。
首先，安装最新版本的Node.js 。 我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。 访问Node.js下载页面，选择Windows Installer。 下载完成后， 执行安装程序，根据引导完成安装即可。
关于如何安装参见
Node.js 新手入门https://blog.csdn.net/cnds123/article/details/104559497
安装完成后，我们需要来确认Node.js是不是可以正常工作。 点击 开始 按钮，输入PowerShell，找到Windows PowerShell。 打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：
下面这行的命令会打印出Node.js的版本信息
node -v
下面这行的命令会打印出npm的版本信息
npm -v
参见下图：
上述命令均打印出一个版本号，就说明Node.js已经安装好了！
Electron 应用的建立
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：
your-app/
├── package.json
├── main.js
└── index.html
为你的Electron应用创建一个文件夹（目录）。我这里是在D:盘建立一个目录D:\My_electron_app。
在此目录下建立三个文件package.json、main.js、 index.html。
1）package.json文件内容如下：
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
2）main.js文件内容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
3）index.html文件内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
使用CMD的cd命令进入进入指定目录D:\My_electron_app目录
cd /d D:\My_electron_app ，参见下图：
现在，安装electron。请保持联网，在您的app所在目录下运行下面的命令：
npm install --save-dev electron
提示“在运行npm install --save-dev electron之前，建议先用下面命令设置electron 镜像源地址：
npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/
再运行
npm install --save-dev electron
将快的多，参见下图：
【其中的警告信息是由package.json文件少了几项非关键造成的，可忽略之。】
完成后，此项目目录结构如下图：
至此，可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了：
请将上面的main.js文件改成下面这样：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持**。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
再执行 npm start 命令试试。