Electron初试

时间 2019-11-13

标签 electron 初试繁體版

原文原文链接

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目录下的文件到任意文件夹yourappcss
复制你的项目文件到yourapp/resources/app下html
删除yourapp/resources/default_app.asar文件前端
运行yourapp/electron.exenode

注意建立好的应用若是在渲染进程中使用了相对目录，因为目录结构的变化会引发读取文件失败，因此推荐使用绝对路径如，这个项目中的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

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