electron基础入门

最新推荐文章于 2025-07-05 23:43:02 发布
原创 最新推荐文章于 2025-07-05 23:43:02 发布 · 1.7k 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#electron #javascript #前端

1. Electron是什么

Electron是一个跨平台桌面应用开发框架，开发者可以使用：HTML，CSS，JavaScript等Web技术来构建桌面应用程序，它的本质是结合了Chromium和Node.js，现在广泛用于桌面应用程序开发。

2. Electron 的优势

1. 可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。 2. 上⼿容易：使⽤ Web 技术就可以轻松完成开发桌⾯应⽤程序。 3. 底层权限：允许应⽤程序访问⽂件系统、操作系统等底层功能，从⽽实现复杂的系统交互。 4. 社区⽀持：拥有⼀个庞⼤且活跃的社区，开发者可以轻松找到⽂档、教程和开源库

3. Electron 技术架构

3.1. 技术架构

![](https://i-blog.csdnimg.cn/img_convert/e3ae2121c04a310b5ab89a1c31b74492.png)

3.2. 进程模型

![](https://i-blog.csdnimg.cn/img_convert/38d9162397e38eaac18383943bce1f17.png)

4. 搭建⼀个⼯程

● 初始化⼀个包，并提填写好 package.json 中的必要信息及启动命令。 
{
"name":"test",
"version":"1.0.0",
"main":"main.js",
"scripts": {
  "start": "electron ." //start命令⽤于启动整个应⽤
},
"author": "tianyu", //为后续能顺利打包，此处要写明作者。
"license": "ISC",
"description": "this is a electron demo", //为后续能顺利打包，此处要编写描述。
}

● 安装 electron 作为开发依赖。

npm i electron -D

● 在 main.js 中编写代码，创建⼀个基本窗⼝

/*
main.js运⾏在应⽤的主进程上，⽆法访问Web相关API，主要负责：控制⽣命周期、显示界⾯、控制渲染进程等其他操作
*/
const { app, BrowserWindow } = require('electron')

// ⽤于创建窗⼝
function createWindow() {
    const win = new BrowserWindow({ 
        width: 800, // 窗⼝宽度 height: 600, // 窗⼝⾼度
        autoHideMenuBar: true, // ⾃动隐藏菜单栏
        alwaysOnTop: true, // 置顶
        x: 0, // 窗⼝位置x坐标
        y: 0 // 窗⼝位置y坐标
    })
    // 加载⼀个远程⻚⾯
    win.loadURL('http://www.atguigu.com')
}

// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{ 
    createWindow()
})

关于 BrowserWindow 的更多配置项，请参考：BrowserWindow实例属性

● 启动应⽤查看效果

npm start

● 效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

**5.** 加载本地⻚⾯

● 创建 pages/index.html 编写内容： 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>index</title>

    </head>

    <body>
        <h1>你好啊！</h1>

    </body>

</html>

● 修改 mian.js 加载本地⻚⾯

// 加载⼀个本地⻚⾯
win.loadFile('./pages/index.html')

● 此时开发者工具会报出一个安全警告，需要修改index.html，配置CSP(Content-Security-Policy)

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; st yle-src 'self' 'unsafe-inline'; img-src 'self' data:;">

上述配置的说明

1. default-src __‘self’__****

default-src ：配置加载策略，适⽤于所有未在其它指令中明确指定的资源类型。

self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。

2. style-src ‘self’ 'unsafe-*****inline’__*****

style-src ：指定样式表（CSS）的加载策略。

self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。

unsafe-inline ：允许在HTML⽂档内使⽤内联样式。

3. img-src ‘self’ data:

img-src ：指定图像资源的加载策略。

self ：表示仅允许从同源加载图像。

data: ：允许使⽤ data: URI 来嵌⼊图像。这种URI模式允许将图像数据直接嵌

⼊到HTML或CSS中，⽽不是通过外部链接引⽤。

关于 CSP 的详细说明请参考：MDN-Content-Security-Policy、Electron Security

**6.** **完善窗⼝⾏为**

