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

简介: 前端知识笔记(二十四)———快速创建桌面端(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;
相关文章
|
4月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
108 0
|
5月前
|
编解码 前端开发
前端知识笔记(十九)———px,em,rem,vw,vh之间的区别
前端知识笔记(十九)———px,em,rem,vw,vh之间的区别
61 0
|
16天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
21 1
|
16天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
59 1
|
16天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
22 1
|
4月前
|
前端开发 JavaScript 应用服务中间件
WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)
WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)
30 0
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化的整理笔记(二)
前端性能优化的整理笔记(二)
|
5月前
|
前端开发 Java PHP
前端知识笔记(四十五)———前端开发与后端开发有什么区别
前端知识笔记(四十五)———前端开发与后端开发有什么区别
48 0
|
5月前
|
前端开发 安全 网络协议
前端知识笔记(四十二)———http和https详细解析
前端知识笔记(四十二)———http和https详细解析
30 0
|
5月前
|
存储 XML 缓存
前端知识笔记(三十九)———Base64图片是什么?原理是什么?优缺点是什么?
前端知识笔记(三十九)———Base64图片是什么?原理是什么?优缺点是什么?
22 0