当前位置: 首页 > 科技观察

Electron桌面端Dooring搭建实践

时间:2023-03-12 10:12:23 科技观察

有朋友让我基于H5-Dooring开发一个桌面端应用。最近刚好有空,用了半天的时间,使用electron从头开发桌面端离线软件Dooring-electron。因为之前很少用electron,今天刚学,基本把前后端都打通了。Dooring-electron架构介绍熟悉Electron的朋友可能知道,Electron继承了Chromium的多进程架构,这使得Electron在架构上非常类似于现代的网络浏览器。我们可以控制两种类型的进程:主进程和渲染器。每个Electron应用程序都有一个主进程,作为应用程序的入口点。主进程运行在Node环境中,我们可以使用Node的所有能力。那么我们在主进程中可以做什么呢?主进程的主要目的是使用BrowserWindow模块创建和管理应用程序窗口。BrowserWindow类的每个实例都会创建一个应用程序窗口并在单独的呈现器进程中加载??网页。我们可以使用窗口的webContent对象与主进程中的Web内容进行交互。有了上面的基础,我画了一个简单的dooring-electron架构图,方便大家理解:如果你对electron有更直观的理解,也可以参考它的官网:https://www.electronjs.org/dooring-electron的技术栈笔者使用的是:koa2+electron+react+umi3下面给大家介绍一下如何学习使用dooring-electron.dooring-electron的安装和使用。安装前先体验一下。(EditDevice界面)(预览界面)(ide界面)安装下载代码gitclonegit@github.com:MrXujiang/dooring-electron-lowcode.git安装依赖包yarninstallorcnpminstalllocalstartlocalstartapplicationyarndebug:mainprojectpackagebuildtestPackagenpmrunpack//只输出包,方便测试和构建安装包执行前端资源打包npmrunbuild//React资源打包运行electronbuild命令输出安装包npmrundist-mac//macpackagenpmrundist-win//windowspackagenpmrundist-linux//linuxpackagenpmrundist-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即可。如果有什么不明白的,欢迎随时与我交流。毕竟我才刚刚开始学习路上哈哈本文转载自微信公众号《趣谈前端》