1,Windows 和 Linux 平台窗⼝特点是：关闭所有窗⼝时退出应⽤ 
// 当所有窗⼝都关闭时
app.on('window-all-closed', () => {
// 如果所处平台不是mac(darwin)，则退出应⽤。
    if (process.platform !== 'darwin') app.quit()
})

2,mac 应⽤即使在没有打开任何窗⼝的情况下也继续运⾏，并且在没有窗⼝可⽤的情况下激活应⽤时会打开新的窗⼝。

// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{ 
    createWindow()
    // 当应⽤被激活时
    app.on('activate', () => {
    //如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
    if (BrowserWindow.getAllWindows().length === 0)         createWindow()
    })
})

**7.** 配置自动重启

1. 安装 Nodemon 
npm i nodemon -D
  1. 修改 package.json 命令
"scripts": {
    "start": "nodemon --exec electron ."
},
  1. 配置 nodemon.json 规则
{
    "ignore": [ 
        "node_modules", 
        "dist"
    ],
    "restartable": "r", 
    "watch": ["*.*"],
    "ext": "html,js,css"
}

配置好以后，当代码修改后，应⽤就会⾃动重启了

**8.** 主进程与渲染进程

下图是 Chrome 浏览器的程序架构，图来⾃于[Chrome 漫画](https://www.google.com/googlebooks/chrome/)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Electron 应⽤的结构与上图⾮常相似，在 Electron 中主要控制两类进程：主进程、渲染器进程

8.1. 主进程

每个 Electron 应⽤都有⼀个单⼀的主进程，作为应⽤程序的⼊⼝点。 主进程在 Node.js 环境中运⾏，它具有 require 模块和使⽤所有 Node.js API 的能⼒，主进程的核⼼就是：**使用BrowserWindow来创建和管理窗口**

8.2. 渲染进程

每个 BrowserWindow 实例都对应⼀个单独的渲染器进程，运⾏在渲染器进程中的代码，必须遵守⽹⻚标准，这也就意味着：**渲染器进程无权直接访问 **`require`** 或使用任何 **`Node.js`** 的 **`API`

问题产⽣：处于渲染器进程的⽤户界⾯，该怎样才与 Node.js 和 Electron 的原⽣桌⾯功能进⾏交互呢？

**9.** Preload 脚本

预加载（Preload）脚本是运⾏在渲染进程中的， 但它是在**网页内容加载之前**执⾏的，这意味着它具有⽐普通渲染器代码更⾼的权限，可以访问 Node.js 的 API，同时⼜可以与⽹⻚内容进⾏安全的交互。

简单说：它是 Node.js 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.js 功能暴露给⽹⻚，从⽽减少安全⻛险。

需求：点击按钮后，在网页呈现当前的 Node 版本。

具体⽂件结构与编码如下：

  1. 创建预加载脚本 preload.js ，内容如下：
const {contextBridge} = require('electron')

// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('myAPI',{ 
    n:666,
    version:process.version
})
  1. 在主线程中引⼊ preload.js
const win = new BrowserWindow({
    webPreferences:{
        preload:path.resolve(	dirname,'./preload.js')
    }
})
  1. 在 html ⻚⾯中编写对应按钮，并创建专⻔编写⽹⻚脚本的 render.js ，随后引⼊。
<body>
    <h1>你好啊！</h1>

    <button id="btn">在⽤户的D盘创建⼀个hello.txt</button>

    <script type="text/javascript" src="./render.js"></script>

</body>
  1. 在渲染进程中使⽤ version
btn.addEventListener('click',()=>{ 
    console.log(myAPI.version)
    document.body.innerHTML += `<h2>${myAPI.version}</h2>`
})
  1. 整体⽂件结构如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

10.进程通信（IPC）

> 值得注意的是： > > 上⽂中的 `preload.js` ，⽆法使⽤全部 `Node` 的 `API` ，⽐如：不能使⽤ `Node` 中的 `fs` 模块，但主进程（ `main.js` ）是可以的，这时就需要_**进程通信**_了。简单说：要 > > 让 `preload.js` 通知 `main.js` 去调⽤ `fs` 模块去⼲活。 >

