从零使用electron搭建桌面端Dooring

开发 架构
熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron在架构上非常类似于一个现代的网页浏览器。我们可以控制两种类型的进程:主进程和渲染器。

[[406811]]

之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron.

因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论.

dooring-electron架构介绍

熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron在架构上非常类似于一个现代的网页浏览器。我们可以控制两种类型的进程:主进程和渲染器。

每个 Electron 应用都有一个单一的主进程,作为应用程序入口。主进程在 Node 环境中运行,我们可以使用所有 Node 的能力。

那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。

  • BrowserWindow 类的每个实例创建一个应用程序窗口,且在单独的渲染器进程中加载一个网页。我们可从主进程用 window 的 webContent 对象与网页内容进行交互。

有了以上基础, 我画了一张dooring-electron 的简单架构图方便大家理解:

 

如果相对electron有更多直观理解的, 也可以参考其官网:

https://www.electronjs.org/

dooring-electron的技术栈笔者使用的是:

koa2 + electron + react + umi3

接下来我将给大家介绍如何学习使用dooring-electron.

dooring-electron安装与使用

在安装之前我们先来体验一下.

(编辑器界面)

(预览界面)

(ide界面)

安装

下载代码

  1. git clone git@github.com:MrXujiang/dooring-electron-lowcode.git 

安装依赖包

  1. yarn install 
  2. or 
  3. cnpm install 

本地启动

本地启动应用

  1. yarn debug:main 

项目打包

构建测试包

  1. npm run pack   // 仅输出包,方便测试 

构建安装包

1.执行前端资源打包

 

  1. npm run build  // react资源打包 

2.运行electron构建命令,输出安装包

  1. npm run dist-mac // mac包 
  2. npm run dist-win // windows包 
  3. npm run dist-linux // linux包 
  4. npm run dist-all   // 所有平台包 

各配置规则可以参考官方文档:

https://www.electron.build/configuration/configuration

安装案例

笔者以打包输出的dist-mac为例来演示如何在mac上安装. 首先我们找到打包后的release目录, 然后拖拽进applications即可:

window 和 linux 版本的安装也很简单, 大家可以亲自尝试一下.

如何快速学习electron

这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础:

  • html + js + css 基础
  • 熟悉nodejs基本api

有了以上基础, 我们学习electron将非常迅速. 对于electron本身, 我们只要学习其官网的api介绍(按需学习)和demo即可.

本文转载自微信公众号「趣谈前端」,可以通过以下二维码关注。转载本文请联系趣谈前端公众号。

 

责任编辑:姜华 来源: 趣谈前端
相关推荐

2022-02-24 20:34:02

Dooring开发桌面端应用

2023-01-07 08:09:41

零代码Dooring组件

2021-04-12 08:31:53

PC-Dooring项目PC端搭建

2023-02-01 18:33:44

得物商家客服

2021-10-28 08:42:31

Dooring表单设计器数据可视化

2022-08-31 08:32:22

数据可视化项目nocode

2022-05-17 08:39:05

VueViteTypeScript

2022-06-30 07:48:06

Dooring低代码零代码

2021-08-26 05:15:22

图片编辑器 H5-DooringMitu-Doorin

2019-10-29 09:48:20

ElectronGithub开源库

2023-03-16 20:46:40

可视化平台迭代

2023-12-21 09:16:40

Electron前端多进程架构

2016-12-29 10:42:30

零搭建概述标签

2017-09-05 16:43:47

Electron桌面计算器

2020-09-30 09:17:32

electron将现有

2023-06-07 07:23:09

Dooring专业版开发神器

2023-01-08 17:55:30

LowCodeDooring

2021-05-13 17:02:38

MDC脚手架日志

2021-04-20 19:24:16

脚手架 Java微信

2021-07-12 17:23:47

零设计可视化引擎
点赞
收藏

51CTO技术栈公众号