使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
用户喜爱的应用,以 Electron 构建
Visual Studio Code | WhatsApp | Twitch | Slack | InVision
数千个跨行业的组织使用 Electron 构建跨平台软件。
如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。
electron-egg是一个入门简单、跨平台、企业级桌面软件开发框架,结合Electron 构建跨平台软件。
推荐 node.js >= 14.16.0
安装 EE 框架 2.0
打包流程:
1. 克隆示例项目的仓库:git clone /wallace5303/electron-egg.git2. 设置国内镜像源(加速):npm config set registry=3. 安装 npm 依赖包1:(在根目录下)npm install4. 安装 npm 依赖包2:(在前端目录frontend下)npm install5. 前端构建资源:(在前端目录frontend下) npm run build–>打包到 dist 目录6. 移动前端资源文件:npm run rd7. 代码加密:npm run encrypt8. 设置国内镜像:npm config set electron_builder_binaries_mirror=/-/binary/electron-builder-binaries/9. 执行打包命令:npm run build-w-64
#如果下载electron慢,配置如下(或者挂个VPN)
npm config set electron_mirror=/-/binary/electron/
基础知识:
1. 进程框架有两种进程ee主进程:业务逻辑ee渲染进程:软件界面UI2. 通信ipc:前端 ⇋ 业务层 (双向通信)http: 前端、命令行、浏览器 ⇋ 业务层 (单向通信)socket:前端 ⇋ 业务层 (双向通信)3. 本地存储json数据库sqlite数据库
开发者模式:
# 软件界面# 进入“frontend”目录,开发软件界面;支持任意前端技术,如果vue、react、angular、html等# 启动前端# 进入【前端目录】cd frontend # 安装依赖npm install# 启动服务npm run serve# 业务逻辑# “electron”目录,业务开发;常规业务逻辑、调用操作系统api、访问远程服务器等# 在项目【根目录】启动服务# 主进程服务# 启动后端服务npm run dev# 热重载模式npm run reload
常用命令:
# 开发者模式# 1:【进入前端目录】,启动前端服务cd electron-egg/frontend && npm install && npm run serve# 2:【根目录】,启动后端服务npm run dev# 开发模式(主进程)npm run dev# 开发模式-热加载(主进程)npm run reload# 预发布模式(环境变量为:prod)npm run start# 打包 windows版本npm run build-w (32位)npm run build-w-64 (64位)# 打包 mac版本npm run build-mnpm run build-m-arm64 (m1芯片架构)# 打包 linux版本npm run build-l# 移动前端静态资源npm run rd# 字节码加密npm run encrypt# 混淆加密(废弃)npm run compress# 还原(废弃)npm run restore
electron-egg
参考介绍
使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序