Electron的快速入门

已于 2022-10-18 10:50:08 修改
阅读量282 收藏
点赞数
分类专栏： Electron 文章标签： electron 前端 javascript
于 2022-06-28 11:22:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheLongir/article/details/125496029
版权

文档背景

最近需要自制一款客户端应用程序,学习一下electron开发客户端程序是非常有必要的。

1、入门Demo

1.1、创建项目

使用脚手架创建项目

  • 使用npm创建
//创建目录
mkdir my-electron-app && cd my-electron-app
//在该目录下 初始化项目
npm init
  • 使用yarn创建
mkdir my-electron-app && cd my-electron-app
yarn init

1.2、下载依赖

cnpm install --save-dev electron

1.3、目录结构

在这里插入图片描述

1.4、完整代码

index.html

<!--index.html-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
</head>

<body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- 您也可以此进程中运行其他文件 -->
        <script src="./renderer.js"></script>
</body>

</html>

main.js

// main.js

// Modules to control application life and create native browser window
const {
    app,
    BrowserWindow
} = require('electron')
const path = require('path')

const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    // 加载 index.html
    mainWindow.loadFile('index.html')

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。

package.json

{
  "name": "vdclent-app",
  "version": "1.0.0",
  "description": "demo",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "thelongi",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.64",
    "electron": "^19.0.6"
  },
  "dependencies": {}
}

proload.js

// preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

1.5、启动项目

npm start

2、快速开发

克隆到本地

git clone https://github.com/electron/electron-quick-start

下载依赖 运行项目

cd electron-quick-start
npm install
npm start

Tip：如果下载过慢则在目录根路径下添加.npmrc文件。
编辑内容：加上electron_mirror=https://npm.taobao.org/mirrors/electron/ 即可

3、打包出现的问题

打包可能会出现下载对应的插件下载不到就无法打包了。怎么做呢？
我们来番一下茄。就可以下载了。如果不行就直接去对应官网上下载，然后放在文档说明的文件夹里。

在这里插入图片描述

