介绍 | electron-egg
什么是Electron Egg？
Electron Egg是一个基于Electron和Vue.js的框架，旨在简化构建桌面应用的开发流程。它提供了一个完整的开发环境，包括自动更新、调试工具、插件支持等功能，使开发者能够专注于应用的逻辑和用户界面的设计，而无需关注底层的技术细节。
核心特性
集成Electron和Vue.js：Electron Egg将Electron和Vue.js无缝集成在一起，使开发者能够充分利用这两个技术的优势来构建出功能丰富、性能优异的桌面应用。
自动更新：Electron Egg内置了自动更新功能，开发者可以轻松地将应用程序的更新推送给用户，无需用户手动下载安装。
调试工具：Electron Egg提供了丰富的调试工具，包括开发者工具、调试菜单等，帮助开发者快速定位和解决问题。
插件支持：Electron Egg支持使用插件来扩展框架的功能，开发者可以根据自己的需求选择合适的插件来增强应用的功能。
为什么选择Electron Egg？
简单易用：Electron Egg提供了一套简洁而强大的API，使开发者能够快速上手并构建出高质量的桌面应用。
生态丰富：Electron Egg拥有一个活跃的社区和丰富的生态系统，开发者可以从中获取到各种资源和支持。
跨平台支持：Electron Egg支持在Windows、macOS和Linux等主流操作系统上运行，开发者可以一次编写，到处运行。
安装
# 下载 git clone https://gitee.com/dromara/electron-egg.git # 安装依赖 npm install # 启动 npm run start
安装Electron Egg CLI工具：首先，通过npm安装Electron Egg的命令行工具。
npm install -g electron-egg-cli
创建新项目：使用Electron Egg CLI工具创建一个新的Electron Egg项目。
electron-egg create my-app
结构
project ├── package.json npm包配置 ├── bulid 打包用的资源和脚本 ├── icons 软件图标（打包用到） ├── extraResources 额外资源目录 ├── electron 主进程服务 ├── addon 插件目录 ├── example demo插件（代码示例） ├── config 配置文件 ├── config.default.js 默认配置，都会加载 ├── config.local.js dev环境加载 ├── config.prod.js 生产环境加载 ├── encrypt.js 加密配置文件 ├── builder.json 打包配置 ├── controller 控制器 ├── service 业务层 ├── preload 预加载，在程序启动时加载，如托盘、自动升级等功能要提前加载代码 ├── jobs 任务 ├── frontend 前端目录（demo是用vue编写的） ├── out 打包后生成的可执行文件 ├── latest.yml 自动升级文件 ├── xxx.exe window应用安装包 ├── xxx.exe.blockmap window应用增量升级包 ├── xxx.dmg mac应用安装包 ├── xxx.deb linux应用安装包后缀有多种 ├── logs 日志 ├── main.js 入口文件 ├── public 资源目录 ├── dist 前端资源会移动到这里，生产环境加载 ├── electron 业务js加密后的文件 ├── html 一些模板 ├── images 一些图片 ├── data 内置数据库文件 ├── system.json 框架使用的数据库 ├── demo.json 示例json数据库 ├── sqlite-demo.db 示例sqlite数据库
引入
// 引入基础 Application 类
const { Application } = require('ee-core');
class Index extends Application {
constructor() {
super();
}
/**
* core app have been loaded
* 加载
* config -> service -> controller -> socket -> ready()
*/
async ready () {
// do some things
}
/**
* electron app ready
* 加载以下事件
* app.on('second-instance')
* app.whenReady().then() 该事件会创建 mainWindow
* app.on('window-all-closed')
* app.on('before-quit')
* 然后触发
* -> electronAppReady()
*/
async electronAppReady () {
// do some things
}
/**
* main window have been loaded
* mainWindow 被创建后，加载
* windowReady() -> addon -> preload
*/
async windowReady () {
// do some things
// 延迟加载，无白屏
const winOpt = this.config.windowsOption;
if (winOpt.show == false) {
const win = this.electron.mainWindow;
win.once('ready-to-show', () => {
win.show();
})
}
}
/**
* before app close
*/
async beforeClose () {
// do some things
}
}
Index.toString = () => '[class Index]';
module.exports = Index;控制器
const { Controller } = require('ee-core');
const Services = require('ee-core/services');
/**
* 示例控制器
* @class
*/
class ExampleController extends Controller {
constructor(ctx) {
super(ctx);
}
/**
* 所有方法接收两个参数
* @param args 前端传的参数
* @param event - ipc通信时才有值。详情见：控制器文档
*/
/**
* test
*/
async test (args, event) {
// 前端参数
const params = args;
// 调用service
const result = await Services.get('example').test('electron');
// 主动向前端发请求
// channel 前端ipc.on()，监听的路由
const channel = "controller.example.something"
// IpcMainInvokeEvent
event.reply(channel, {age:21})
// IpcMainEvent
event.sender.send(`${channel}`, data)
// 返回数据
const data = {}
return data;
}
}服务层
const { Service } = require('ee-core');
const Services = require('ee-core/services');
/**
* 示例服务
* @class
*/
class ExampleService extends Service {
constructor(ctx) {
super(ctx);
}
/**
* test
*/
async test (args, event) {
let obj = {
status:'ok',
params: args
}
// 调用其它service
Services.get('framework').test('egg');
// 主动向前端发请求
// channel 前端ipc.on()，监听的路由
const channel = "controller.example.something"
// controller 传入 event
// IpcMainInvokeEvent
event.reply(channel, {age:21})
// IpcMainEvent
event.sender.send(`${channel}`, {age:21})
return obj;
}
}
ExampleService.toString = () => '[class ExampleService]';
module.exports = ExampleService;总结
MVC架构
RPC通信
版权声明：本文为原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
关注微信公众号："cq_xifan";
