从零使用electron搭建桌面端可视化编辑器

徐小夕 等级 1714 1 0

从零使用electron搭建桌面端可视化编辑器

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

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

dooring-electron架构介绍

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

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

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

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

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

从零使用electron搭建桌面端可视化编辑器

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

https://www.electronjs.org/

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

koa2 + electron + react + umi3

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

dooring-electron安装与使用

在安装之前我们先来体验一下. 从零使用electron搭建桌面端可视化编辑器 从零使用electron搭建桌面端可视化编辑器 从零使用electron搭建桌面端可视化编辑器

安装

  1. 下载代码

    git clone git@github.com:MrXujiang/dooring-electron-lowcode.git
  2. 安装依赖包

    yarn install
    or
    cnpm install

本地启动

本地启动应用

yarn debug:main

项目打包

构建测试包
npm run pack   // 仅输出包,方便测试
构建安装包
  1. 执行前端资源打包
npm run build  // react资源打包
  1. 运行electron构建命令,输出安装包
npm run dist-mac // mac包
npm run dist-win // windows包
npm run dist-linux // linux包
npm run dist-all   // 所有平台包

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

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

如何快速学习electron

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

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

有了以上基础, 我们学习electron将非常迅速. 对于electron本身, 我们只要学习其官网的api介绍(按需学习)和demo即可. 如果有不懂的地方, 也欢迎随时和我交流. 毕竟我也在刚入门学习的路上haha.

Dooring最新更新指南

最近H5-Dooring可视化搭建平台也在持续推迭代, 数据源已基本搭建完成, 后续还会按照更智能化的方向. 一下即是最近的更新日志:

  1. 优化模版库
  2. 页面全局配置添加微信分享icon
  3. 组件支持动画, 添加10+动画效果
  4. 接入微信生态, 支持H5分享微信好友和朋友圈
  5. 优化友链样式

国内lowcode平台仍然有很长的路要走, 期待大家一起努力💪!

更多 低代码 / 可视化 相关的技术分享和实现, 欢迎 微信 搜索 趣谈前端 学习探索.

github地址: https://github.com/MrXujiang/dooring-electron-lowcode

收藏
评论区

相关推荐

从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
(三)使用electron
前提已经实现了(一)里面的效果连接:[https://www.cnblogs.com/yuNotes/p/12884930.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2FyuNotes%2Fp%2F12884930.html) #### 1
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
3、electron打包生成exe文件
打包方式1:DOS窗口命令打包 --------------- DOS 下,输入 npm install electron-packager -g**全局安装**我们的打包神器: cnpm install electron-packager -g 在项目文件夹下面,也就是根目录下面打开DOS执行打包命令: electron-packa
electron(1)安装和使用
下载和安装 # Clone the Quick Start repository git clone https://github.com/atom/electron-quick-start # Install the dependencies and run npm install && npm start 会
AudioContext方法播放音频
`const fs = require('fs'); const electron = require('electron'); const dataPath = (electron.app || electron.remote.app).getPath('userData'); const fPath =` ${dataPath}/file/unzip\`
Electron 在 Taro IDE 的开发实践
背景— --- Taro IDE 是一款我们正在精心打造的一站式移动端研发工作台。除了需要实现 Taro 从创建项目到预览、编译的全部能力,还需要打通用户测试、调试、监控等一系列流程。为了提升开发体验,仅仅一个命令行工具是远远不够的,我们需要开发一款桌面客户端,并同时提供 Windows、MacOS 等不同系统的版本。 Electron\[1\] 最初是
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron开发跨平台桌面程序入门教程
最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。 Electron是什么呢? ------------- Electron 可以让你使用纯 JavaScript 调用丰富的
Electron桌面端所见即所得
### 突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 **如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态**。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
TMS WEB Core v1.2预览版:新的Electron应用程序支持
#### 2019年2月20日,星期三 几个月前,我们已经开始与[Electron进行](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftmssoftware.com%2Fsite%2Fblog.asp%3Fpost%3D495)实验。在工作概念验证之后,我们的目标是为Delphi开发人
【electron】ipc模块使用
electron 进程模型 electron 使用多进程架构与chromium类似,electron使用多进程架构。单一进程架构能够节省资源,然而浏览器经常遇到恶意代码,可能导致进程崩溃,浏览器的多个页签公用一个进程必然会一损俱损,因此多进程架构更适合些()。在开发electron的过程中,我们主要接触两个进程: 主进程main process与渲染进程re
从零使用electron搭建桌面端可视化编辑器Dooring
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随