TheLongir
关注
专栏目录
5分钟 electron 入门
阿城的博客
03-05 1367
在某些与沙盒不兼容的使用情况下（例如，在渲染器中使用原生的 Node.js 模块时），可以禁用特定进程的沙盒。因为预加载脚本与浏览器共享同一个全局 Window 接口，并且可以访问 Node.js API，所以它通过在全局 window 中暴露任意 API 来增强渲染器，以便你的网页内容使用。因为是个阉割版，所以这个想法是行不通的。Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境，这意味着它具有 require 模块和使用所有 Node.js API 的能力。
Electron快速入门------构建桌面应用程序
leemboy的博客
12-02 2498
Electron简介： Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。 PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适用哪个。 对于Web应用： 优点： 部署、升级方便。用户通过浏览器就可以访问； HTML/JS/CSS编写，方便且高效； windows、linux都支持； Electron环境...
Electron快速入门
路漫漫其修远兮，吾将上下而求索
06-29 3805
Electron是由GitHub众多开发者开发的一个开源项目，能够使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。当然了，它也可以与vue和react相结合。前端的小伙伴们，学习它应该很快，是很容易上手的一门技术。文档编写不易，还请各位耐心观看。另外本人能力有限，如有不足之处，还请不吝批评指正！Electron 运行的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
Electron快速上手
最新发布
m0_56772756的博客
08-30 1448
一款应用广泛的跨平台的桌面应用开发框架。Electron的本质是结合了 Chromium 与Node.js。使用HTML、CSS、JS 等Web技术构建桌面应用程序。.vue,.tsx,.less,.ts也可以使用。
electron (一) 快速入门
Lc_style的博客
05-20 352
官方文档：https://electronjs.org/docs 一、安装配置 1、为你的应用创建一个新的空文件夹 Electron 2、打开你的命令行工具，从该文件夹运行 npm init 会帮助你创建一个基本的 package.json 文件 3、安装electron npm install --save-dev electron 4、项目根目录新建main.js文件（入口文件） const { app, BrowserWindow } = require('electron') function
electron快速入门
tq1711的博客
10-23 299
electron 简介 electron是一款可以使用JavaScript,HTML,CSS来构建跨平台app的开源框架 electron 官方入门demo 如果你想尝试electron,那么官方domo( electron-quick-start)是一个不错的选择 # Clone this repository git clone https://github.com/electron/electron-quick-start # Go into the repository cd electron-qu
Electron 快速入门
Quincylk的专栏
10-16 992
原文：http://www.jianshu.com/p/591fa0c313fe 快速入门 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。 这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用
electron-quick-start-master 快速入门教程
05-31
electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程...
Electron基础入门教程
10-26
**Electron基础入门教程概述** Electron是一款开源框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。这个基础入门教程针对初学者，旨在教会那些对Electron不熟悉的开发者如何从...
electron入门心得
01-27
上手electron，官方提供了一个非常好的快速上手实例。这个仓库给我们初始化了一个electron项目，结构非常纯净，克隆下来你就可以直接改造成自己的项目。 国内也有翻译版的API文档，但是不能保证是最新的，使用时...
electron入门篇
02-27
9. **社区与资源**：Electron有一个活跃的开发者社区，提供了大量的教程、示例代码和第三方库，如`electron-react-boilerplate`、`electron-vue`等，帮助开发者快速上手。 10. **安全考虑**：由于Electron应用可以...
electron 中文教程
05-01
常见问题 Introduction 1.1 Electron 常见问题 1.2 向导 支持平台 2.1 分发应用 2.2 提交应用到 Mac App Store 2.3 打包应用 2.4 使用 Node 原生模块 2.5 主进程调试 2.6 使用 Selenium 和 WebDriver 2.7 使用开发人员工具扩展 2.8 使用 Pepper Flash 插件 2.9 使用 Widevine CDM 插件 2.10 教程 快速入门 3.1 桌面环境集成 3.2 在线/离线事件探测 3.3 API文档 简介 4.1 进程对象 4.2 支持的 Chrome 命令行开关 4.3 环境变量 4.4 自定义的 DOM 元素: File 对象 5.1 webview 标签 5.2 window.open 函数 5.3 在主进程内可用的模块: app 6.1 autoUpdater
Electron开发之——快速入门
我的博客
12-13 1250
一 概述 Electron是一个可以使用Web技术如：JavaScript、HTML和CSS来创建跨平台原生桌面应用的框架。借助Electron，我们可以使用纯JavaScript来调用丰富的原生APIs Electron用Web页面作为它的GUI，而不是绑定了GUI库的JavaScript。它结合了Chromium、Node.js和用于调用操作系统本地功能的APIs(如打开文件窗口、通知、图标等) 二 准备材料 开发电脑：Windows10 Node：16.13.1 Npm：8.1.2 三 ele
手把手带你快速入门Electron
Ned的CSDN博客
07-26 429
Electron写一个自己的桌面应用真的好shuai最近在整活了，可能后续真的会出一个electron的实战系列吧，也是对自己学习实践过程的一个总结，那还请敬请期待我是Ned一个被疫情耽误了好几年的、即将大四了的大学生。关注我，一起努力学习吧！前端成长日记里找到我~...
Electron开发入门
Nico专栏
06-05 1477
前记： Electron是笔者最近才开始接触的Node中的一个模块，大致功能是将Node.js的环境搬至桌面程序开发中，也就是说我们可以通过Node.js去开发桌面程序，最终打包成exe可执行文件。因为之前笔者一直从事Java开发，对Node了解甚少，所以并不清楚实现这种功能是不是特别难，但是Electron的作者的实习经历及Electron目前所获得的成就（GitHub 60k+的Star）让...
Electron 开发入门
kunkliu的博客
12-31 5448
课程亮点 剖析 Electron 从安装到发布的整个流程使用 Git 管理 Electron 应用源代码使用 C++ 开发 Electron 本地模块知识点 + 示例 + Electron 3.0 源代码 课程背景 Electron 允许使用 Web 技术（HTML5、CSS3、JavaScript）开发跨平台桌面应用，这对 Web 前端和 Node.js 开发者是一大福音，因为从此又多了一项技能。目前已经有很多著...
【Electron】Electron入门实现
Python、Golang、大数据
06-27 1374
Electron是一个开源框架，允许开发者使用网页技术来构建跨平台的桌面应用程序。它由GitHub开发并维护，最初是为了支持开发Atom编辑器。Electron结合了Chromium（用于呈现网页内容）和Node.js（用于与操作系统交互），因此开发者可以利用大量现有的网页开发技术和工具来构建桌面应用。
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
宝码香车的博客
07-16 8100
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron开发入门与实战指南
二、快速实现一个Electron应用 - 初始化项目：通常使用Electron官方提供的模板或脚手架工具。 - 设置启动脚本：定义应用启动时执行的JavaScript代码。 - 创建HTML模板文件：构建用户界面。 - 设置启动脚本：连接HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值