The bosses had a sudden idea to package an existing management backend system into a desktop installable application. At that time, two solutions came to my mind, Electron or Flutter's Webview to package the application. Relatively speaking, if I am familiar with Electron, I would give priority. I considered using Electron, and of course later I also used Flutter to implement a version. The effect was not much different. Let’s first take a look at how Electron implemented it.
Preparation
Initialization project
Create a new project folder electron-app. Remember to switch the path to the electron-app directory in the command line window and execute the initialization command.
shell复制代码npm init -y
The latest file structure should be as follows, with an additional package.json file.
markdown复制代码- electron-app
- package.json
Open package.json with an editor
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Pay special attention to the "main" configuration inside. This configuration points to the entry of the project. The corresponding file currently is index.js, but it does not exist in our project yet, so create a new one.
markdown复制代码- electron-app
- index.js
- package.json
Fill in the index.js file with the following contents:
js复制代码// index.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
})
// 全屏
win.maximize()
// 载入网页链接
win.loadURL('https://www.jd.com/')
}
// 应用程序准备好后加载窗口
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
In the above code, we only need to pay attention to the content in createWindow. The createWindow method uses BrowserWindow to create an application window and load a web link (JD homepage). Normally, we should see a JD desktop after starting the program. Applied.
Install dependencies on electron and @electron-forge/cli
css复制代码npm install --save-dev electron @electron-forge/cli
After the installation is complete, continue to modify the scripts configuration in package.json, delete the original content, and add a start configuration. The electron-forge start command can only be used after @electron-forge/cli is installed, similar to @vue/cli
json复制代码"scripts": {
"start": "electron-forge start"
},
start up
shell复制代码npm run start
You're done. Congratulations, you have learned to develop desktop applications. You only need to replace the link of win.loadURL('https://www.jd.com/') with the link you want.
Although the project is running, we still have several problems to solve.
- The icon in the upper left corner of the project is wrong
- How to package it into an exe installation package?
Modify ICON
The icon needs to be divided into two parts. One is the icon in the upper left corner of the open window, and the other is the icon installed on the desktop. We will talk about the installed icon later. Let’s modify the upper left corner first.
It's very simple, just modify the icon configuration of BrowserWindow.
js复制代码// index.js
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
// 左上角的图标
icon: './images/logo.png',
})
Don’t forget to create a new images folder in the root directory and put a picture named logo.png.
Package exe installation package
We use the electron-builder tool package to create the exe installation package. The installation command is as follows.
css复制代码npm install --save-dev electron-builder
Modify package.json and add a scripts command and build configuration.
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron-forge start",
"build": "electron-builder --win" // 打包命令
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^6.2.1",
"electron": "^25.4.0",
"electron-builder": "^24.6.3"
},
// `electron-builder`配置
"build": {
"productName": "我的应用", // 安装应用后桌面名称
"directories": {
"output": "out" // 输出的文件目录
},
"win": {
"icon": "./ico/logo.ico", // 安装的图标
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "我的应用"
}
}
}
Note that json files cannot have comments. Remember to remove the comments after copying the above text.
All the icons above point to a file ./ico/logo.ico. The ico icon is actually a collection of pictures in different formats, used for adaptation under different screen sizes. Of course, we will not expand on it here. We first get a logo.ico file to implement an installable package.
You can use the Baidu keyword "convert png to ico" and a bunch of online conversion websites will appear. I use [Convertio - File Converter](https://convertio.co/zh/) and throw away the logo.png Enter it to convert it into a logo.ico file. After downloading the file, remember to put it in the ico directory.
Start packing
arduino复制代码npm run build
After completion, view the out directory
Welcome to discuss more uses of electron.