Electron 入门指北(一)

最新推荐文章于 2024-08-24 10:15:01 发布
转载 最新推荐文章于 2024-08-24 10:15:01 发布 · 160 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5ac0580b6fb9a028d5673d51
文章标签：

#javascript #git #前端 #ViewUI

本文介绍Electron框架，一种使用Web技术构建跨平台桌面应用的方法。文章涵盖了Electron的基础概念、为何选择Electron以及如何开始使用它。通过示例项目，读者可以了解其核心功能，并学习在墙内环境下如何配置开发环境。

What is Electron?

相信这张图就很充分的说明What is Electron. 官网链接 Electron 是使用web页面作为 GUI 页面的一个 Chromium 的浏览器,所以你不必拘泥于GUI页面的框架, Node.js提供了Electron与系统API交互的方式,这是它与普通 web程序最大的不同.

Why use Electron?

  • 跨平台
  • 桌面应用
  • 前端较低技术难度的技术栈以及丰富的脚手架工具

How about Electron?

看到这几个项目是不是对Electron有了些信心.

How to start?

npm && Node.js

npm是Node.js的包管理工具（package manager）,在你安装 Node.js 的时候就会安装好. Node.js 提供了控制 window和系统 API 的接口. 官网链接

墙内环境

由于 npm 被墙导致的不稳定性,强烈建议使用淘宝的cnpm 镜像来替代npm. 淘宝镜像地址,懒得看直接可以 cmd+c/v

npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
复制代码
安装 Electron
npm install electron --save-dev --save-exact
复制代码

如果有网络问题,请使用淘宝镜像.

Demo

到这一步安装已经完成, 建议使用官方推荐的 api-demo测试. 链接

git clone https://github.com/electron/electron-api-demos
cd electron-api-demos
npm install
npm start
复制代码

Let's start Electron!

