js实现桌面

使用Electron实现桌面应用

Electron是一个流行的框架，用于使用JavaScript、HTML和CSS构建跨平台桌面应用程序。它结合了Chromium和Node.js，允许开发者使用Web技术创建原生应用。

安装Electron：

npm init -y
npm install electron --save-dev

创建基本文件结构：

• main.js（主进程）
• index.html（渲染进程）
• package.json（配置）

示例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)

使用NW.js实现桌面应用

NW.js（原名node-webkit）是另一个将Web技术应用于桌面应用开发的框架。它同样支持HTML5、CSS3和JavaScript，并提供了对Node.js API的完全访问。

安装NW.js：

npm install nw

创建package.json：

{
  "name": "nw-demo",
  "main": "index.html",
  "scripts": {
    "start": "nw"
  }
}

使用Tauri构建轻量级桌面应用

Tauri是一个新兴的框架，相比Electron更加轻量级，使用Rust作为后端，支持前端框架如React、Vue等。

安装Tauri：

npm create tauri-app@latest

基本配置：

// tauri.conf.json
{
  "build": {
    "distDir": "../dist",
    "devPath": "http://localhost:3000"
  }
}

使用Proton Native构建原生UI

Proton Native提供了React Native风格的API来构建真正的原生桌面应用，而不是基于WebView的解决方案。

安装：

npm install -g proton-native-cli
proton-native init my-app

示例组件：

import React from 'react';
import { App, Window, render } from 'proton-native';

const Example = () => (
  <App>
    <Window title="Example" size={{w: 300, h: 300}} />
  </App>
);

render(<Example />);

打包和分发

Electron打包工具：

npm install electron-packager --save-dev
electron-packager . --platform=win32 --arch=x64

Tauri打包：

npm run tauri build

NW.js打包： 使用nw-builder工具：

npm install nw-builder -g
nwbuild -p win64,osx64,linux64 ./src

每种方案都有其特点和适用场景，Electron适合功能丰富的应用，Tauri适合追求性能和轻量级的应用，NW.js适合需要深度Node集成的项目，Proton Native则适合需要真正原生UI的开发者。