肥料网站建设 中企动力,广告设计网站排行榜前十名有哪些,社区源码app,重庆市公共资源交易中心官网文章目录 Electron安装Node.jsNodeJs推荐配置开始Electron项目创建index.js文件创建src目录运行打包生成exe生成安装包踩坑 下一篇Electron实战(二)#xff1a;将Node.js和UI能力#xff08;app/BrowserWindow/dialog)等注入html Electron
Electron是一个使用JavaScript, HT… 文章目录 Electron安装Node.jsNodeJs推荐配置开始Electron项目创建index.js文件创建src目录运行打包生成exe生成安装包踩坑 下一篇Electron实战(二)将Node.js和UI能力app/BrowserWindow/dialog)等注入html Electron
Electron是一个使用JavaScript, HTML, CSS开发跨平台桌面应用程序的框架。
Electron整合Chromium浏览器跨平台界面容器和Node.js跨平台系统能力实现了一个使用JavaScript的全栈开发环境逐渐成为开发跨平台桌面应用程序的有力竞争者。
2023年7月3日腾讯正式上线 Windows QQ v9.9.0 体验版本。该版本基于 Electron 重构实现了 Linux、macOS、Windows 三端架构统一。三个平台一套代码多端运行同步更新。三个平台的版本在外观、操作和性能上一致。
官方文档https://www.electronjs.org/docs/latest/
安装Node.js
官网下载安装最新版NodeJs
https://nodejs.org/en
安装到D:/env/nodejs/目录底下安装成功后查看版本
C:\Users\adminnode -v
v20.10.0C:\Users\adminnpm -v
10.2.3NodeJs推荐配置
配置npm安装的全局模块的位置以及缓存目录cache的位置。 如果不配置后续执行npm install xxx -gg代表global全局安装的意思安装语句时会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中占用C盘空间。 可以在node安目录比如D:\env\nodejs下创建node_global目录和node_cache目录然后执行命令
npm config set prefix D:\env\nodejs\node_global
npm config set cache D:\env\nodejs\node_cache
npm config list #查看配置信息检查设置是否成功
C:\Users\adminnpm config get prefix
D:\env\nodejs\node_global
C:\Users\adminnpm config get cache
D:\env\nodejs\node_cache开始Electron项目
创建项目目录项目目录底下执行npm init然后安装Electron。
# 进入新建的项目目录
cd D:\dev\web\work\LuckyTools
# 初始化npm项目
npm init
# 项目底下安装electron
npm install electron -Spackage.json中记录了安装electron的版本
dependencies: {electron: ^27.1.3
}npm安装命令的常用参数比较 npm install xxx简写npm i xxx 本地安装xxx包但不将安装包的信息写入package.json不推荐 -–global/-g 全局安装安装后可直接全局使用相应包里面提供的命令 –-save/-s/-S 本地安装安装版本写入package.json的dependencies –-save-dev/-d/-D 本地安装安装版本写入package.json的devDependencies 创建index.js文件
项目目录底下创建index.js作为项目的入口文件文件内容
//app 模块控制整个应用程序的生命周期和事件处理
//BrowserWindow 模块它创建和管理程序的窗口。
const { app, BrowserWindow } require(electron)
const path require(path)const iconPath path.join(__dirname, ./src/res/icon.ico)
//在 Electron 中只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on(ready, () {//创建一个窗口const mainWindow new BrowserWindow({icon: iconPath,});mainWindow.setMenu(null);//禁用默认的菜单栏//窗口加载html文件mainWindow.loadFile(./src/index.html)
})创建src目录
里面存放前端页面比如index.html。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title/titlelink relstylesheet hrefcss/xxx.css/style/style
/head
bodydivHello World/divscript srcjs/xxx.js/scriptscript/script
/body
/html编辑package.jsonscripts属性下增加start命令
// package.json
scripts: {start: electron .,
}运行
npm start打包生成exe
安装electron-packager后可打包生成Windows可执行文件exe。
npm install electron-packager -g添加打包package命令
scripts: {start: electron .,package:electron-packager . needle-server --platformwin32 --archx64 --out./out --asar --app-version1.0.0 --overwrite --ignorenode_modules},执行打包命令
PS D:\dev\web\work\LuckyTools npm run package lucky_tools1.0.0 packageelectron-packager . needle-server --platformwin32 --archx64 --out./out --asar --app-version1.0.0 --overwrite --ignorenode_modulesPackaging app for platform win32 x64 using electron v27.1.3
Wrote new app to: out\needle-server-win32-x64生成安装包
可以使用electron-builder由于没有实际测试略过。
npm i electron-builder --D踩坑
笔者安装的版本
devDependencies: {electron-builder: ^24.9.1,electron-packger: ^24.9.1}由于electron-packager依赖较新的node版本。只好重装了node最新版本。但安装后发现npm不能用了npm -v 报错
D:\env\nodejs\node_modules\npm\lib\es6\validate-engines.js:31throw err^TypeError: Class extends value undefined is not a constructor or nullat Object.anonymous (D:\env\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)at Module.load (node:internal/modules/cjs/loader:1207:32)at Module._load (node:internal/modules/cjs/loader:1023:12)at Module.require (node:internal/modules/cjs/loader:1235:19)at require (node:internal/modules/helpers:176:18)at Object.anonymous (D:\env\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)Node.js v20.10.0无奈遇到版本不兼容了
只好先卸载nodejs删除nodejs/node_modules/npm整个目录然后重新安装最新版的nodejs。 下一篇
Electron实战(二)将Node.js和UI能力app/BrowserWindow/dialog)等注入html
