Electron初试 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 electron应用 - 锐客网 > const fs = require('fs')fs.readFile('./demo.txt', function (err, data) { document.write(data) })

npm start运行应用

分发应用

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

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

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

> const fs = require('fs') const path = require('path')fs.readFile(path.resolve(__dirname, 'demo.txt'), function (err, data) { document.write(data) })

【完】
?

文章图片

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