在 上一篇(你不知道的 Electron (二):了解 Electron 打包) 中对 Electron 应用是如何被打包成可执行文件进行了简单的介绍,并且谈到了默认情况下打包存在的问题。
本文由 IMWeb 团队成员 laynechen 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 我们知道 Electron 提供了一个类似浏览器,但有更多权限的环境来运行我们的网页,那么 Electron 是怎么做到将我们的网页代码打包成一个可执行程序的呢? 这篇文章主要介绍如何打包 Electron 应用,以及分析 electron-builder 是如何对我们的应用进行打包的。 如何打包 Electron 目前有两种打包工具:electron-user
我们知道 Electron 提供了一个类似浏览器,但有更多权限的环境来运行我们的网页,那么 Electron 是怎么做到将我们的网页代码打包成一个可执行程序的呢?
插件官网地址: https://nklayman.github.io/vue-cli-plugin-electron-builder/
Electron的打包工具有很多,例如 electron-builder、electron-packager 或 electron-forge。这些工具可以帮助我们将 Electron 应用程序打包为可执行文件,并根据目标平台生成相应的安装程序或应用程序包。
对于 Pythoner 来说,能用 Python 生态内的库写程序,就坚决不用其他语言的库。
Electron 之所以能够日益风靡,是因为其简单易用且对各个操作平台具有良好的支持。
关于这个应用程序的开发,断更了很久,但是代码部分还算没落下吧,终于在周一、周二终把这个应用程序写完了。
在将 Electron 代码开发完成后,如果想要投入生产环境,那就必须经过很关键的一步——打包。
几周之前有开发一款vite5+vue3网页web版聊天项目ViteWchat。这次带来全新跨平台electron31.x+vue3+vite5+element-plus仿微信电脑端聊天程序。
前段时间有给大家分享一个Electron跨端仿QQ聊天,今天带来最新研发的Electron短视频|直播应用。
写这篇文章的时候已经是深夜十二点了,但是还是想写下来,因为我这个人有个毛病,就是当我发现一个新的好用的东西的时候常常会激动的睡不着觉,不记录下来根本睡不着,而且程序员晚睡不应该是标配吗?废话说了几句,说一下今天的主角,electron
Taro IDE 是一款我们正在精心打造的一站式移动端研发工作台。除了需要实现 Taro 从创建项目到预览、编译的全部能力,还需要打通用户测试、调试、监控等一系列流程。为了提升开发体验,仅仅一个命令行工具是远远不够的,我们需要开发一款桌面客户端,并同时提供 Windows、MacOS 等不同系统的版本。
Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。
从最开始我开始写文章就讲过Node.js与Java的优缺点,我当时说过,JAVA能做的如果非要使用Node.js最后肯定是能实现的,但是我们会考虑用什么更加适合。说到桌面应用程序,可能更多人会想到使用QT或者JAVA FX去实现,Node.js能实现桌面程序么?可能很多人对这个问题的答案抱着怀疑的态度。实际上Node.js现在生态圈越来越完善,所以用Node.js实际上可以非常轻松的架构一个桌面应用。今天我们来讲讲Node.js是如何构建一个桌面应用。
https://www.slimjet.com/chrome/google-chrome-old-version.php
早就听说利用Electron可以非常便捷的将网页端快速打包成桌面应用,并且利用 Electron 提供的 API 调用可以使用原生桌面 API 一些高级功能。于是这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
Electron安装安装问题npm或者yarn安装electron就算是配置了淘宝源还是会出现超时。所以我的解决方案是安装cnpm,使用cnpm去安装。 全局安装cnpm npm i cnpm -G 复制代码 新建项目 cnpm init // 一路Enter然后到最后一步输入yes // 安装dev相关依赖 cnpm i electron -D //安装electron cnpm i electron-builder -D // 用来打包客户端安装包 -- 需要下一步下一步安装来完成
TRTC Electron SDK 从 10.6.403 版本开始,支持构建 X64 和 ARM64 双架构包
以上是在说同级目录有index.js文件存在,需要更改electron主进程文件名。在开发过程中,dist_electron目录会生成两个文件:index.js和package.json,冲突就在这个文件夹,所以我们只需要把index.js文件名修改成background.js就可以了。
方式1适合单窗口的项目,注意一定不要创建多个窗口加载不同的路由,这样会特别的占用内存。
最近公司项目需求涉及到 electron 应用的标签页实现,所以找到了这个开源的页签实现方式。
社交魔方平台是京东的 SNS 活动搭建平台,其内置了很多模板,每一个模板都有一个模板 JSON 用于生成表单,运营同学、商家配置了这个表单后就可以生成活动页面了。模板 JSON 是标准的结构化数据,包含名称、类型、控件类型、校验器、默认值等等字段。以往都是采用手写 JSON 的方式,这是非常低效的,而且容易出错。针对其结构化数据的特点可以用 GUI 的方式去编辑,我们基于 Electron[1] 参考 Github Desktop 客户端[2] 的架构编写了一个 JSON 编辑器(参见下图),通过填写表单的方式生成 JSON。所以在这里记录下这个 Electron 编辑器开发过程中可以记录的点和从 Github Desktop 客户端代码中值得学习的点。
说起 Electron,大家能定不会感觉到陌生,庞大的体积,内置浏览器,Hello World 都有 200+M... 我个人是很反感跨段应用的,虽然对于开发来说,节省了很多时间,但是站在用户的角度来讲,体验就不是那么称心如意了。但是最近一些业务需要用到 Electron,折腾过程中也踩了不少坑,总结一下。
在上一节中我们介绍了如何升级 Electron 应用,现在我们已经介绍完了如何开发一个 Electron 应用以及如何把 Electron 应用分发给用户。如果按照一个产品的生命周期来考虑,那么我们现在面对的是如何观察、分析、调试线上应用了,如果你不了解 Electron 应用在用户侧的特征,那么就很难正确的分析线上应用的问题。
由于 Windows 和 Mac 原生的应用程序开发难度比较大,所以使用 Electron 版 TRTC 的能力就成了一个不错的选择。不过由于国内网络环境比较复杂,而 Electron 的很多开发资源由位于境外服务器上,所以很多客户在初次对接时会遇到很多的环境配置问题。
在处理线上问题的时候经常会遇到查询服务器日志的需求,需要手动连上服务器再去执行命令查看实时日志比较麻烦,经过一番搜索之后发现了 tailLog 项目,但是项目历史比较久远,使用的依赖已经是几年前的了,项目提供的打包命令只是打出了解压版的文件,离想要的安装包有一定距离所以决定做一下优化。
使用Electron进行打包通常会用到electron-builder或者electron-packager两种工具。在使用electron-builder的时候,由于对机制的不熟悉,我们在打包过程中常常遇到很多环境错误,但最终只是一些简单的错误信息,难以排查问题。本文将介绍electron-builder进行DEBUG输出的正确方式来帮助排查打包过程中的各种问题。
下面介绍一下使用electron-builder打包应用,如何加入license。首先参考官网介绍:windows:nsis[1],macOS:dmg[2]
安装64位的Electron也能打包32位的程序,但是为什么要安装32位的Electron?
最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服。之前我一直简单的以为electron只是张网页加个壳,和那些号称跨平台的运行在手机上的webapp是一个套路。直到我真的需要开发一个跨平台桌面应用的时候,我又认真的尝试了一下electron,我开始意识到:这才是我理想中的跨平台桌面应用开发的最终形态,它简直太优秀了。
代码签名的主要目的是为了确保软件的来源(这个软件是由谁生产的)和软件的内容不被篡改
在开始之前,我想您一定会有这样的困惑:标题里的Electron 是什么?Electron能做什么?许多伟大的公司使用Electron框架的原因又是什么?
版权声明:原创不易,多多珍惜 https://blog.csdn.net/wonaixiaoshenshen/article/details/88744534
Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目. 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
当项目打包成应用后使用的是 file:协议 ant pro 的请求无法发出 需要使用完整的请求地址 目前方法为配置前缀
最近一直学习electron25集成vite4.x技术开发跨端应用。就搭建了一个electron-chatgpt聊天EXE程序。
可以避免浏览器被误关闭,支持缩小在右下角系统托盘中,支持通知栏和声音访客新消息提醒
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 本篇说明: 今天我们将在前端开发中最为常见webpack加入到Electro
mac 升级了系统之后,之前的 electron 项目打包出现了异常,无法生成安装包:
electron-vue的打包 1.package.json加入以下代码 "scripts": { "build": "node .electron-vue/build.js && electron-builder", "build:dir": "node .electron-vue/build.js && electron-builder --dir", "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue
hello,好久不见,最近笔者花了几天时间入门Electron,然后做了一个非常简单的应用,本文就来给各位分享一下过程,Electron大佬请随意~
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 创建Vue基础项目: 我们通过VueCli(vue create electron-vue-
electron-log supports the following log levels:
看完以上介绍,也明白了本文要做的事:用 Vue.js 与 Vuetify 组件,基于 Electron 来创建原生桌面应用。
如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的开源框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。
领取专属 10元无门槛券
手把手带您无忧上云