结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤: 1. 安装Electron 首先,你需要安装Electron。在终端中运行以下命令: npm install electron --save-dev 2. 创建Electron应用程序 使用Electron提供的CLI工具,你可以创建一个Electron应用程序。 总之,使用React和Electron一起开发桌面应用程序可以帮助你快速构建跨平台的应用程序,并提供许多强大的功能。通过使用React构建Web界面,你可以使用熟悉的工具和技术来构建应用程序。 如果你想构建一个桌面应用程序,React和Electron可能是一个不错的选择。
之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron / dooring-electron的技术栈笔者使用的是: koa2 + electron + react + umi3 接下来我将给大家介绍如何学习使用dooring-electron. dooring-electron 如何快速学习electron 这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础: html + js + css 基础 熟悉nodejs基本api 有了以上基础
electron-vchat客户端聊天实例是基于electron+vue+vuex+Node+vue-router等技术开发的仿制微信pc桌面聊天项目。 034360截图20200108115113391.png 技术框架 框架技术:electron + electron-vue + vue 状态管理:Vuex 地址路由:Vue-router 字体图标: 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 electron主进程创建窗口 通过electron提供的BrowserWindow对象创建窗体,electron-vue构建项目后,主进程入口页面是src/main/index.js import electron实现自定义顶部最大/小化、关闭按钮、无外框窗口 electron 中配置 frame: false 后,就能去除原窗体顶部,原先的顶部操作栏就没有了,需要自定义配置。
uni-app+uniCloud+electron 开发桌面端 摸索中… 摸不着头脑… 视频介绍https://www.bilibili.com/video/BV18q4y1i7x3? spm_id_from=333.999.0.0 实现了 开发 打包 基本功能 正常开发uni-app应用一样的流程 仓库地址 uni-app+electron+uniCloud 仓库地址 https:/ /gitcode.net/qq_42027681/uniApp-electron 另外一种使用 云函数 url化的 vite+vue3+electron+uniCloud 仓库地址 https://gitee.com /dmhsq/vite-vue3-electron-uni-cloud 代码结构 electron目录存放 electron的main.js 其它和uni-app一样 开发模式 HB 运行到浏览器
vite+vue3+electron桌面端开发 ps :踩坑踩了一个多小时 如果嫌麻烦可以直接拿走用 克隆代码仓库 1.https://gitee.com/dmhsq/vue3-vite-electron https://gitee.com/dmhsq/vue3-vite-electron.git 2.https://github.com/promiseHusky/vue3-vite-electron https://github.com/promiseHusky/vue3-vite-electron.git 同样你也可以使用脚手架 来快速的创建 还没写完 先用着仓库的吧 效果如下 这是打包生成的 [ 生成的logo像素至少为 256x256否则会在打包的时候报错 开发注意 因为这里使用的是高版本electron 如果你想在 vue文件中 引入remote 需要安装一个依赖包 @electron '); const isDev = require('electron-is-dev'); const AppWindow = require('.
之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron / dooring-electron的技术栈笔者使用的是: koa2 + electron + react + umi3 接下来我将给大家介绍如何学习使用dooring-electron. dooring-electron 如何快速学习electron 这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础: html + js + css 基础 熟悉nodejs基本api 有了以上基础
vite+react-ts+electron 开发桌面端 代码仓库 https://gitee.com/dmhsq/react-ts-vite-electron https://github.com/promiseHusky /react-ts-vite-electron vite搭建项目 npm init vite@latest my-electron 选择 react-ts 安装依赖包 npm i concurrently electron cross-env -D 创建main.js const { app, BrowserWindow } = require('electron'); class AppWindow 'closed', () => { mainWindow = null; app.quit(); }); }); 配置package.json文件 { "name": "my-electron main.js 复制资源(logo.ico) 打包 electron 使用electron-builder [在这里插入图片描述]
于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。经过网上查阅,比较成熟的解决方案很多,比如electron,nw.js等等。 打包桌面端,跟前端框架无关,只是想夸一下vue在构建项目上的体验真的好,简单方便,会以yes or no的形式让你完成一个主流的前端框架(回想以前构建angular应用,还要打开help,看一大堆api cnpm,npm太慢了 npm start 项目跑起来之后,不出意外就出现了electron的桌面端页面,看了下其中的入口文件main.js mainWindow.loadURL(url.format pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) 这段代码就是配置桌面端应用的入口 总结 至此,vue打包桌面端就这样完成了。在此过程中,发现自己做东西还是有些武断,太想当然了,导致在一些弯路里绕了很久。以后还是要多看文档,稳扎稳打!
for OpenHarmony Electron 项目在“鸿蒙端”与“桌面端”运行的区别 我们以一个真实案例来对比: 案例:一个“跨设备搜索”鸿蒙应用 功能描述 用户在手机上点击“搜索”,触发以下逻辑 桌面端预览。 真机 / DevEco) Electron 桌面端(仿真器) 运行环境 HarmonyOS 内核 + ArkTS + WebKit Electron(Chromium + Node.js) API 来源 ('真实设备ID:', id)); // Electron 桌面端(模拟) window.harmony.deviceInfo.then(info => { console.log('模拟设备:' 场景 鸿蒙端 Electron 桌面端 UI 适配验证 ❌ 需真机测试 ✅ 支持多分辨率切换 业务逻辑联调 ⚠️ 依赖真机部署 ✅ 即时反馈,无需编译 分布式通信测试 ✅ 真实软总线 ✅ 模拟软总线(
桌面应用的转化在未来是客服产品的方向。 已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战 在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题 Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下: 渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome
Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。 Electron官网上说:“比你想象的更简单”————“如果你可以建一个网站,你就可以建一个桌面应用程序。 /" 配置完下载源后,就可以安装 electron 了 安装Electron yarn add -D electron electron-builder rimraf vite-plugin-electron 的库,关于这个插件可以参见 Vite 与 Electron 无缝衔接 electron-devtools-installer:electron 开发工具 vite-plugin-electron 插件是将 打开后就是正常的软件界面 我们创建好了项目结构,那么在使用 Vue 开发 Electron 桌面应用的时候还有一个比较重要的知识点要了解,就是消息通信。
桌面应用的转化在未来是客服产品的方向。已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下:渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome
桌面应用的转化在未来是客服产品的方向。已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下:渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome
Vue3.x版本 git clone https://github.com/dmhsq/electron-vue3-dmhsq.git 目录说明 electron文件夹控制桌面端的运行打包 其余均为 vue目录 electron/main.js 桌面应用主程序 electron/main.js 桌面应用渲染程序 electron-vue-dmhsq 如果您只是想打包vue项目成exe npm electron npm run builds 打包的文件在electron下 热开发页面 npm run build 执行完成后 开启额外的控制台 cd electron npm run serve 热开发electron npm run builds 执行完成后 开启额外的控制台 cd electron npm run serve 打包electron应用 最终打包需要删除electron/main.js 开发electron(暂未实现热更新 毕竟需要重启app后面会想想办法) 在 electron/mian.js中可以增加额外窗口 和win交互等等 electron开发请参考官方文档 https:/
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 electron 这里我是使用的全局 $ sudo cnpm install -g electron 创建应用 一个 Electron 应用的目录结构大致如下: myapp/ ├── package.json ├── main.js └── index.html main.js" } } main.js const {app, BrowserWindow} = require('electron'); const path = require('path' ,然后运行 $ electron . "scripts": { "start": "electron main.js" } 所以也可以使用 npm 来运行 $ npm install $ npm start
这次带来全新跨平台electron31.x+vue3+vite5+element-plus仿微信电脑端聊天程序。 vite5-electron-wechat项目采用最新版跨端技术electron31结合vite5.x开发桌面端聊天框架。 插件:vite-plugin-electron^0.28.7electron-vtechat项目支持新开多个窗口。 打包构建配置打包是通过electron-builder插件,在项目根目录新建一个electron-builder.json打包配置文件。 ${ext}" }}综上就是electron31+vue3开发桌面端聊天项目的一些分享,希望对小伙伴们有些帮助!
Electron 基于 Chromium 和 Node.js, 可以理解为在软件中打包了一个浏览器以支持运行桌面应用,用开发web的方式进行开发,跨平台兼容 1环境搭建 1.1 先全局安装脚手架 (如已经安装,可以跳过) npm install -g electron npm install -g electron-forge (安装electron-forge模板) 1.2 用模板 创建项目 electron-forge init notepad(项目名) 1.3 安装依赖 (安装依赖时建议使用cnpm淘宝镜像 npm会有访问外国网站被卡) cd notepad npm install 1.4 运行 electron-forge start或 npm start 2.打包exe
经过半个月爆肝实战开发,原创新作electron31+vue3跨平台桌面权限管理系统正式完结啦~electron31-viteadmin内置4种通用布局模板,支持i18n国际化、动态路由权限。 vite5-electron-admin整合vitejs+electron跨平台技术。实现常用的表格、表单、图表、列表、编辑器等业务场景。 使用技术编码工具:vscode技术框架:vite^5.3+vue^3.4+vue-router^4.4跨平台技术:electron^31.3.0UI组件库:element-plus^2.7.8状态管理: Electron主进程模块/** * electron主线程配置 * @author andy */import { app, BrowserWindow } from 'electron'import +vue3开发桌面端后台管理系统的一些分享,希望对大家有所帮助。
前端时间我的一个朋友为了快速熟悉 Vue3 开发, 特意使用 electron+vue3+ts 开发了一个桌面端应用, 并在 github 上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末尾我会放 image.png 技术栈 以上是我们看到的便签软件使用界面, 整体技术选型如下: 脚手架 vue-cli 前端框架和语言规范 vue + typescript 桌面端开发框架 electron electron /[3] electron-vue里面的包环境太低了,所以是手动配置electron+vue3(虽然说是手动。。 的依赖 # yarn yarn add vue-cli-plugin-electron-builder electron # npm 或 cnpm npm i vue-cli-plugin-electron-builder electron:build", "electron:serve": "vue-cli-service electron:serve" } 配置入口文件background.ts 因为需要做一些打开和关闭的动效
本文目录: 前言js启动python创建python文件在index.js中调用python参考一番今日 前言 前面我们实践了用electron-vue和element-ui的开发环境搭建,实现了一个入门 demo,知道了怎么让这个程序运行起来,今天我们来探究下如何用electron里的js主程序调用python程序。 pyProc = null pyPort = null } app.on('ready', createPyProc) app.on('will-quit', exitPyProc) 参考 electron