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

徐小夕
• 阅读 1949

从零使用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

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
徐小夕 徐小夕
10个月前
从零使用electron搭建桌面端可视化编辑器Dooring
之前有朋友希望我基于H5Dooring开发一款桌面端应用,最近刚好有时间,就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron.因为之前用electron比较少,今天刚好学了一下,也基本把前后端打通了,文末我会放dooringelectron的github地址供大家参考学习.如果大家有更好的方案,可以随
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为