Electron学习指南（一）--- 初识Electron

最新推荐文章于 2024-06-24 15:41:50 发布

无聊的指间

最新推荐文章于 2024-06-24 15:41:50 发布

阅读量1.9k

点赞数 59

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/sinat_37066308/article/details/137019605

版权

前言

近期开始学习Electron文档，在此写文章作为记录。

一、Electron是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

总结-------前端开发可以用Electron进行桌面应用开发，界面用html，功能用node.js!

二、使用步骤

先别管这么多，运行了再说！

0.项目完整目录

项目完成后的完整目录如下，找不到位置的可以参考：

1.配置文件初始化

生成 package.json 文件

npm init

npm导入electron (导入时间有点慢，可以换国内源) 参考官网

npm install electron --save-dev

修改 package.json 配置文件

2. 新建主线程文件 index.js

主线程是所有文件的入口，其是一个node进程，可以访问所有node.js内容，不能直接访问dom内容。

文件名可以随意命名，但是要和package.json中一样，官方推荐使用main.js为名。

// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

const createWindow = () => {
  // 创建一个浏览器窗口对象
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // __dirname 字符串指向当前正在执行的脚本的路径(在本例中，它指向你的项目的根文件夹)。
      // path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
      // 预加载脚本可以将不同进程桥接在一起，说人话--既可以访问dom又可以用node.js,还能将其暴露成全局访问变量
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 窗口对象对应的html文件
  win.loadFile('./pages/index.html')
}

// app模块准备完成，创建窗口
app.whenReady().then(() => {
  ipcMain.handle('__dirname', () => __dirname)
  createWindow()
})

3. 新建预加载线程文件 preload.js

为了将 Electron 的不同类型的进程桥接在一起，我们需要使用被称为 预加载 的特殊脚本。

预加载线程具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限。

其功能为连接渲染进程（dom）和主进程（node.js）。

需要注意的是预加载线程并不具有完全的node.js权限，比如不能直接使用 __dirname，需要使用一些特殊的方法从主线程传递过来后才能传给渲染进程使用。

// 如果想将此处的代码暴露到别处（比如将node版本号暴露给html文件）
// 可以通过 contextBridge 接口定义 全局对象
const { contextBridge, ipcRenderer }  = require('electron')
contextBridge.exposeInMainWorld('versions', {
  getVersions: (name) => {
    return process.versions[name]
  },
})

contextBridge.exposeInMainWorld('jinlin', {
  pika: '皮卡丘'
});

contextBridge.exposeInMainWorld('sex', '男');

// 需要注意的是此处只可访问到特定的子集，比如process就能直接访问，但是__dirname是无法直接访问的
// 报错
// contextBridge.exposeInMainWorld('__dirname', __dirname);

// 想要获取类似如 __dirname的node属性可以通过进程通信实现
// ipcRenderer可以接收从主线程返回的属性
// 注意 ipcRenderer.invoke('__dirname')返回的是个promise对象
contextBridge.exposeInMainWorld('dirname', ipcRenderer.invoke('__dirname'))

4. 新建渲染进程文件 index.html

正常的渲染进程通常用一个名为 renderer.js的文件从html中导入。

此处为了显示可以在正常的html入口中随意访问node内容，只建了一个html文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello world!</h1>
  <h2></h2>
  <script>
    const h2 = document.querySelector('h2')
    window.dirname.then(res => {
      console.log('res', res)
      // 因为在预加载脚本preload.js中暴露了全局变量 versions，所以在html中可以直接访问到其中的node.js的内容
      h2.innerText = 
      `
      该应用的Chrome版本为${versions.getVersions('chrome')},
      Node.js的版本为${versions.getVersions('node')}
      Electron版本为${versions.getVersions('electron')}
      我的精灵是:${jinlin.pika}
      我的性别是:${sex}
      文件路径是:${res}
      `
    })
  </script>
  <!-- 通常专门弄一个renderer.js文件来写html中运用到的js内容，称之为渲染脚本 -->
  <!-- <script src="./renderer.js">

  </script> -->
</body>
</html>

5. 运行程序

切换到项目目录：

cd easy-demo

启动！

npm start

运行结果：

可以看到我们成功在html中显示了文件路径这种在浏览器中不可能得到的东西！

ps: 在electron启动窗口可以按 ctrl + shift + i 启动控制台调试

6. 打包

打包遇到的坑：

需要注意项目文件名称和上级路径不要出现中文。
package.json文件中的 description 和 author选项不能为空。
跟着官方文档打包会提示找不到 plugin-fuses 文件，需要手动引入

npm install --save-dev @electron-forge/plugin-fuses

打包步骤：

npm install --save-dev @electron-forge/cli  
npx electron-forge import
npm install --save-dev @electron-forge/plugin-fuses

执行完会生成一个forge.config.js的文件，在其中可以配置一些打包配置。

执行完还会在package.json写入一行打包命令：

控制台运行命令即可打包：

npm run make

2次打包可能会提示xxxnot empty,将对应目录文件删了即可。

打包完成后会生成一个out文件夹

就这样我们成功用electron开发了一个windows桌面程序。

总结

官方文档整体还是比较友好的，Electron对于前端开发来说确实不难，主要概念就是3个线程通信形成用 html + node开发桌面程序的能力。后续将深入理解其中各个线程的概念，以及用Electron做一些更复杂的小demo去熟悉这一工具。

无聊的指间

关注

59
点赞
踩
48

收藏

觉得还不错? 一键收藏
1
评论
Electron学习指南（一）--- 初识Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
复制链接

扫一扫