前言
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
Electron能帮助您快速创建 在Windows、macOS和Linux上运行的跨平台应用
本文章参照官方所写,详细请看官方文档:Electron官方文档
系统要求:Windows8.1(即以上)
安装node.js
首先要下载并安装 node.js :Download Node.js®
安装完成后输入
node -v //出现版本号就算安装成功
在国内为了更快的安装推荐切换国内源
npm config set registry https://registry.npm.taobao.org
其源会写入配置文件.npmrc里
安装Electron框架
npm install --save-dev 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/
这是正常的安装方法,但是由于网络问题,容易在安装时卡死,如果上述方法安装失败请看下面的方法
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org //安装完成后输入cnpm -v验证是否安装成功
如果安装报错,请更新一下npm
npm install -g npm@10.2.4
如果是windows系统,在powershell使用cnpm会报错,在cmd中使用没问题
然后在安装Electron框架
cnpm install electron -g
然后在安装electron-builder框架
cnpm install electron-builder -g
在尝试上面的步骤,设置国内源(如果网络不卡的话不用设置),如果设置失败找到.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/
创建项目
这里我们先创建node.js项目(自己创建文件夹)
npm init
根据提示创建package.json文件(也可以直接全部Enther,后续在改)
创建index.js、electron-builder.yml
编写代码
package.json
设置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
在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
在electron-builder.yml写入如下代码
appId: 这里填应用名称 productName: 这里填安装后显示的标题 directories: output: './dist' buildResources: 'build' app: './' win: icon: '这里填图标路径' mac: icon: '这里填图标路径' linux: icon: '这里填图标路径' nsis: oneClick: false allowToChangeInstallationDirectory: true
打包项目
在项目目录里输入查看是否运行成功
npm run start
在项目目录里输入进行编译exe
npm run win-dist1
执行完成后你就能在dist目录下找到编译好的文件
如果编译卡死,重新设置一下镜像源
结尾
以上就是作者制作Windows应用最简单的方法,如有不对请在评论区指出