## Web前端技术开发桌面应用的方式
- **CEF**：用 Chromium&[Webkit](https://baike.baidu.com/item/webkit/1467841?fr=aladdin "Webkit") 来呈现 web 页面，是客户端里面嵌浏览器，浏览器里面跑网页。
- **heX**：基于CEF，内部整合了开源项目 Chromium 及 [node.js](https://baike.baidu.com/item/node.js/7567977?fr=aladdin "node.js")。
- **nw**：基于Chromium 和 node.js，利用 web 方式开发跨平台桌面应用的平台技术。
- **electron**：底层也是基于Chromium 和 node.js。
- 等等。。。
## 案例实操~electron
electron 是 github 开发的，用来开发桌面应用的一款前端框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0stOrw7H-1600757913132)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]
### 开发环境
#### 安装 node.js
[nodejs下载地址](https://nodejs.org/zh-cn/)
为了避免网络问题对 Node 工作时的影响，我们安装国内的 node 镜像 cnpm。
`npm install -g cnpm --registry=https://registry.npm.taobao.org`
#### 安装 electron
`npm install --save-dev electron`
或者全局安装
`npm install -g electron`
### 开发工具
[VSCode](https://vscode.cdn.azure.cn/stable/ff915844119ce9485abfe8aa9076ec76b5300ddd/VSCodeUserSetup-x64-1.44.2.exe)
其实 vscode 就是 electron 开发的
### 开发一个简易的 electron
Electron 应用使用 JavaScript 开发，其工作原理和方法与 Node.js 开发相同。 `electron` 模块包含了 Electron 提供的所有 API 和功能，引入方法和普通 Node.js 模块一样：
```javascript
const electron = require('electron')
```
`electron` 模块所提供的功能都是通过命名空间暴露出来的。 比如说： `electron.app`负责管理 Electron 应用程序的生命周期， `electron.BrowserWindow`类负责创建窗口。下面是一个简单的`main.js`文件，它将在应用程序准备就绪后打开一个窗口：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
```
创建你想展示的 `index.html`：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
```
### 启动
我们在`package.json`中已经写好了启动命令，所以这里直接用 node 启动命令`npm start`就可以了，如果没有配，也可以用`electron .`命令启动。
### 主进程和渲染进程
我们可以理解`package.json`中定义的入口文件就是主进程，那一般一个程序只有一个主进程，而我们可以利用一个主进程，打开多个子窗口。
由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程。需要视频配套资料或其他资料+我们小姐姐V lezijie007（加好友暗号 98 ，不备注不加）
也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vD8SRYmO-1600757913137)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]
您应当在 `main.js` 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在 macOS 用户点击 dock 上图标时重建窗口，添加后，main. js 就像下面这样：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
// 当所有窗口都关闭时触发此事件.
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。
```
### git 上面的 demo 示例
```shell
# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start
```
### electron-forge 构建项目
```shell
# 全局安装electron-forge
npm install electron-forge -g
#用electron-forge初始化一个项目
electron-forge init demo02
# 进入到项目目录
cd demo02
#启动项目
npm start
```
## 扩展~开发桌面百度
### 主进程代码
我们创建了主进程对象 win 后，让它直接加载百度的地址。
```js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
// win.loadFile('index.html')
win.loadURL("http://www.baidu.com")
}
app.whenReady().then(createWindow)
```
### 打包发布
我们希望使用`electron-packager`对应用进行打包发布，`electron-packager`的安装方式如下：
```shell
#下载electron-packager打包插件
npm install electron-packager -g
#开始打包
electron-packager ./ demo01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5
```
我们还可以进一步打包成可执行文件
```shell
#下载windows系统可执行文件打包插件
npm install -g electron-installer-windows
#开始打包
electron-installer-windows --src demo01-win32-x64 --dest ./
```
