超快上手electron,electron保姆级教程(含运行、打包、electron下载慢),利用electron把web端应用转成桌面应用

news/2024/12/17 13:38:29/

electron配置步骤 :

1.首先node及npm是否安装。

2.管理者模式cmd进行项目初始化
 

mkdir my-test-app cd my-test-app npm init

此时package.json内容如下(有必填项)

3.首管理者模式设置环境变量再安装electron (否则速度太慢)。

$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"   //设置环境变量npm install --save-dev electron                                  //安装electron

4.首手动修改package.json和新建main.js后 , npm start 运行项目。



package.json目前信息如下

javascript">// 这是目前package.json的内容{"name": "my-test-app","version": "1.0.0","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron-forge start",},"author": "hyy","license": "ISC","description": "hyy","dependencies": {"my-test-app": "file:"},"devDependencies": {"electron": "^33.2.1"}
}


 

web应用转桌面应用及打包的步骤 :

1.在上述基础上且有web网址 , 更改main.js后运行项目

javascript">// 目前main.js的内容如下const { app, BrowserWindow } = require('electron')app.on('ready', () => {//当app准备好后,执行createWindow创建窗口const win = new BrowserWindow({width: 800, //窗口宽度height: 600, //窗口高度autoHideMenuBar: true, //自动隐藏菜单档alwaysOnTop: true, //置顶x: 0, //窗口位置x坐标y: 0 //窗口位置y坐标})//加载一个远程页面win.loadURL('http://h5.canon.com.cn/user/login')
})



2.web网址时可以打包项目将路径指向打包后的地址 , 更改main.js后运行项目。

javascript">// 这是目前的main.js的内容const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {//当app准备好后,执行createWindow创建窗口const win = new BrowserWindow({width: 800, //窗口宽度height: 600, //窗口高度autoHideMenuBar: true, //自动隐藏菜单档alwaysOnTop: true //置顶})//引入页面win.loadFile('./my-electron-app/dist/index.html')win.openDevTools() //自动打开调试窗口console.log('main.js里的main.js')
}app.on('ready', () => {createWindow()//兼容核心代码1app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})


3.打包采用的是electron Forge打包的方式 (个人尝试electron-builder和electron-packager都踩雷了)
 

npm install --save-dev @electron-forge/clinpx electron-forge importnpm run make


3.1 npx electron-forge import 后 , package.json会多一些内容 , 不用管


 

// 这是目前package.json的内容{"name": "my-test-app","version": "1.0.0","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"},"author": "hyy","license": "ISC","description": "hyy","dependencies": {"electron-squirrel-startup": "^1.0.1","my-test-app": "file:"},"devDependencies": {"@electron-forge/cli": "^7.6.0","@electron-forge/maker-deb": "^7.6.0","@electron-forge/maker-rpm": "^7.6.0","@electron-forge/maker-squirrel": "^7.6.0","@electron-forge/maker-zip": "^7.6.0","@electron-forge/plugin-auto-unpack-natives": "^7.6.0","@electron-forge/plugin-fuses": "^7.6.0","@electron/fuses": "^1.8.0","electron": "^33.2.1"}
}


3.2 npm run make (目前打包速度巨慢 , 5分钟 , 10分钟 , 甚至30分钟... , 未找到好的解决方法)


4.打包完成后 , 双击运行程序 (打包位置如下)



5.修改打包后的icon样式 (目前的项目结构 、icon图、 forge.config.js内容、打包位置、应用程序如下)



javascript">// forge.config.js内容如下const { FusesPlugin } = require('@electron-forge/plugin-fuses')
const { FuseV1Options, FuseVersion } = require('@electron/fuses')
const path = require('path') // 新增部分module.exports = {packagerConfig: {asar: true,icon: path.join(__dirname, 'logo.ico') // 不需要文件扩展名},rebuildConfig: {},makers: [{name: '@electron-forge/maker-squirrel',config: {name: 'hyy_electron',setupIcon: path.join(__dirname, 'logo.ico'), // 指定 setup 图标iconUrl: 'file://' + path.join(__dirname, 'logo.ico') // 指定安装包图标}},{name: '@electron-forge/maker-zip',platforms: ['darwin']},{name: '@electron-forge/maker-deb',config: {}},{name: '@electron-forge/maker-rpm',config: {}}],plugins: [{name: '@electron-forge/plugin-auto-unpack-natives',config: {}},// Fuses are used to enable/disable various Electron functionality// at package time, before code signing the applicationnew FusesPlugin({version: FuseVersion.V1,[FuseV1Options.RunAsNode]: false,[FuseV1Options.EnableCookieEncryption]: true,[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,[FuseV1Options.EnableNodeCliInspectArguments]: false,[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,[FuseV1Options.OnlyLoadAppFromAsar]: true})]
}






