🎉 项目搭建例子: Electron + React + Ant-Design 理论上来说,目前的前端框架都能很好地配合Electron进行工作,当然你甚至可以使用原生御三家加上Node.js来进行Electron应用的开发。 在这里,我以我本人的开发喜好为例,讲解一下使用React作为前端界面框架、Ant-Design作为UI库、Electron作为Native支持的项目搭建。 接下...
首先,我们需要在一个常规的React项目中,安装electron,为了使我们功能代码部分和electron窗口部分更清晰,我们可以在项目的根目录新建一个desktop文件夹,专门用来存放electron部分代码和资源。目录结构大概如图所示: 我们cd desktop到desktop文件夹下,执行npm init -y初始化包管理器,然后安装electron相关包:electron:electron核...
本文通过Youtube视频:- Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai - YouTube 整理而来。是基于Electron、React、TypeScript、Tailwind及Jotai来开发一款基础功能的Markdown笔记软件。技术栈及依赖#Electron: 跨平台桌面应用框架 React: Facebook推出的前端开发框架 Yarn: 类似...
{"name":"electron_gui","version":"1.0.0","description":"","main":"main.js",// 入口文件"scripts": {"test":"echo\"Error: no test specified\"&& exit 1","electron":"electron ."// 主electron 执行程序},"author":"","license":"ISC","dependencies": {"electron":"^19.0.5"} } 热...
前两篇文章我们介绍了react+electron构建桌面应用和如何加载本地的静态资源。然后现在有个需求,是要使应用里的弹窗独立于主窗口,今天来实现这个需求。 在之前我们知道electron通过main.js这个文件里new一个BrowserWindow来新建一个窗口,同样的,这个应用的弹窗,也可以通过new一个BrowserWindow来新建: 代码语言:javascript...
这一步很关键,我们需要对React和Electron代码进行修改。首先,我们打开react的package.json文件 +"homepage":"./", 将静态资源从绝对路径改为相对路径。确保静态资源在Electron加载成功。打开main.js: +constisDev=process.env.NODE_ENV==='development';+win.loadURL(isDev?'http://localhost:3000':`file://${...
Electron 可以在 Windows、macOS 和 Linux 上运行,从而允许开发者编写一次代码并在多个操作系统上部署应用程序。 2、基于 Web 技术: Electron 使用 Chromium 来渲染用户界面,所以开发者可以使用前端的 Web 技术(如 HTML、CSS、JavaScript)来创建界面。 3、Node.js 集成: ...
👉 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron,我们可以使用纯 JavaScript 来调用丰富的...
四、Electron 的优势 1. 可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。2. 上⼿容易：使⽤ Web 技术就可以轻松完成开发桌⾯应⽤程序。 3. 底层权限：允许应⽤程序访问⽂件系统、操作系统等底层功能，从⽽实现复杂的系统交互。4. 社区⽀持：拥有⼀个庞⼤...
本文用于记录在react-create-app生成的react项目中配置electron的步骤。完整项目见github效果:使用react-create-app生成react项目。安装electron:npm insta...