Electron初试_广州芦苇科技web前端的专栏文章_微信文章

Electron初试

简介

electron使用html，css和JavaScript来构建块跨平台桌面应用程序（Mac，Windows和Linux）的一个开源库。
electron将Chromium和Node.js合并到同一个运行环境。
electron只使用了Chromium的渲染库而不是全部组件，这使得升级Chromium更加容易，但缺少了Google Chrome里的一些浏览器相关的特性。

构建开发环境

electron应用本质上是一个Node.js应用程序，应用的入口是package.json文件.

npm init 
// 或者
npm init -y

复制代码

在package.json中编写一个start脚本

{
  "name": "helloelectron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
复制代码

安装electron

npm install --save electron
复制代码

了解进程

主进程

运行package.json中的main脚本的进程是主进程。
一个electron应用有且只有一个主进程。
主进程可以进行GUI相关的原生API操作。
主进程使用ipcMain模块接收渲染进程和向渲染进程发送消息。

渲染进程

Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。
每个web页面运行在它自己的渲染进程中。
使用BrowserWindow类开启一个渲染进程并将这个实例运行在该进程中，当一个BrowserWindow实例被销毁后，相应的渲染进程也会被终止。
渲染进程中不能调用原生资源，但是渲染进程中同样包含Node.js环境，所以可以引入Node.js 模块，在Node.js支持下，可以在页面中和操作系统进行一些底层交互。
使用ipcRenderer模块接收主进程和向发送主进程发送消息。

开始开发

编写main.js

如前所述，编写main.js就是编写主进程要执行的脚本。
其中包换整个应用的生命周期的管理，各个渲染进程的创建和销毁及生命周期管理，进程间通信等。
下面创建一个最简单的electron脚本。

// app可以理解为主进程
// BrowserWindow用于创建渲染进程
const {app, BrowserWindow} = require('electron')

app.on('ready', function createWindow () {
    // 可以创建多个渲染进程
    let win1 = new BrowserWindow({
        width: 1024,
        height: 768
    })

    let win2 = new BrowserWindow({
        width: 1024,
        height: 768
    })

    // 渲染进程中的web页面可以加载本地文件
    win1.loadFile('index.html')

    // 也可以加载远程页面
    win2.loadURL('http://www.baidu.com')

    // 记得在页面被关闭后清除该变量，防止内存泄漏
    win1.on('closed', function () {
        win1 = null
    })
    win2.on('closed', () => {
        win2 = null
    })

})

// 页面全部关闭后关闭主进程，这里在不同平台可能有不同的处理方式，这里不深入研究
app.on('window-all-closed', () => {
    app.quit()
})
复制代码

渲染进程中的页面也可以加载node模块

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>electron应用</title>
</head>
<body>
    <script>
    const fs = require('fs')

    fs.readFile('./demo.txt', function (err, data) {
        document.write(data)
    })
    </script>
</body>
</html>
复制代码

npm start运行应用

分发应用

刚刚介绍了npm start运行应用，那如何将应用分发给他人呢，下面简单介绍Windows平台的方式

复制node_modules/electron/dist目录下的文件到任意文件夹yourapp
复制你的项目文件到yourapp/resources/app下
删除yourapp/resources/default_app.asar文件
运行yourapp/electron.exe

注意创建好的应用如果在渲染进程中使用了相对目录，由于目录结构的变化会引起读取文件失败，所以推荐使用绝对路径如，这个项目中的index.html

<script>
    const fs = require('fs')
    const path = require('path')

    fs.readFile(path.resolve(__dirname, 'demo.txt'), function (err, data) {
        document.write(data)
    })
</script>

复制代码

【完】

作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多