桌面端开发electron介绍 ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

前言

在学习过程中，我们了解到了前端跨端技术的应用，使得我们使用HTML、CSS、和JavaScript这三种用于开发web网页的技术也能应用在移动端app和小程序的开发，但前端开发可不知这一点点本事，我们使用JavaScript同样能开发出能在pc端运行的exe程序。今天的主角electron亮相了。

electron简介

electron将chrome的v8引擎提取出来，并将其与node.js相结合。由于node.js是基于C++开发出的运行环境，而C++恰好又是桌面开发的好手，node.js自然而然也能够胜任一部分的开发需求。在electron中存在两个相互独立的进程（主进程和渲染进程）。其中，主进程运行在Node.js环境中，能够直接与桌面端进行交互，渲染进程运行在浏览器环境中，负责渲染网页。

electron客户端相对于web端

electron并非简单的“套壳”，虽然它的本质是下载了一个浏览器，但node.js能够与操作系统进行更加深层次的交互，electron的主进程封装了很多能和操作系统进行交互的API，我们可以直接在electron程序中实现文件读写以及脱离网络运行程序等浏览器无法实现的功能。

electron的优点明显，缺点也相对明显，一个程序独享一个浏览器内核是一把双刃剑，打包后的程序因为浏览器内核这无疑占用了大量体积。

介绍原生环境下electron的使用

编写主进程代码

在项目根目录下新建main.js文件，electron导出了app和BrowserWindow两个成员（只能在主进程使用）,app用于中控制应用程序的事件生命周期，BrowserWindow类用于创建并控制浏览器窗口。

具体代码如下

const { app, BrowserWindow } = require('electron')

//编写createWindow函数，调用时创建窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

//app.whenReady函数返回promise对象，表示app已就绪
app.whenReady().then(() => {
  //创建窗口（不能在就绪前创建窗口）
  createWindow()
})

//所有窗口关闭时调用
app.on('window-all-closed', () => {
  //process.platform返回当前操作系统环境
  if (process.platform != 'darwin') {
    app.quit()//不为macOS时，结束app运行
  }
})

//当应用被激活时触发,macOS专用(macOS所有窗口关闭不会停止程序)
//例如首次启动应用程序、尝试在应用程序已运行时单击应用程序
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length == 0) {
    //无窗口时创建窗口 
    createWindow()
  }
})

项目试运行

调整package.json代码

{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",//入口文件修改
  "scripts": {
    "start": "electron .",//添加运行命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^22.0.0"
  }
}

执行npm run start运行项目

总结

electron的出现无疑再次扩大了前端开发的管辖范围，然我们能够使用JavaScript做到更多的事。