关于 Electron 进程通信，我们要知道：

● IPC 全称为： InterProcess Communication ，即：进程通信。

● IPC 是 Electron 中最为核⼼的内容，它是从 UI 调⽤原⽣ API 的唯⼀⽅法！

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传Electron 中，主要使⽤ ipcMain 和 ipcRenderer 来定义“通道”，进⾏进程通信。

**10.1.** 渲染进程➡️主进程（单向）

概述：在$ {\color{red}渲染器进程} $中 [ipcRenderer.send](https://www.electronjs.org/zh/docs/latest/api/ipc-renderer) 发送消息，在$ {\color{red}主进程} $中使⽤ [ipcMain.on](https://www.electronjs.org/zh/docs/latest/api/ipc-main) 接收消息。常⽤于：$ {\color{red}在Web中调用主进程的API} $，例如下⾯的这个需求：

:::info
需求：点击按钮后，在⽤户的 D 盘创建⼀个 hello.txt ⽂件，⽂件内容来⾃于⽤户输⼊。

:::

  1. ⻚⾯中添加相关元素， render.js 中添加对应脚本

<input id="content" type="text"><br><br>
<button id="btn">在⽤户的D盘创建⼀个hello.txt</button>



const btn = document.getElementById('btn')
const content = document.getElementById('content')

btn.addEventListener('click',()=>{ 
    console.log(content.value) 	                  			    	 
    myAPI.saveFile(content.value)
})
  1. preload.js 中使⽤ ipcRenderer.send(‘信道’,参数) 发送消息，与主进程通信。

const {contextBridge,ipcRenderer} = require('electron') 

contextBridge.exposeInMainWorld('myAPI',{
    saveFile(str){
        // 渲染进程给主进程发送⼀个消息
        ipcRenderer.send('create-file',str)
    }
})
  1. 主进程中，在加载⻚⾯之前，使⽤ ipcMain.on(‘信道’,回调) 配置对应回调函数，接收消息。

// ⽤于创建窗⼝
function createWindow() {
    // 主进程注册对应回调
    ipcMain.on('create-file',createFile)
    // 加载⼀个本地⻚⾯
    win.loadFile(path.resolve(	dirname,'./pages/index.html'))
}

//创建⽂件
function createFile(event,data){ 
    fs.writeFileSync('D:/hello.txt',data)
}

**10.2.** 渲染进程↔主进程（双向）

概述：$ {\color{red}渲染进程} $通过[ipcRenderer.invoke](https://www.electronjs.org/zh/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args) 发送消息，$ {\color{red}主进程} $使⽤ [ipcMain.handle](https://www.electronjs.org/zh/docs/latest/api/ipc-main#ipcmainhandlechannel-listener) 接收并处理消息。

备注： ipcRender.invoke 的返回值是 Promise 实例。

常⽤于：从渲染器进程调用主进程方法并等待结果，例如下⾯的这个需求：

:::info
需求：点击按钮从 D 盘读取 hello.txt 中的内容，并将结果呈现在页面上。

:::

1. ⻚⾯中添加相关元素，<font style="color:rgb(37,37,37);">render.js</font> 中添加对应脚本

<button id="btn">读取⽤户D盘的hello.txt</button>

const btn = document.getElementById('btn') 

btn.addEventListener('click',async()=>{
  let data = await myAPI.readFile();
  document.body.innerHTML += `<h2>${data}</h2>`
})

2. <font style="color:rgb(37,37,37);">preload.js</font> 中使⽤ipcRenderer.invoke('信道',参数) 发送消息，与主进程通信。

const {contextBridge,ipcRenderer} = require('electron') 

contextBridge.exposeInMainWorld('myAPI',{
/*******/
  readFile (path){
    return ipcRenderer.invoke('read-file')
  }
})

3. 主进程中，在加载⻚⾯之前，使⽤ipcMain.handle('信道',回调) 接收消息，并配置回调函数。

// ⽤于创建窗⼝
function createWindow() {
  /**********/
  // 主进程注册对应回调
  ipcMain.handle('read-file',readFile)
  // 加载⼀个本地⻚⾯
  win.loadFile(path.resolve(	dirname,'./pages/index.html'))
}

//读取⽂件
function readFile(event,path){
  return fs.readFileSync(path).toString()
}

10.3. 主进程到➡渲染进程

概述： 主进程 使⽤ win.webContents.send 发送消息， 渲染进程 通过 ipcRenderer.on 处理消息，常⽤于：从主进程主动发送消息给渲染进程 ，例如下⾯的这个需求：

:::info
需求：应⽤加载 6 秒钟后，主动给渲染进程发送⼀个消息，内容是：你好啊！

:::

1. ⻚⾯中添加相关元素，render.js 中添加对应脚本

window.onload = ()=>{ 
  myAPI.getMessage(logMessage)
}

function logMessage(event,str){ 
  console.log(event,str)
}

2. <font style="color:rgb(37,37,37);">preload.js</font>中使⽤ipcRenderer.on ('信道',回调) 接收消息，并配置回调函数。

const {contextBridge,ipcRenderer} = require('electron') 
  
contextBridge.exposeInMainWorld('myAPI',{
/*******/
  getMessage: (callback) => {
    return ipcRenderer.on('message', callback);
  }
})

3. 主进程中，在合适的时候，使⽤win.webContents.send('信道',数据) 发送消息。

// ⽤于创建窗⼝
function createWindow() {
/**********/
  // 加载⼀个本地⻚⾯
  win.loadFile(path.resolve(	dirname,'./pages/index.html'))
  // 创建⼀个定时器
  setTimeout(() => { 
    win.webContents.send('message','你好啊！')
  }, 6000);
}

10.4. 渲染进程➡渲染进程

概述： 渲染进程A 使用 `ipcRenderer.send` 发送消息，在 主进程 中使用 `iocMain.on` 接收 渲染进程A 的消息。 主进程 接收到 渲染进程A 的消息后使用 `win.webContents.send` 向 渲染进程B 发送消息， 渲染进程B 使用 `ipcRenderer.on` 处理消息。例如，如下需求

上面的 win 为使用 const win = new BrowserWindow({...}) 创建 渲染进程B 返回的对象

:::info
需求：当前应用有两个窗口，indexA.html 和 indexB.html 。indexA.html 中点击按钮将值传递给 indexB.html 并展示

:::

  1. indexA.html 中触发按钮
 <input type="text" id="name" name="name">
 <butto id='btn'> 同步 </butto>

const name = document.getElementById('name');
const btn = document.getElementById('btn');

btn.addEventListener('click',()=>{ 
    console.log(name.value) 	                  			    	 
    myAPI.saveName(name.value)
})
  1. preload.js 中使用 ipcRenderer.send() 发送消息，与 主进程 通信
const {contextBridge,ipcRenderer} = require('electron') 

contextBridge.exposeInMainWorld('myAPI',{
    saveName(str){
        // 渲染进程给主进程发送⼀个消息
        ipcRenderer.send('create-name',str)
    }
})
  1. 主进程 中，在加载 渲染进程A 之前，使⽤ ipcMain.on配置对应回调函数，接收消息。并且在配置的回调函数中，使用 win.webContents.send 向 渲染进程B 发送消息，传递数据
const { app, BrowserWindow } = require('electron')

let winB = new BrowserWindow({ 
    width: 800, // 窗⼝宽度 height: 600, // 窗⼝⾼度
    autoHideMenuBar: true, // ⾃动隐藏菜单栏
    alwaysOnTop: true, // 置顶
    x: 0, // 窗⼝位置x坐标
    y: 0 // 窗⼝位置y坐标
});
winB.loadFile('./pages/indexB.html');


let winA = new BrowserWindow({ 
    width: 800, // 窗⼝宽度 height: 600, // 窗⼝⾼度
    autoHideMenuBar: true, // ⾃动隐藏菜单栏
    alwaysOnTop: true, // 置顶
    x: 0, // 窗⼝位置x坐标
    y: 0 // 窗⼝位置y坐标
});
// 主进程注册对应回调
ipcMain.on('create-name',(event,data)=>{
  // 触发渲染进程B的监听事件
   winB.webContents.send('message',data)
})
winA.loadFile('./pages/indexA.html');
  1. preload.js 中使用 ipcRenderer.on 接收消息，并配置回调函数
const {contextBridge,ipcRenderer} = require('electron') 

contextBridge.exposeInMainWorld('myAPI',{
    saveName(str){
        // 渲染进程给主进程发送⼀个消息
        ipcRenderer.send('create-name',str)
    },
    getName(callback){
       return ipcRenderer.on('message', callback);
    },
})
  1. indexB.html 中接收消息，显示数据
window.onload = ()=>{ 
  myAPI.getName(logMessage)
}

function logMessage(event,str){ 
  console.log(event,str)
}

11. 打包应用

使⽤` electron-builder ` 打包应⽤

1. 安装 electron-builder ：

npm install electron-builder -D

2. 在<font style="color:rgb(37,37,37);">package.json</font> 中进⾏相关配置，具体配置如下：

备注：json ⽂件不⽀持注释，使⽤时请去掉所有注释。

{
  "name": "video-tools",	// 应⽤程序的名称 
  "version": "1.0.0",		// 应⽤程序的版本 
  "main": "main.js",	// 应⽤程序的⼊⼝⽂件
  "scripts": {
    "start": "electron .",	// 使⽤ `electron .` 命令启动应⽤程序
    "build": "electron-builder" // 使⽤ `electron-builder` 打包应⽤程序，⽣成安装包
  },
  "build": {
    "appId": "com.atguigu.video",	// 应⽤程序的唯⼀标识符
    // 打包windows平台安装包的具体配置
    "win": {
      "icon":"./logo.ico", //应⽤图标 
      "target": [
        {
          "target": "nsis",	// 指定使⽤ NSIS 作为安装程序格式
          "arch": ["x64"]	// ⽣成 64 位安装包
        }
      ]
    },
    "nsis": {
      "oneClick": false,	// 设置为 `false` 使安装程序显示安装向导界⾯，⽽不是⼀键安装
      "perMachine": true,	// 允许每台机器安装⼀次，⽽不是每个⽤户都安装
      "allowToChangeInstallationDirectory": true // 允许⽤户在安装过程中选择安装⽬录
    }
  },
  "devDependencies": {
    "electron": "^30.0.0",	// 开发依赖中的 Electron 版本
    "electron-builder": "^24.13.3" // 开发依赖中的 `electron-builder` 版本
  },
  "author": "tianyu",	// 作者信息
  "license": "ISC",	// 许可证信息
  "description": "A video processing program based on Electron" // 应⽤程序的描述
}

3. 执⾏打包命令

npm run build

12. electron-vite

electron-vite 是 ⼀个新 型构 建⼯具，旨 在为 [Electron](https://www.electronjs.org/) 提 供更 快 、 更 精 简的体 验 。 主 要由 五 部 分 组 成 ：

● ⼀套构建指令，它使⽤ Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。

● 集中配置主进程、渲染器和预加载脚本的Vite 配置，并针对Electron 的独特环境进⾏预配置。

● 为渲染器提供快速模块热替换（HMR）⽀持，为主进程和预加载脚本提供热重载⽀持，极⼤地提⾼了开发效率。

● 优化Electron 主进程资源处理。

● 使⽤ V8 字节码保护源代码。

electron-vite 快速、简单且功能强⼤，旨在开箱即⽤。官⽹地址：https://cn-evite.netlify.app/

虚淤
关注
Electron学习指南（一）--- 初识Electron
sinat_37066308的博客
03-25 2958
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
热门推荐
宝码香车的博客
07-16 5万+
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron快速入门
路漫漫其修远兮，吾将上下而求索
06-29 5162
Electron是由GitHub众多开发者开发的一个开源项目，能够使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。当然了，它也可以与vue和react相结合。前端的小伙伴们，学习它应该很快，是很容易上手的一门技术。文档编写不易，还请各位耐心观看。另外本人能力有限，如有不足之处，还请不吝批评指正！Electron 运行的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
介绍electron
最新发布
xiezhipu的博客
07-05 938
Electron 降低了桌面开发门槛，但需权衡性能与体验。随着 WebAssembly、轻量 WebView 等技术的发展，未来跨平台方案将更趋多元。
electron入门
qq_27685463的博客
05-22 1568
详细文档：https://www.electronjs.org/docs/api/menuconst {label : "文件" , submenu : [ {label : "新建窗口" , } , ] , } , {label : "编辑" , submenu : [ {label : "新建窗口" , } , ] , } , ];1、点击打开新窗口label : "新建窗口" , click :() => {} , } , ];2、点击打开浏览器shell。
Electron 入门
John是橘红的博客
06-27 1144
帮助前端人员快速入门 Electron，看完能达到能看懂 Electron 相关代码并且会改代码的水平。
Electron入门
weixin_42883164的博客
07-18 785
electron 入门练习
electron初步入门
fire__hero的博客
09-21 704
介绍 electron是 GitHub 在2013年开发的一款跨 Mac/Windows/Linux 系统的框架，使用 Html/Css/JavaScript 来构建跨平台桌面应用程序，2014年开始开源，官网请访问 http://www.electronjs.org/ 原理 electron 是一个精简版的 Chromium 浏览器，使用 web 页面作为它的 GUI，但是比原生的桌面端应用还是有些不足。从本质上看，electron application 是一个 Node. js 应用程序。 环境依
Electron基础入门教程
10-26
**Electron基础入门教程概述** Electron是一款开源框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。这个基础入门教程针对初学者，旨在教会那些对Electron不熟悉的开发者如何从...
Electron基础入门与快速克隆教程
ElectronBase是一个基于Electron框架创建的基础项目模板，它允许开发者快速启动并运行一个最小化的Electron应用程序。接下来，我们将详细解读该项目模板所涉及的知识点，并解释其背后的技术细节和开发步骤。 ### ...
electron入门模版代码
09-29
该入门模版代码为新手提供了一个基础的框架，用于理解如何构建一个Electron应用程序。它展示了如何组织项目文件，如何使用主进程（main process）和渲染进程（renderer process）进行通信，以及如何打包和分发应用...
Electron实战教程（初级）
06-30
Electron学习的过程存在两个门槛，一是入门，二是进阶。据以往的经验，只要你能够入门并适应Electron开发的流程，就能够很快的从事一些简单功能的开发，并且熟悉一段时间后，就能够独立完成大部分PC客户端的开发需求...
electron入门篇
02-27
这个“electron入门篇”很可能是为初学者准备的一份教程资料，涵盖了Electron的基础概念以及一些常见的开发技巧。 首先，我们来了解一下Electron的核心概念。Electron是由Node.js和Chromium浏览器引擎组成的。Node....
Electron入门 01：快速入门
Naisu的各种笔记
10-28 9881
文章目录目的总结 目的 总结
electron学习笔记：electron入门
hai200501019的专栏
07-31 907
1.关于electron electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将chromium和node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。   2.最基础的electron程序 基础的Electron程序三个文件：package.j...
Electron 快速入门
Yana's Blog
05-06 446
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。以上三个命令执行完后，会创建一个 out 文件夹，文件夹下包含安装包。若安装失败，设置一下 electron 下载镜像。
【Electron】基础知识
DomCode
10-24 1742
Electron它是核心组成的是Chromium、Node.js以及内置的Native API，其中Chromium为Electron提供强大的UI能力，可以在不考虑兼容的情况下利用强大的Web生态来开发界面；Node.js让Electron有了底层的操作能力，比如像文件的读写，然后集成C++等等，还可以使用大量的NPM包来帮助大家来完成项目需求；
Electron一小时入门
weixin_50249440的博客
06-13 2029
快速入门。Electron 是⼀个跨平台桌⾯应⽤开发框架，开发者可以使⽤：HTML、CSS、JavaScript 等 Web 技术来构建桌⾯应⽤程序，它的本质是结合了 Chromium 和 Node.js，现在⼴泛⽤于桌⾯应 ⽤程序开发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值