Electron快速上手

Electron

目录

简介

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

打包Vue2项目

打包Vue3项目


简介

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文件,main表示入口文件,scripts中的start表示electron的运行脚本,packagerConfig中的name和icon分别表示应用名称和应用图标所在位置(./icon.ico表示在项目当前目录下有一个icon.ico的图标文件)

PNG转ICO格式网站:https://www.aconvert.com/cn/icon/png-to-ico/,转换成256x256尺寸,小了用不了。

config.forge具体有那些配置项见:Overview - Electron Forge

{"name": "你的项目名称","version": "1.0.0","description": "Hello World!","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"author": "Jane Doe","license": "MIT","config": {"forge": {"packagerConfig": {"name": "你的应用名称","icon": "./icon.ico"}}}  
}

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.setMenu(null);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文件

打包Vue2项目

1.创建Vue2项目,选择vue2版本进行创建,已有vue2则不用创建(package.json文件的script中没有"serve": "vue-cli-service serve"和 "build": "vue-cli-service build"的用不了)

#安装vue-cli
npm install -g @vue/cli
#如果想卸载之前版本
npm uninstall vue-cli -g
vue create vue2_project

2.添加electron-builder打包工具

配置electron镜像地址

npm config set registry http://registry.npm.taobao.org/
npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"
npm config set electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"
vue add electron-builder

3.项目中如果设置跨域proxy,需要去除,且页面中axios需要使用完全路径

module.exports = {// 开发环境时使用proxy,生产环境即electron打包需要注释掉proxy// 同时页面中axios使用完全路径// devServer: {//   proxy: {//     "/api": {//       target: "http://localhost:8080/api",//       changeOrigin: true,//       rewrite: path => path.replace(/^\/api/, "")//     }//   }// }
}

4.进行打包

npm run electron:build

5.electron-builder打包后跨域访问失效问题的解决

  1. 修改axios的请求地址为完整url地址

  2. vue.config.js中不使用proxy

  3. electron主启动类(目前是background.ts)中关闭web权限检查

async function createWindow() {const win = new BrowserWindow({...webPreferences: {...//关闭web权限检查,允许跨域webSecurity: false}})
}

6.设置应用图标

需要256*256,格式为ico,注意,不能采用直接修改后缀名的方式,需要使用专门的网站转换

vue.config.js中设置

module.exports = {pluginOptions: {electronBuilder: {builderOptions: {win: {icon: 'src/assets/logo.ico'}}}}
}

7.打包完成后会在项目目录中生成一个dist_electron目录,里面就是打包好的文件

打包Vue3项目

1.创建Vue3项目,已有则不用创建

npm create vue@latest

2.安装打包工具,依次安装!

npm i electron -D --force #electron核心模块
npm i electron-builder -D --force #打包工具
npm i concurrently -D --force  #热加载
npm i wait-on -D --force #热加载

3.编写electron配置文件,在项目根目录下创建一个electron目录用于保存electron配置文件,在electron目录中创建electron的入口文件main.js文件与preload.js 文件

main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 1300,height: 800,webPreferences: {preload: path.join(__dirname, 'preload.js')}})if (!app.isPackaged) {mainWindow.loadURL("http://localhost:8888/");} else {mainWindow.loadFile("./dist/index.html");}// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。

preload.js

// All the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

4.修改package.json,把type配置项删除,添加main配置项并设置为electron的入口文件,start用于启动electron项目端口号跟vite.config.js配置保持一致,exe-dev用于热更新适用于开发阶段,exe-build用于打包可执行文件

{"name": "vue-project","version": "0.0.0","private": true,"main": "electron/main.js","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","start": "wait-on tcp:8888 && electron .","exe-dev": "concurrently -k \"npm run dev\" \"npm run start\"","exe-build": "vite build & electron-builder --config electron.config.json"},"dependencies": {"vue": "^3.3.11","vue-router": "^4.2.5"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.2","concurrently": "^8.2.2","electron": "^28.1.1","electron-builder": "^24.9.1","vite": "^5.0.10","wait-on": "^7.2.0"}
}

5.修改vite.config.js文件,将路径为相对路径,配置端口号及其他参数

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],base: './',server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

