第一个应用
本节将指导您使用 OSI 创建第一个应用程序。我们将创建一个简单的文件管理器，展示 OSI 核心功能的基本用法。
- Node.js 应用
- Electron 应用
项目设置
- 创建新目录并初始化项目：
mkdir osi-test
cd osi-test
npm init -y
- 安装所需依赖：
npm install osi.onpremises typescript
npm install --save-dev @types/node
实现
主应用程序 (index.ts)
import { fs, os } from 'osi.onpremises';
async function main() {
try {
// 列出当前目录中的文件
const files = await fs.ls('.');
console.log('当前目录中的文件：');
files.forEach(file => {
console.log(`${file.name} (${file.size} 字节)`);
});
// 获取系统信息
const cpuInfo = await os.cpu();
console.log('\n系统信息：');
console.log(`架构：${cpuInfo.architecture}`);
console.log(`处理器：${cpuInfo.processor}`);
} catch (error) {
console.error('错误：', error);
}
}
main();
运行应用程序
- 在
package.json中添加以下脚本：
{
"scripts": {
"start": "ts-node src/index.ts"
}
}
- 启动应用程序：
npm start
项目设置
- 创建新目录并初始化项目：
mkdir osi-test
cd osi-test
npm init -y
- 安装所需依赖：
npm install electron osi.onpremises typescript
npm install --save-dev @types/node
实现
1. 主进程 (main/index.ts)
import { app, BrowserWindow, ipcMain } from 'electron';
import { fs, Process, EventWatcher, os, db } from 'osi.onpremises';
import path from 'path';
let mainWindow: BrowserWindow;
async function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
await mainWindow.loadFile('index.html');
}
// IPC 处理器
ipcMain.handle('list-files', async (_, dirPath: string) => {
try {
const files = await fs.ls(dirPath);
return files;
} catch (error) {
console.error('列出文件时出错：', error);
throw error;
}
});
ipcMain.handle('get-system-info', async () => {
try {
const cpuInfo = await os.cpu();
return cpuInfo;
} catch (error) {
console.error('获取系统信息时出错：', error);
throw error;
}
});
app.whenReady().then(createWindow);
2. 预加载脚本 (preload.js)
import { contextBridge, ipcRenderer } from 'electron';
contextBridge.exposeInMainWorld('osi', {
listFiles: (dirPath: string) => ipcRenderer.invoke('list-files', dirPath),
getSystemInfo: () => ipcRenderer.invoke('get-system-info')
});
3. 渲染进程 (index.html)
<!DOCTYPE html>
<html>
<head>
<title>OSI 文件管理器</title>
</head>
<body>
<h1>文件管理器</h1>
<div id="file-list"></div>
<div id="system-info"></div>
<script>
async function loadFiles() {
try {
const files = await window.osi.listFiles('.');
const fileList = document.getElementById('file-list');
fileList.innerHTML = files.map(file =>
`<div>${file.name} (${file.size} 字节)</div>`
).join('');
} catch (error) {
console.error('加载文件时出错：', error);
}
}
async function loadSystemInfo() {
try {
const info = await window.osi.getSystemInfo();
const systemInfo = document.getElementById('system-info');
systemInfo.innerHTML = `
`;
} catch (error) {
console.error('加载系统信息时出错：', error);
}
}
// 加载初始数据
loadFiles();
loadSystemInfo();
</script>
</body>
</html>
运行应用程序
- 在
package.json中添加以下脚本：
{
"scripts": {
"start": "electron ."
}
}
- 启动应用程序：
npm start
我们学到了什么
这个示例展示了：
- 使用 OSI 设置应用程序
- 使用文件系统模块列出文件
- 使用操作系统模块获取系统信息
- 适当的错误处理
- IPC 通信（仅限 Electron）
下一步
现在您已经对 OSI 有了基本了解，您可以：