前言:

今天带来electron中文入门教程第一篇，随着互联网发展，现在前端js已经覆盖到各个领域了，web端，移动端，服务器端，甚至是客户端，今天讲的electron就是其中利用JS做客户端的。

electron主要nodejs+chromemini内核打造的多兼容多平台的客户端框架，渲染层是html+css+js去写，而负责和PC交互的全交给了node去处理，主要兼容 windows, macos,linux。

快速入门：

针对快速入门，官网已经提给了一套完整的讲解，按照官网的入门讲解：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

目前站长node版本

按照官网要求，安装完后，我们得到一个纯页面的客户端，类似下图：

在main.js里面有如下代码：主要是监听APP启动回调 createWindow  方法里面封装了 如何调用如何启动一个窗口调用页面渲染视图。

app.whenReady().then(() => {
  createWindow()
})

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html') // 利用本地渲染方法传入本地html文件路径（相对），也可以远程加载loadURL方法加载远程资源
}

预加载JS：

在官网接下来教程我们看到了 preload.js 预加载JS，这里主要是封装一些和 前端html+js 交互的一些代码，可以理解为“注入”一些和客户端"node"交互的能力，

这里能力其实主要是利用ipc通信来交互的,纯前端进来的，可以把它理解为我们用到的 postMessage 类方法，但是没有 postMessage 那么局限性。

站长这里粘贴一些自己封装在 preload.js的方法并做出讲解，大家可以结合官网实例深入理解下。

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 通过预加载全局注入到渲染器事件
let ipcCallback = {
// 添加页签
"addTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
// 关闭页签
"delTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
// 选中
"choiceTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
}
// 在预加载核心类里面，利用这个类将相关能力暴露给全局渲染层，因为涉及到安全问题，站长这里只是用到那些就暴露那些即可。
contextBridge.exposeInMainWorld('electronAPI', {
desktop: true,
setTitle: (title) => ipcRenderer.send('set-title', title),
// ipc消息总入口
ipcSendMsg: (msg) => {
console.log('ipcSendMsg - ', msg)
// 合法过滤
if(msg.type && ipcCallback[msg.type]) {
ipcCallback[msg.type](msg.obj, msg.type);
}
},
// 消息监听
handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
});
// 通过预加载全局注入到渲染器事件 - end

站长上面的预加载js主要封装了一些子创建事件，和客户端主进程通信，比如页面加载完毕后，改变页面标题，下图就是打开一页页签后，获取远程页面内容后改变页面标题，这里利用的 ipc通信将当前页面信息发送给主进程，然后交互通信改变样式。

再比如选中页签，删除页签，打开页签，都是通过了IPC通信，具体用法大家可以花点时间深入读取官网文档。

https://www.electronjs.org/zh/docs/latest/api/ipc-main

创建子窗口：

这里创建子窗口是利用 electron 的 BrowserView 方法，代码如下：

1. 在主窗口加载完后触发子窗口类初始化，并且把主窗口实例告诉给子窗口类

2. 子窗口拿到后绑定给全局属性，方便以后使用。

如何创建子窗口？

创建子窗口方法如下：主要思路是生成一个子窗口对应的hash值，先存起来，方便后面的增删改查，然后每次改变都通过IPC通信发给渲染层，结合上面的预加载方法，可以看到一个创建页签的闭环操作。

// 创建子窗口
createChildWin(winId, url) {
console.log('winId, url', winId, url)
// 不存在窗口
if(!winId || !this._childWinList[winId]) {
let _winId = this.utils.getHashWinName();
let _win = null;
this._childWinList[_winId] = _win = new BrowserView({
frame: true, // 无边框
modal: true
});

// 打开开发工具
_win.webContents.openDevTools();

// setTimeout(() => {
//   this._mainWin.removeBrowserView(_win)
//   console.log('this._childWinList[_winId]')
// }, 3000)

// 获得网页标题
_win.webContents.on('dom-ready', (e) => {
let winTitle = _win.webContents.getTitle();
// 主进程通信
this._mainWin.webContents.send('update-counter', {
type: 'changeTabTitle',
winId: _winId,
title: winTitle
});
})
// 窗口变化
_win.setAutoResize({
width: true,
height: true,
horizontal: true,
vertical: true
});
// this._mainWin.setBrowserView(this._childWinList[_winId]);
this._mainWin.addBrowserView(this._childWinList[_winId]);
let mainWinSize = this._mainWin.getContentSize();
this._childWinList[_winId].setBounds({
x: 0,
y: Com.win.topBarHeight,
width: mainWinSize[0], // Com.win.width, Com.win.height, 
height: mainWinSize[1] - Com.win.topBarHeight });
// 主进程通信
this._mainWin.webContents.send('update-counter', {
type: 'addTabUi',
winId: _winId,
url: url
});
// 设置地址
if(url.indexOf("http") > -1) {
// 外网地址
this._childWinList[_winId].webContents.loadURL(url);
} else {
// 本地地址
this._childWinList[_winId].webContents.loadFile(url);
}
}

},

以上就是electron入门教程（1）入门教程全部内容，大家可以结合增加思路把删除思路，修改思路给加上。