6.在项目根目录下创建electron.config.json,用于打包配置,files表示打包的文件,productName表示打包出来后可执行文件的名称,icon表示打包出来后可执行文件的图标"./icon.ico"表示在项目当前目录下有一个icon.ico的图标文件

PNG转ICO格式网站:PNG转ICO - 在线转换图标文件,转换成256x256尺寸,小了用不了。

{"files": ["electron/main.js", "electron/preload.js", "./dist"],"productName": "vue_project","icon": "./icon.ico"
}

7.运行命令完成打包,找到项目根目录下的dish目录,dish目录中的win-unpacked就是打包完成的相关文件,找到.exe结尾的文件运行就可以了!

npm run exe-build

8.开发阶段可使用以下命令启动项目

npm run exe-dev

还有一种更简单的方式,详情见:快速开始 | electron-vite,是由vite团队出品的,可以自己研究研究!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】——期末复习题题库(7)

🎃个人专栏: 🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础:Java基础_IT闫的博客-CSDN博客 🐋c语言:c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…

C2-4.3.1 多个决策树——随机森林

C2-4.3.1 多个决策树——随机森林 参考链接 1、为什么要使用多个决策树——随机森林? 决策树的缺点: A small change in the data can cause a large change in the structure of the decision tree causing instability 即:对数据集 中…

持续领跑云安全赛道!安全狗多项安全能力获认可

近日,以“数字安全 未来可期”为主题的“2024安全市场年度大会”在北京成功举行。 作为国内云原生安全领导厂商,安全狗也受邀出席此次活动。 厦门服云信息科技有限公司(品牌名:安全狗)创办于2013年,是国内领…

每日论文推送(有中文摘或源码地址或项目地址)

***VX搜索“晓理紫”并关注就可以每日获取最新论文***标题: “It’s not like Jarvis, but it’s pretty close!” – Examining ChatGPT’s Usage among Undergraduate Students in Computer Science作者: Ishika Joshi, Ritvik Budhiraja, Harshal D Akolekar摘要: Large lan…

Redis主从复制哨兵及集群

目录 一.主从复制 主从复制的工作原理如下: 主从复制的作用: 搭建Redis 主从复制 每台服务器配置: ​编辑进行编译安装: 定义systemd服务管理脚本: 开启服务,报错看下内容: 修改 Redis…

【JavaScript】es6开发常用技巧

1.如何隐藏所有指定的元素 const hide (el) > Array.from(el).forEach(e > (e.style.display none)); // 事例: 隐藏页面上所有<p>元素 hide(document.querySelectorALL(p))2.如何检查元素是否具有指定的类&#xff1f; 页面DOM里面的每个节点上都有一个 $\colo…

Python 日志模块 logging 的最佳实践,内容干练简洁

文章目录 1. 引言2. 定义日志类3. 引用日志4. 参考 1. 引言 每次写 python 代码&#xff0c;想找一个日志模块 logging 的最佳实践&#xff0c;都要找一大圈&#xff0c;确不一定可以找到合适的最佳实践。 痛定思痛&#xff0c;我决定下笔记录目前觉得合适的 python 日志的用…

代码混淆:保护您的应用程序

目录 引言 什么是代码混淆&#xff1f; 代码混淆常见手段 代码混淆的作用 代码混淆可能带来的问题 常用的混淆工具 如何使用ipaguard进行混淆 总结 引言 在当今数字化时代&#xff0c;移动应用程序已经成为人们生活和工作中不可或缺的一部分。但是&#xff0c;随着应用…

Go语言实现数据结构栈和队列

