electron 踩坑之旅(一) —— 项目初体验

由于公司 .net 同事离职, 于是前端开发的我开启了 electron 的踩坑之旅

1. 项目初始化

执行 npm init 进行项目初始化, 会生成一个 pakeage.json 文件, 这个文件主要记录项目的详细信息, 以及项目依赖, 可以加上 -y 生成一个默认配置

npm init -y
复制代码

2. 安装 `electron`

将 electron 包安装到应用的开发依赖中

npm install --save-dev electron
复制代码

也可以指定版本安装

npm install --save-dev [email protected]
复制代码

如果想修改下载安装的位版本(例如, 在x64机器上安装ia32位版本), 你可以使用npm install中的--arch标记，或者设置npm_config_arch 环境变量:

npm install --arch=ia32 --save-dev electron
复制代码

3. 运行主进程

创建页面

在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。

这里我们使用官方文档提供的模板页面

<!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'">
    <meta http-equiv="X-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>.
  </body>
</html>
复制代码

准备入口文件

任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面

执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件

要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件。

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

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

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

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

  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
复制代码

运行程序

最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

扫描二维码关注公众号，回复： 13426993 查看本文章

{
  "scripts": {
    "dev": "electron ."
  }
}
复制代码

dev 命令能让您在开发模式下打开您的应用

npm run dev
复制代码

通过预加载脚本从渲染器访问Node.js

现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。

在主进程通过Node的全局 process 对象访问这个信息是微不足道的。然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。它们存在于完全不同的进程！

这是将 预加载 脚本连接到渲染器时派上用场的地方。预加载脚本在渲染器进程加载之前加载，并有权访问两个渲染器全局 (例如 window 和 document) 和 Node.js 环境。

创建一个名为 preload.js 的新脚本如下：

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])
  }
})
复制代码

上面的代码访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。

要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。

// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')

// 修改现有的 createWindow() 函数
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
// ...
复制代码

运行程序

附上 demo 地址 electron-dll