js实现桌面
使用 Electron 构建桌面应用
Electron 是一个流行的框架，允许使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用。它结合了 Chromium 和 Node.js，提供完整的桌面应用开发能力。
安装 Electron：
npm init -y
npm install electron --save-dev创建主进程文件 main.js：
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)创建渲染进程文件 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>在 package.json 中添加启动脚本：
{
"main": "main.js",
"scripts": {
"start": "electron ."
}
}运行应用：
npm start使用 NW.js 构建桌面应用
NW.js 是另一个将 Node.js 和 Chromium 结合的工具，适合构建桌面应用。
安装 NW.js：
npm install nw --save-dev创建 package.json：
{
"name": "nw-app",
"main": "index.html",
"scripts": {
"start": "nw ."
}
}创建 index.html：
<!DOCTYPE html>
<html>
<head>
<title>NW.js App</title>
</head>
<body>
<h1>Hello NW.js!</h1>
<script>
console.log('Node.js version:', process.versions.node)
</script>
</body>
</html>运行应用：
npm start使用 Tauri 构建轻量级桌面应用
Tauri 是一个新兴的框架，使用 Rust 作为后端，生成的应用体积更小。
安装 Tauri 先决条件：
npm install -g @tauri-apps/cli创建项目：
npx create-tauri-app构建和运行：
npm run tauri dev使用 Neutralinojs 构建轻量级应用
Neutralinojs 是一个轻量级框架，不依赖 Node.js 运行时。
安装 CLI：
npm install -g @neutralinojs/neu创建项目：
neu create myapp
cd myapp运行开发服务器：
neu run打包和分发
Electron 打包示例：
npm install electron-packager --save-dev
npx electron-packager . MyApp --platform=win32 --arch=x64Tauri 打包：
npm run tauri buildNW.js 打包：
npm install nw-builder --save-dev
npx nw-builder --platforms=win64 --buildDir=dist/原生功能集成
Electron 中使用系统对话框：
const { dialog } = require('electron')
dialog.showOpenDialog({
properties: ['openFile']
}).then(result => {
console.log(result.filePaths)
})访问文件系统：
const fs = require('fs')
fs.readFile('path/to/file', 'utf8', (err, data) => {
if (err) throw err
console.log(data)
})性能优化
Electron 性能优化建议：
- 禁用未使用的 Chromium 功能
- 使用
webview标签隔离重型内容 - 启用硬件加速
- 使用
contextIsolation提高安全性
new BrowserWindow({
webPreferences: {
contextIsolation: true,
sandbox: true
}
})
