Electron快速上手

Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入?Chromium?和?Node.js?到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

官方网站：Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

官方教程：创建您的第一个应用程序 | Electron

打包简单的html/css/javascript项目

1.首先需要把当前项目交给npm管理，已经是npm项目就不用管！

npm init

2.修改项目的package.json文件

{
  "name": "你的应用名称",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js", //1.修改入口文件
  "scripts": {
    "start": "electron .", //2.添加运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT"
}

3.在项目中运行以下命令安装electron

npm install electron --save-dev

4.1创建main.js入口文件，添加以下内容（最简单入口文件）

const { app, BrowserWindow } = require('electron/main')
?
const createWindow = () => {
 ?const win = new BrowserWindow({
 ? ?width: 800,
 ? ?height: 600
  })
?
 ?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()
  }
})

4.2创建main.js入口文件，添加以下内容（支持设备访问的入口文件）

const { app, BrowserWindow } = require('electron/main')
?
function createWindow () {
 ?const mainWindow = new BrowserWindow({
 ? ? width:1920,
 ? ? height:1080,
  })
?
 ?mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
 ? ?// Add events to handle devices being added or removed before the callback on
 ? ?// `select-hid-device` is called.
 ? ?mainWindow.webContents.session.on('hid-device-added', (event, device) => {
 ? ? ?console.log('hid-device-added FIRED WITH', device)
 ? ? ?// Optionally update details.deviceList
 ?  })
?
 ? ?mainWindow.webContents.session.on('hid-device-removed', (event, device) => {
 ? ? ?console.log('hid-device-removed FIRED WITH', device)
 ? ? ?// Optionally update details.deviceList
 ?  })
?
 ? ?event.preventDefault()
 ? ?if (details.deviceList && details.deviceList.length > 0) {
 ? ? ?callback(details.deviceList[0].deviceId)
 ?  }
  })
?
 ?mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
 ? ?if (permission === 'hid' && details.securityOrigin === 'file:///') {
 ? ? ?return true
 ?  }
  })
?
 ?mainWindow.webContents.session.setDevicePermissionHandler((details) => {
 ? ?if (details.deviceType === 'hid' && details.origin === 'file://') {
 ? ? ?return true
 ?  }
  })
?
 ?mainWindow.loadFile('index.html')
}
?
app.whenReady().then(() => {
 ?createWindow()
?
 ?app.on('activate', function () {
 ? ?if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
?
app.on('window-all-closed', function () {
 ?if (process.platform !== 'darwin') app.quit()
})

5.启动Electron

npm start

6.在项目中安装Electron Forge，是一个处理 Electron 应用程序打包与分发的一体化工具

官方教程：打包您的应用程序 | Electron

npm install --save-dev @electron-forge/cli

7..在package.json文件中的script中添加以下内容

//...
"scripts": {
 ?"package": "electron-forge package",
 ?"make": "electron-forge make"
},
//...

8.制作一个x64架构、win64平台的软件

制作别的别的架构、别的平台的配置见：CLI - Electron Forge

npm start make ----arch x64 --platform win64

9.打包成windows系统可执行文件

npm run package

10.打包完成会在当前目录下生成一个out目录，可以打开对应的.exe文件

打包Vue项目

由于Vue打包教程过多，自行查看b站的教程视频electron打包vue项目为windows桌面端_哔哩哔哩_bilibili流程文档地址https://gitee.com/zqylzcwcxy/variable-generation-tool, 视频播放量 28809、弹幕量 5、点赞数 290、投硬币枚数 138、收藏人数 888、转发人数 82, 视频作者 没人可以拒绝喵喵王, 作者简介 人民万岁，共产主义万岁，相关视频：基于Vue+Electron快速开发桌面(PC)程序教程，【Electron】用Electron写桌面端程序，使用electron打包桌面客户端，【Electron + Vue3 音乐播放器】花几分钟学习一下，Less Player源码的“打开方式”，如何打包Vue项目生成APP教程，做自己的APP！会简单前端就可以很容易打包生成安卓APP应用程序 采用DCloud云打包技术，使用electron打包软件，electron打包若依，打包成exe文件，electron-vue3开发桌面应用，web网站想打包成exe怎么办？这个简单的方法教你生成免安装的exe可执行程序https://www.bilibili.com/video/BV1bQ4y1m79z