前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Electron以慢著称,为什么桌面QQ却选择它做架构升级?跟着大厂玩(electron-egg)

Electron以慢著称,为什么桌面QQ却选择它做架构升级?跟着大厂玩(electron-egg)

原创
作者头像
杨不易呀
修改2023-11-16 16:40:26
2.4K9
修改2023-11-16 16:40:26
举报
文章被收录于专栏:杨不易呀杨不易呀

前言

在不久之前我看到了腾讯云社区发布了一条文章,里面写着 QQ 重构? 我就点去看看用的啥技术结果是 Electron 这个我见到过一直想玩玩桌面应用,

正巧我在逛 dromara 开源社区的时候看到了一个开源框架

egg
egg

它是一个入门简单、跨平台、企业级桌面软件开发框架 我滴妈完美适合我这种前端小白选手 😍

📋 介绍

在 Gitee 已经获得 4K+的 stars 强横来袭!
框架已经广泛应用于记账、政务、企业、医疗、学校、股票交易、ERP、娱乐、视频等领域客户端,请放心使用!
  • 🍩 为什么使用? 桌面软件(办公方向、 个人工具),仍然是未来十几年PC端需求之一,提高工作效率
  • 🍉 简单: 只需懂 JavaScript
  • 🍑 愿景: 所有开发者都能学会桌面软件研发

📦 特性

它拥有完美的生态

  1. 🍄 跨平台:一套代码,可以打包成windows版、Mac版、Linux版、国产UOS、Deepin、麒麟等
  2. 🌹 架构:单业务进程/模块化/多任务(进程,线程,渲染进程),让开发大型项目变的简单。
  3. 🌱 简单高效:只需学习 js 语言
  4. 🌴 前端独立:理论上支持任何前端技术,如:vue、react、html等等
  5. 🍁 工程化:可以用前端、服务端的开发思维,来编写桌面软件
  6. 🌷 高性能:事件驱动、非阻塞式IO
  7. 🌰 功能丰富:配置、通信、插件、数据库、升级、打包、工具... 应有尽有
  8. 💐 安全:支持字节码加密、压缩混淆加密
  9. 🌻 功能demo:桌面软件常见功能,框架集成或提供demo

✈️ 使用场景

🚀 常规桌面软件

它支持

🚖 windows平台

🚍 macOS平台

🚔 linux平台 - 国产UOS、Deepin

🚔 linux平台 - ubuntu

下面我使用了 MacOs M1 芯片启动的桌面应用

🖼️ 展示

🚐 前端项目转换成桌面软件

支持项目转换和 web 地址直接访问真滴舒服

🚙 vue-ant-design(本地)

🚙 禅道项目管理(web项目地址)

🎮 游戏(h5相关技术开发)

完美支持 H5

看到这里了心动不 我反正是激动哈哈哈冲冲冲开始玩

🎉🎉🎉 ElectronEgg 🎉🎉🎉

应用

前往码云 pull 代码

https://gitee.com/dromara/electron-egg

先进行 Fork 一份到自己仓库

fork 完毕复制自己仓库当中的 eeg 项目

我这边使用 WebStorm 工具进行开发

进行 git clone 克隆到我们电脑本地

准备

  • 推荐 node.js >= 16.20.0
  • 推荐使用 nvm 来管理 nodejs 版本

nvm安装

下载并安装 nvm

  • windows:

https://github.com/coreybutler/nvm-windows/releases

  • linux/macOS:

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

用nvm安装node.js

安装命令:

代码语言:javascript
复制
# 安装node.js版本
nvm install v16.20.0

使用指定版本的node.js: nvm use 版本号

代码语言:javascript
复制
nvm use 16.20.0

使用淘宝node镜像:nvm node_mirror

代码语言:javascript
复制
nvm node_mirror https://npmmirror.com/mirrors/node/

使用淘宝npm镜像:nvm npm_mirror

代码语言:javascript
复制
nvm npm_mirror https://npmmirror.com/mirrors/npm/

