广州芦苇科技web前端

广州芦苇科技web前端

Electron初试

简介

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

构建开发环境

  • electron应用本质上是一个Node.js应用程序,应用的入口是package.json文件.
  1. 使用npm init初始化项目目录
npm init
// 或者
npm init -y

  1. 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"
}
  1. 安装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平台的方式
  1. 复制node_modules/electron/dist目录下的文件到任意文件夹yourapp

  2. 复制你的项目文件到yourapp/resources/app

  3. 删除yourapp/resources/default_app.asar文件

  4. 运行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>

【完】

Electron初试-LMLPHP

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

05-14 15:47