Go语言实现数据结构栈和队列 1、栈 package mainimport "fmt"func main(){// 创建栈stack : make([]int, 0)// push压入栈stack append(stack, 10)// pop弹出v : stack[len(stack)-1]// 10fmt.Println(v)stack stack[:len(stack)-1]// 检查栈空// truefmt.Printl…

PPT插件-大珩助手-清除同类

清除同类-颜色 对于选定的形状&#xff0c;删除相同颜色 清除同类-文本 删除当前幻灯片中的文本对象 清除同类-非文本 删除当前幻灯片中的非文本对象 清空当页 删除当前幻灯片中的所有对象 选中的形状动画 删除选中的对象上的形状动画 当前页形状动画 对于当前页中的…

2023.9.1最长上升子序列

56368795 最长上升子序列&#xff1a;5679(严格小于号连接&#xff0c;LIS 最长不降子序列&#xff1a;56679&#xff08;&#xff1c;连接,LNDS 最长下降子序列&#xff1a;875(LDS 最长不升子序列&#xff1a;665(LNIS 上升子序列最小划分数&#xff1a;划分成多个上升子…

MIB 变更周期

MIB 始终以 80 ms 的周期在 BCH 上传输并在 80 ms 内重复&#xff0c;并且它包括从小区获取 SIB1 所需的参数&#xff1b;如果 SSB 的周期大于 80 ms&#xff0c;则 MIB 的发送周期与 SSB 的周期相同。 在UE初始搜索时&#xff0c;SSB在半帧内的周期是20ms&#xff1b;所以对于…

Kotlin Collection KTX:让你的集合操作如丝般顺滑

当今移动应用开发&#xff0c;常常需要使用各种集合类型来存储和操作数据。Kotlin 提供了 Collection KTX 扩展库&#xff0c;为我们操作集合提供了非常方便的 API。在本篇文章中&#xff0c;我们将介绍 Collection KTX 中包含的所有扩展函数&#xff0c;让你的集合操作变得更加…

2024系统分析师---论软件的可靠性设计

摘要&#xff1a; 本人于2018年1月参与了中石化XX油田XX采油厂“用电管理系统”的项目建设&#xff0c;该系统建设目标是实现分单位、分线路、分系统评价、优化、考核&#xff0c;全面提升采油厂用电管理水平。在该项目组中我担任系统架构师一职&#xff0c;主要负责系统整体架…

Linux第23步_安装windows下的stm32cubeprogram软件

stm32cubeprogram软件是通过USB3.0接口烧写系统软件。 1、双击“05、开发工具\02、ST官方开发工具\en.stm32cubeprog_v2-5-0\SetupSTM32CubeProgrammer-2.5.0.exe”。 2、点击“Next” 3、点击“Next” 4、勾选“I agree”&#xff0c;点击“Next” 5、点击“Next” 6、点…

阴盘奇门八字排盘马星位置计算方法php代码

如下位置&#xff0c;马星的四个位置。 计算方法&#xff1a; 1。先根据出生年月日&#xff0c;计算得八字四柱。比如 2024年01月09日&#xff0c;四柱为 其中时柱地支为“申” 2。然后根据以下对应的数组&#xff0c;来找到id号&#xff0c;即马星位置。 根据下表来找到&am…

iPhone语音备忘录怎么导出?这3种方法任你选择!

作为iPhone用户&#xff0c;我们应该会经常使用语音备忘录来记录一些重要的信息。有时候&#xff0c;我们可能需要将这些语音备忘录导出&#xff0c;以方便分享或备份。iphone语音备忘录怎么导出&#xff1f;今天&#xff0c;小编将为大家介绍3种导出iPhone语音备忘录的方法&am…

阿里云RDMA通信库XRDMA论文详解

RDMA(remote direct memory access)即远端直接内存访问&#xff0c;是一种高性能网络通信技术&#xff0c;具有高带宽、低延迟、无CPU消耗等优点。RDMA相比TCP在性能方面有明显的优势&#xff0c;但在编程复杂度上RDMA verbs却比TCP socket复杂一个数量级。 开源社区和各大云厂…

fpga目前就业形势咋样?

FPGA今年各厂给本科生的薪资大概是15-30K&#xff0c;研究生是20-40K&#xff0c;平均薪资在25k左右&#xff0c; 当然具体薪资还要看去哪个公司&#xff0c;哪个城市&#xff0c;以及个人的学校、专业、能力水平、及包括面试时的表现&#xff0c;运气等&#xff0c;这些都会导…