6.修改打包后的文字需重新构建项目, 直接更改文字后打包会报错 

常见问题及解决:

1. electron-forge打包时报错 , 解决 : 保持只有一个窗口 , 并重新 npm run make。2. 下载或打包报错超时 , 解决 : 用管理者模式设置 $env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

3. 下载或打包报错超时 , 解决 : 用管理者模式设置


http://www.ppmy.cn/news/1555867.html

相关文章

【kafka】简单运用go语言操作kafka实现生产者和消费者功能的包,confluent-kafka-go和sarama

confluent-kafka-go和sarama对比 特性confluent-kafka-gosarama底层实现基于 librdkafka C 库完全用 Go 实现性能高吞吐量、低延迟吞吐量较低,适合常规应用安装依赖需要 C 编译器和 librdkafka无需外部依赖,纯 Go 实现功能支持 Kafka 所有功能&#xff…

旅游资源系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…

【C++】11___模板(1)

目录 一、模板的概念 二、函数模板 三、普通函数与函数模板 3.1区别 3.2调用规则 一、模板的概念 模板不能直接使用&#xff0c;它只是一个框架模板的通用并不是万能的分为两类&#xff1a;函数模板、类模板 二、函数模板 函数模板语法&#xff1a; template<typename T…

R环境配置 以及Debug方法 (VSCode, conda, 远程R)

生物信息学中的R环境配置 以及Debug方法 开始设置1、建议使用VSCode conda 远程R2、 VSCode配置安装插件安装好插件后&#xff0c;远程设置链接成功后&#xff0c;设置项目 3、 linux conda 和 远程R配置4、VScode 远程访问R环境下面配置远程R 5、开始Debug新建个R文件&#…

day13 python(1)——python基础

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 1、python简介 1.1 为什么学习python 1.2 python发展历史 python2.x和python3.x 版本里面有些是不兼容的。&#xff08;我自己本地版本 3.11&#xff09; 2、语言的分类 &#xff08;1&#xff09;编译型 …

MySQL的历史和地位

秋招之后&#xff0c;开始深入学习后端开发知识啦。把学到的东西分享给大家最开心啦。就从MySQL开始吧。 首先说一下MySQL的历史和地位。主要是看一下我们为什么要学习&#xff0c;而不是说让我们学什么我们就学什么。 地位 这张图是我从DB-Engines截取的2024年12月最新的数据…

百度智能云千帆AppBuilder升级,百度AI搜索组件上线,RAG支持无限容量向量存储!

百度智能云千帆 AppBuilder 发版升级&#xff01; 进一步降低开发门槛&#xff0c;落地大模型到应用的最后一公里。在千帆 AppBuilder 最新升级的 V1.1版本中&#xff0c;企业级 RAG 和 Agent 能力再度提升&#xff0c;同时组件生态与应用集成分发更加优化。 • 企业级 RAG&am…

前端项目初始化搭建(二)

一、使用 Vite 创建 Vue 3 TypeScript 项目 PS E:\web\cursor-project\web> npm create vitelatest yf-blog -- --template vue-ts> npx > create-vite yf-blog --template vue-tsScaffolding project in E:\web\cursor-project\web\yf-blog...Done. Now run:cd yf-…