跨平台应用开发框架示例集合,展示如何使用不同的技术栈开发运行在 Windows、macOS、Linux、Android 和 iOS 上的应用程序。
| Framework | 平台支持 | 语言 | 引擎 | 特点 |
|---|---|---|---|---|
| 桌面端 (Win/Mac/Linux) | JavaScript/TypeScript | Chromium + Node.js | Web 技术构建桌面应用 | |
Flutter |
全平台 | Dart | Flutter Engine | Google 出品,高性能 UI |
Tauri |
桌面端 (Win/Mac/Linux) | Rust + Web | WRY | 轻量级,安全性高 |
Expo |
移动端 + Web | TypeScript/JavaScript | React Native | 快速开发,丰富生态 |
hello-app/
├── hello-electron/ # Electron 桌面应用示例
│ ├── main.js # 主进程
│ ├── index.html # 渲染进程页面
│ └── package.json # 项目配置
├── hello-flutter/ # Flutter 应用示例
│ ├── flip_clock/ # 翻页时钟应用
│ └── hello_flutter_app/ # 基础 Flutter 应用
├── hello-tauri/ # Tauri 应用示例
│ ├── hello-tauri-react/ # React 前端版本
│ ├── hello-tauri-svelte/ # Svelte 前端版本
│ ├── hello-tauri-vanilla/ # 原生 JS 版本
│ └── hello-tauri-vue/ # Vue 前端版本
└── hello-expo/ # Expo React Native 应用示例
├── app/ # 应用页面 (文件路由)
├── components/ # 可复用组件
├── constants/ # 常量定义
└── hooks/ # 自定义 Hooks
cd hello-electron
npm install
npm startcd hello-flutter/hello_flutter_app
flutter pub get
flutter runcd hello-tauri/hello-tauri-react
npm install
npm run tauri devcd hello-expo
npm install
npx expo start
# 使用 Expo Go 应用扫描二维码在手机上运行npm config set registry https://registry.npmmirror.com
yarn config set registry https://registry.npmmirror.comexport ANDROID_HOME="$HOME/AppData/Local/Android/Sdk"
export NDK_HOME="/d/coding/android-ndk-r26b"
export PATH="$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools/"查看可用的模拟器:
$ emulator -list-avds
Medium_Phone_API_31启动模拟器:
emulator -avd Medium_Phone_API_31