综合一
刘群智的博客
07-27 4468
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： <div id="outer">   <div id="sidebar" style="height:240px;">固定宽度区</div>   <d
学生党技术博客&公众号第1月总结：收入|学习|定位规划|是否该接广告？
记录学习痕迹的公众号：Piper蛋窝
11-20 2349
简介：身为一名在读学生，我认真经营公众号已一个月有余。本文对这一个月公众号文章质量与内容、公众号收入等方面进行了总结，还结合了自己的老本行「经济管理」，探讨了『优秀的公众号，该接广告吗？』此外，我总结了自己的收获，对公众号与学习生活进行了规划。希望能给你带来不一样的、有参考意义的人生视野。
electro-is：Electron的“ is”实用程序，提供一组便捷功能，带有自描述名称
02-04
电子是 Electron的“ is”实用程序。 electron-is提供了一组同构的“ is” API，您可以在主过程和渲染过程中使用它。 有关更多信息，请参见。 安装 $ npm install electron-is --save API is.renderer（） 如果从渲染器进程调用函数，则返回true 。 is.main（） 如果从主进程调用该函数，则返回true 。 is.macOS（）别名is.osx（） 如果您的应用程序在Mac OS上运行，则返回true 。 is.windows（） 如果您的应用程序在Windows操作系统下运行，则返回true 。 is.li
【译】Electron 的本质
weixin_34234721的博客
11-16 512
本文翻译自 http://jlord.us/essential-ele... 本文将简明扼要地讲解 Electron。 Background Development Development Con't What is Electron Prereqs Stay in touch Why is this important ...
is-electron项目教程
gitblog_00726的博客
08-24 576
is-electron项目教程 1. 项目目录结构及介绍 is-electron是一个简单的Node.js模块，用于检测当前环境是否在Electron应用程序中运行。虽然这个项目相对简单，但了解其基本结构对于贡献或使用它仍然是有益的。 index.js 或 src/index.js: 这是主要的入口文件，实现了检查功能的核心逻辑。 package.json: 该项目的心脏，定义了项目元数据，包括...
is-electron:检测是否在Electron中运行
05-03
等电子 检测是否在Electron中运行。 安装 npm install --save is-electron 用法 import isElectron from 'is-electron' ; console . log ( isElectron ( ) ) ; 执照 版权所有（c）2016 Cheton Wu 根据。
electron-paint:这是在electron.js中制作的一个简单的绘画程序
05-09
电子漆 这是在electron.js中制作的一个简单的绘画程序
【从零到一】：创建并优化你的第一个Mxd文档加载器
[【从零到一】：创建并优化你的第一个Mxd文档加载器](https://cdn.educba.com/academy/wp-content/uploads/2020/06/Python-OS-Module.jpg) # 摘要 本文系统地介绍了Mxd文档加载器的设计与开发，阐述了其概念和必要...
Electron笔记
hello_list的博客
03-25 2465
electron详细学习笔记
【强烈推荐】程序员平时使用最多的绘图软件之一！！！
秦怀杂货店
02-27 2231
draw.io 之前画图一般都是使用processOn（https://www.processon.com/）,缺点就是只能通过网站画图，并且存在云端，不花钱想白嫖，只能画几张。 像我这种家庭条件，怎么用得起，而且我喜欢把东西存在自己的机器上，最好能有客户端，还能自己传到自己的存储上。 于是，我在github上找了draw.io客户端，其实也是有网页版的： 客户端github地址： https://github.com/jgraph/drawio-desktop 下载地址： https://github
用electron开发的图形界面PNG图片压缩工具
08-11
这是个用 electron 开发的图形界面 PNG 图片压缩工具。支持无损压缩和有损压缩。
【一款开源免费、实测好用的画图软件】
乐观的小熊
07-26 723
一款开源免费、实测好用的画图软件
Electron 入门指北(三)
weixin_34396103的博客
05-15 191
在之前的两篇文章中了解了Electron的基本概念,但是没有说到具体怎么去写一个 Electron页面,这次记录下The fist electron page 的诞生. Part 1 ELectron中的每个页面都在自己的的进程中运行,这个进程就是渲染进程.而 ELectron 中的每个网页就是普通前端页面,所以技术上有很多可选项,而我选择的Vue. Vue 对大部分移动端开发来说可能是仅仅听过,...
一个基于electron自动化桌面应用-流程图构建
weixin_42429220的博客
01-28 623
<Card<p className="wrap-txt">打开页面：{data.url}</p>{/* <span>下一步</span> */}</Card>
Electron + Vue跨平台应用（十一）可视化（二）
yi_master的博客
04-28 1178
Electron + Vue + Vscode构建跨平台应用（一）知识点补充 Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建 Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目 Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解 El...
(转)Android电子白板实现，Canvas画布
weixin_34297704的博客
07-17 864
前一阵子做了一个项目，里面有用到画板，在手机上画图，类似一个电子白板，画出曲线，圆，矩形。。 后来查了资料，看了些大神的博客 单独优化出了一个小程序，在原来基础上新增了橡皮檫功能，画出的图形可以是曲线，直线，矩形，正方形，圆，椭圆，也可以筛选相册图片显示到画板， 画图的同时更改画笔的颜色 基本思路是在画板上确认两个点，一个起点，一个终点，根据选择的图形样式，拖动的时候有预览图形，松...
Electron详解（一）：基本介绍
热门推荐
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
06-06 1万+
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScript来创建桌面应用程序。Electron通过集成浏览器内核，使用Web技术来实现不同平台下的渲染，并结合了 Chromium、Node.js 和用于调用系统本地功能的Native API 三大板块。
electron-vue结合highcharts实现数据可视化
认定的总要想办法去完成。
10-20 3721
electron实现数据可视化  这里我们主要介绍elctron-vue结合highcharts实现数据可视化，在这里给贴出传送门highcharts在github中的地址 npm下载 在这里插入代码片
使用Electron打造跨平台桌面应用
晴树的专栏
05-07 4758
https://uinika.github.io/web/server/electron.html 早期桌面应用的开发主要借助原生 C/C++ API 进行，由于需要反复经历编译过程，且无法分离界面 UI 与业务代码，开发调试极为不便。后期出现的 QT 和 WPF 在一定程度上解决了界面代码分离和跨平台的问题，却依然无法避免较长时间的编译过程。近几年伴随互联网行业的迅猛发展，尤其是 NodeJS...
electron入门
最新发布
04-16
### Electron框架入门教程 #### 什么是Electron？ Electron 是一个用于构建跨平台桌面应用程序的开源框架，它允许开发者利用 JavaScript、HTML 和 CSS 创建原生桌面应用。通过嵌入 Chromium 和 Node.js，Electron 可以让开发者仅维护一套基于 Web 的代码库，从而实现跨 Windows、macOS 和 Linux 平台的应用程序开发[^3]。 --- #### 安装与环境准备 要开始使用 Electron，首先需要安装 Node.js 和 npm（Node Package Manager）。可以通过以下命令验证是否已正确安装： ```bash node -v && npm -v ``` 如果尚未安装，请访问官方页面下载最新版本：[Node.js官网](https://nodejs.org/)。 接着，在项目目录下初始化一个新的 Node.js 应用程序，并安装 Electron： ```bash npm init -y npm install electron --save-dev ``` 上述操作会创建 `package.json` 文件并将 Electron 添加到项目的依赖项中[^1]。 --- #### 基本结构 一个典型的 Electron 应用通常包含以下几个文件： - **main.js**: 这是主进程脚本，负责管理窗口和操作系统之间的交互。 - **index.html**: 渲染界面的内容。 - **renderer.js (可选)**: 渲染进程中使用的逻辑脚本。 下面是一个简单的示例配置： ##### main.js 这是主进程的核心部分，定义了如何启动和关闭应用程序以及创建浏览器窗口。 ```javascript const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadFile('index.html'); } app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` ##### index.html 这是一个基本的 HTML 页面，作为应用的主要视图。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Electron App</title> </head> <body> <h1>Hello from Electron!</h1> <p>This is a basic example of an Electron application.</p> </body> </html> ``` --- #### 启动应用 完成以上设置后，可以在 `package.json` 中添加一条启动脚本来简化流程： ```json { "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." } } ``` 随后运行以下命令来启动您的第一个 Electron 应用： ```bash npm start ``` 这将会打开一个带有自定义内容的新窗口[^2]。 --- #### 使用 electron-vite 加速开发 对于希望提升性能和体验的开发者来说，可以尝试使用 electron-vite 工具链。该工具旨在提供更快、更精简的开发体验，主要分为五个模块化组件进行优化[^2]。以下是其快速搭建方法： ```bash npm create vite@latest my-electron-project --template vanilla cd my-electron-project npm install electron @electron/vite-plugin-main-process-renderer ``` 更多细节请参考官方文档或相关资源链接。 --- 问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值