一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
1.基本概念
1.Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和 Node.js到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
2.和google浏览器一样，采用多进程方案，拥有一个主进程和多个渲染进程
主进程功能：
（1）可以使用electron API和原生系统对接-创建菜单，上传文件
（2）有且只有一个主进程，可以创建渲染进程
（3）全面支持Node.js
渲染进程功能：
（1）可以有多个，每一个都是单独的进程
（2）全面支持Node.js和DOM API
（3）可以使用一部分electron API
2.原生JS实践
2.1主进程和渲染进程
使用社区推荐脚手架electron-quick-start
创建一个主进程main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
//封装一个创建主窗口的方法
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration:true,//手动打开支持node.js
contextIsolation: false,//electron12版本以上必须关掉，不然渲染进程不支持node.js
preload: path.join(__dirname, 'preload.js')//设置dom加载完成后的js操作
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()//打开调试工具
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
配置scirpt
"scripts": {
"start": "chcp 65001 &&electron .",//手动配置chcp 65001转换控制台乱码
"build": "electron-builder"//社区打包方案，原生打包步骤比较繁琐
},
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="main">点击内容</div>
<div id="content"></div>
</div>
<script src="./renderer.js"></script>
</body>
</html>
加载的index.html可以引入一个js文件，这个index.html就是渲染进程，也就是我可以在main.js调用多次创建进程，那么就可以创建多个渲染进程
2.2 进程通信
使用IPC进程通信模块，electron已经封装了
渲染进程render.js，发送信息给主进程并且接受主进程的回复，将回复的信息操作页面
const {ipcRenderer}=window.require('electron')
window.addEventListener('DOMContentLoaded',()=>{
document.getElementById("main").addEventListener('click',()=>{
console.log("监听到定义")
ipcRenderer.send("message","发送信息")
ipcRenderer.on("reply",(event,arg)=>{
console.log("收到回复消息",arg)
document.getElementById("content").innerHTML=arg
})
})
})
主进程接收到并且回应
const {ipcMain} = require('electron')
ipcMain.on("message",(event,arg)=>{
event.sender.send("reply","恢复信息")
})
}
通过以上逻辑我们使用原生的方式，可以创建多个index.html,也就是多个窗口页面，每个页面都可以和主进程通信，可以操作每个页面的样式等等，一个基本模块就搭建了
2.3 打包
electron提供的原生打包方式比较复杂，使用社区推荐方案electron-builder,通过配置package.json就可以打包，如果需要打包windows需要安装electron-builder-squirrel-windows，版本最后保持最新，不然实践起来很可能不兼容。
关于package.json主要是配置打包的文件类型，文件背景icon等等
"build": {
"productName": "electron-demo",
"appId": "com.zhuyu.app",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
3.electron和vue结合
使用社区推荐方案electron-vue，集成了css预处理语言，vuex,elctron-store,electron-builder等
主进程采用本地加载指定服务，线上打包index.html
'use strict'
import { app, BrowserWindow } from 'electron'
import '../renderer/store'
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\/g, '\\')
}
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
4.打包构建
采用的官方推荐方案electron-builder,直接通用配置package.json进行打包构建，package.json基本规范配置
"build": {
"productName": "手机设备系统PC端",
"appId": "com.example.yourapp",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
6.展望
将在以下三个方面出发研究electron
1.系统托盘菜单设置
2.右键上下文菜单设置
3.和客户端文件交互