安装

进入根目录执行下载依赖

💫 运行项目

进入【前端目录】安装 frontend 依赖

执行: cd frontend && npm i

退回到根目录

注意⚠️: 新版本可同时启动 前端 & 主进程,也可以分开启动。

electron业务代码暂不支持热更(修改代码后需重新启动),如果前端启动时间长,则建议分开启动。

同时启动 frontend (UI) 、electron 两个服务。

npm run dev

分开启动 frontend (UI) 、electron 它会打开两个终端

npm run dev-frontend

npm run dev-electron

这里我就使用同时启动了

启动成功🏅️

点击 Get Started 将会弹出一个新的 窗口指向官方文档 前面说过这种就叫做 web项目地址

太牛了啊!

接下来我们进行体验打包成桌面软件后在移植我们自己的项目进去

体验转桌面软件

🪝构建

可以生成exe、dmg、deb可执行文件

我们先进行修改一下前端 demo 查看是否打包成功

修改 frontend/src/views/example/hello/Index.vue 文件

一、构建前端

如果直接进入 frontend 目录,去执行 npm run build 时 (没有经过ee-bin),process对象不包含renderer进程信息。这个后面再讲

在根目录 执行: npm run build-frontend

二、移动前端打包资源到框架当中

rd命令会把 frontend/dist 复制到 /public/dist ; 服务最终加载的是 /public/dist前端资源。

frontend目录代码不会被打包,防止源码泄露。

在根目录 执行: npm run rd

三、预发布模式,测试一下功能是否正常 (prod环境)

在根目录 执行: npm run start

📦 打包

在打包之前我们可以前往 builder.js进行修改软件名称窗口名称等我们就不修改了直接冲冲冲!

命令

代码语言:javascript
复制
npm run build-w
npm run build-w-32 (32位)
npm run build-w-64 (64位)
npm run build-w-arm64 (arm64)
代码语言:javascript
复制
# ee > v2.2.1
npm run build-wz
npm run build-wz-32 (32位)
npm run build-wz-64 (64位)
npm run build-wz-arm64 (arm64)
代码语言:javascript
复制
npm run build-m
npm run build-m-arm64 (m1芯片架构)

我是 mac 版本我就直接打 mac 了

⚠️注意 这里是 Mac Os Arm 架构命令

在根目录 执行: npm run build-w-arm64

打包成功! 成功打包 windows 程序和 mac 程序

我前面打错了打了个 wind 的哈哈哈哈

测试

我是原本就打包了一个程序所以我就去 builder.js 当中修改了下打包名称

直接进行安装 打开软件 完美运行✅

这个框架是真的强横完美实现了小白都可以玩的理念!


输入图片说明
输入图片说明

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 📋 介绍
  • 📦 特性
  • ✈️ 使用场景
    • 🚀 常规桌面软件
    • 🖼️ 展示
      • 🚐 前端项目转换成桌面软件
        • 🚙 vue-ant-design(本地)
        • 🚙 禅道项目管理(web项目地址)
        • 🎮 游戏(h5相关技术开发)
    • 🎉🎉🎉 ElectronEgg 🎉🎉🎉
    • 应用
      • 准备
        • nvm安装
          • 下载并安装 nvm
          • 用nvm安装node.js
      • 安装
        • 💫 运行项目
          • 启动成功🏅️
            • 🪝构建
        • 体验转桌面软件
          • 📦 打包
          • 测试
          • 最后
          相关产品与服务
          项目管理
          CODING 项目管理(CODING Project Management,CODING-PM)工具包含迭代管理、需求管理、任务管理、缺陷管理、文件/wiki 等功能,适用于研发团队进行项目管理或敏捷开发实践。结合敏捷研发理念,帮助您对产品进行迭代规划,让每个迭代中的需求、任务、缺陷无障碍沟通流转, 让项目开发过程风险可控,达到可持续性快速迭代。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档