103 lines
2.4 KiB
Markdown
103 lines
2.4 KiB
Markdown
# Tauri 移动应用
|
||
|
||
这是一个使用Tauri和React构建的适配移动端的应用程序，提供了移动端友好的UI和交互体验。
|
||
|
||
## 功能特性
|
||
|
||
- 🎨 全新设计的移动友好界面
|
||
- 📱 响应式布局，支持手机、平板和桌面端
|
||
- 🌙 自动检测系统深色/浅色模式
|
||
- 🔄 左侧抽屉菜单（已移除底部导航栏）
|
||
- 📋 三个示例页面：首页、关于、设置
|
||
- 🚀 启动屏幕动画
|
||
- 🔒 防止移动端缩放和滚动问题
|
||
- ⚡ 针对触摸设备优化的交互
|
||
|
||
## 移动端适配
|
||
|
||
该项目包含以下移动端优化：
|
||
|
||
- 禁用页面缩放功能，解决双击放大问题
|
||
- 针对不同设备尺寸优化UI元素大小
|
||
- 优化触摸反馈和交互
|
||
- 防止iOS上的橡皮筋效果和滚动穿透
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── assets/ # 图片和资源文件
|
||
├── components/ # 可复用组件
|
||
│ └── SplashScreen.jsx # 启动页
|
||
├── layouts/ # 布局组件
|
||
│ └── MainLayout.jsx # 主布局（侧边栏+内容区）
|
||
├── pages/ # 页面组件
|
||
│ ├── AboutPage.jsx # 关于页面
|
||
│ ├── HomePage.jsx # 首页
|
||
│ └── SettingsPage.jsx # 设置页面
|
||
├── App.css # 全局样式
|
||
├── App.jsx # 应用主入口
|
||
└── main.jsx # React渲染入口
|
||
```
|
||
|
||
## 开发与构建指南
|
||
|
||
### 先决条件
|
||
|
||
- Node.js
|
||
- yarn 或 npm
|
||
- Rust
|
||
- Tauri CLI
|
||
- Android SDK和NDK（用于Android构建）
|
||
|
||
### 安装与开发
|
||
|
||
```bash
|
||
# 安装依赖
|
||
yarn
|
||
|
||
# 开发模式启动
|
||
yarn tauri dev
|
||
```
|
||
|
||
### 构建与部署
|
||
|
||
本项目支持多平台构建，包括Windows和Android平台。
|
||
|
||
#### Windows构建
|
||
```bash
|
||
# 构建Windows版本
|
||
yarn tauri build
|
||
```
|
||
|
||
#### Android构建
|
||
Android构建过程包括APK生成、签名和安装三个步骤，已通过yarn命令简化：
|
||
|
||
```bash
|
||
# 一键完成构建、签名和安装
|
||
yarn android:deploy
|
||
|
||
# 或者分步执行：
|
||
|
||
# 1. 仅构建APK
|
||
yarn android:build
|
||
|
||
# 2. 生成签名密钥（首次使用时执行）
|
||
yarn android:keygen
|
||
|
||
# 3. 签名APK
|
||
yarn android:sign
|
||
|
||
# 4. 安装到已连接的设备
|
||
yarn android:install
|
||
```
|
||
|
||
## 鸣谢
|
||
|
||
- [Tauri](https://tauri.app) - 跨平台应用开发框架
|
||
- [React](https://reactjs.org) - 用户界面库
|
||
- [Material UI](https://mui.com) - React组件库
|
||
|
||
## 支持与联系
|
||
|
||
如有问题，请联系开发团队。 |