Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
Electron能帮助您快速创建 在Windows、macOS和Linux上运行的跨平台应用
本文章参照官方所写,详细请看官方文档:Electron官方文档
系统要求:Windows8.1(即以上)
1.安装node.js
首先要下载并安装 node.js :Download Node.js®
安装完成后输入
node -v
安装完成后,在国内为了更快的安装Electron推荐切换国内源
npm config set registry https://registry.npm.taobao.org
其源会写入配置文件.npmrc里
2.安装Electron框架
npm install --save-dev electron -g
这是正常的安装方法,然而在国内,总会遇到网络问题,如果安装失败的话,这里可以采用以下方法
安装cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装报错,请更新一下npm
npm install -g npm@10.2.4
以上步骤完成后,现在开始安装Electron框架,如果是windows系统,在powershell使用cnpm会报错,在cmd中使用没问题
cnpm install electron -g
设置Electron国内源
npm config set registry=https://registry.npmmirror.com
npm config set disturl=https://registry.npmmirror.com/-/binary/node
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
npm config set electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
如果设置失败找到.npmrc文件,并增加(如果有存在就不增加)
.npmrc文件在用户目录下(在资源管理器中输入%USERPROFILE%即刻到达用户文件夹)
registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
3.创建项目
这里我们先创建node.js项目(自己创建文件夹)
npm init
根据提示创建package.json文件(也可以直接全部Enther,后续在改)
创建index.js、electron-builder.yml
设置package.json文件
{
"name": "这里填项目名称",
"version": "这里填项目版本号",
"description": "项目描述",
"productName": "这里填打包名称",
"main": "index.js",
"scripts": {
"start": "electron .",
"win-dist1": "electron-builder --win --x64"
},
"author": "me",
"license": "ISC"
}
然后在项目文件夹下执行
cnpm install electron --save-dev
cnpm install electron-builder --save-dev
在index.js写入如下代码
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('node:path')
const gotTheLock = app.requestSingleInstanceLock()
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1220,
height: 720,
title: "设置窗口标题",
icon: path.join(__dirname, '设置网站图标路径'),
webPreferences: {
webSecurity: false
}
})
//隐藏顶部菜单
Menu.setApplicationMenu(null)
//设置网站url
//例如mainWindow.loadURL("https://sober-up.cn/")
mainWindow.loadURL("设置网页地址")
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
if (!gotTheLock) {
app.quit()
} else {
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
}
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
在electron-builder.yml写入如下代码
appId: 这里填应用名称
productName: 这里填安装后显示的标题
directories:
output: './dist'
buildResources: 'build'
app: './'
win:
icon: '这里填图标路径'
mac:
icon: '这里填图标路径'
linux:
icon: '这里填图标路径'
nsis:
oneClick: false
allowToChangeInstallationDirectory: true
请根据注释修改内容
4.打包项目
在项目目录里输入查看是否运行成功
npm run start
确认成功后,在项目目录里输入进行编译exe
npm run win-dist1
执行完成后你就能在dist目录下找到编译好的文件
如果编译卡死,重新设置一下镜像源
结尾
以上就是作者制作Windows应用最简单的方法,如有不对请在评论区指出