快速创建桌面端(electron-egg)

介绍 | electron-egg

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

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

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

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

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

安装

javascript 复制代码
# 下载
git clone https://gitee.com/dromara/electron-egg.git

# 安装依赖
npm install

# 启动
npm run start

目录说明

html 复制代码
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数据库

生命周期

javascript 复制代码
// 引入基础 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;

控制器

javascript 复制代码
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;
  }
}  

服务层

javascript 复制代码
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;
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js