前端知识笔记(二十四)———快速创建桌面端(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;
相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
146 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
29天前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
6月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
96 2
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
2月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
3月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
3月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
382 3