前端知识笔记（二十四）———快速创建桌面端(electron-egg)

介绍 | electron–egg

electron–egg: 一个入门简单、跨平台、企业级桌面软件开发框架。

electron–egg是一个基于Electron和Egg.js的框架，可以用于快速构建跨平台的桌面应用程序。

1.兼容平台：electron-egg可以在Windows、MacOS和Linux等多个平台上运行。

2.简单易用：electron-egg提供了一些简单易用的API，窗口管理、菜单管理、文件操作等功能。

3.可定制化：electron-egg提供了丰富的插件和扩展机制，方便进行高度定制化。

安装

# 下载
git clone https://gitee.com/dromara/electron-egg.git
 
# 安装依赖
npm install
 
# 启动
npm run start

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;

代码007普通

打赏 收藏 海报 链接