使用Electron打包O2OA桌面客户端

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。通过嵌入 Chromium 和 Node.js，Electron 让开发者能够利用现有的 Web 技术来创建原生应用程序，而无需深入了解底层操作系统的技术细节。

# 环境准备

在开始之前，请确保您的开发环境中已安装了 Node.js 和 npm。可以通过以下命令检查版本：

```shell
node -v
npm -v
```

# 打包客户端

把O2OA聊聊应用打包成PC客户端

## 项目结构设置

### 1. 创建项目目录

首先，创建一个新的目录用于存放 O2OA 客户端的源代码：

```shell
mkdir o2oa-pc
cd o2oa-pc
```

### 2. 初始化项目

使用 `npm init` 命令初始化一个新的 Node.js 项目，并接受所有默认设置或根据需要进行更改：

```shell
npm init -y
```

### 3. 安装依赖

安装 Electron Forge 及其相关插件，这些工具将帮助我们构建和打包应用程序：

```shell
npm install --save-dev @electron-forge/cli
npx electron-forge import
```

### 4. 编辑 package.json

修改 `package.json` 文件，添加或更新如下配置：

```json
{
"name": "o2oa",
"version": "1.0.0",
"description": "O2OA桌面客户端",
"main": "main.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"clean": "rimraf out"
},
"keywords": ["o2oa", "electron"],
"author": "Your Name <your.email@example.com>",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^6.0.0-beta.59",
"@electron-forge/maker-deb": "^6.0.0-beta.59",
"@electron-forge/maker-rpm": "^6.0.0-beta.59",
"@electron-forge/maker-squirrel": "^6.0.0-beta.59",
"@electron-forge/maker-zip": "^6.0.0-beta.59",
"electron": "^13.1.7"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0"
},
"config": {
"forge": {
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "o2oa",
"setupIcon": "build/icon.ico"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": ["darwin"],
"config": {
"icon": "build/icon.icns"
}
},
{
"name": "@electron-forge/maker-rpm",
"config": {
"icon": "build/icon.png"
}
}
]
}
}
}
```

## 入口文件创建

在项目的根目录下创建 `main.js` 文件，该文件是 Electron 应用程序的主进程入口点：

```javascript
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
const mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});

// 设置聊聊的地址
mainWindow.loadURL('https://sample.o2oa.net/x_desktop/appIM.html?app=IMV2&status={%22conversationId%22:%22%22,%22mode%22:%22default%22}');
mainWindow.setMenuBarVisibility(false);

mainWindow.on('closed', () => {
mainWindow = null;
});
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});

ipcMain.on('close-app', () => {
app.quit();
});
```

## 构建与打包

### 启动应用

在终端中运行以下命令启动应用，以便测试其功能：

```shell
npm start
```

### 打包应用

当您准备好发布应用时，可以使用以下命令来打包应用：

```shell
npm run make
```

以上步骤完成后，您应该能够在 `out` 目录中找到构建好的应用程序包，适用于不同的操作系统平台。