Trae助力开发者

coderzjd
836 阅读2分钟

Trae

  • Trea前几天国内发布
  • 我试了一下跟AI对话开发一个类似聊天盲盒的APP
  • 感兴趣的看源码吧

image.png

浪漫问答卡片

一个基于现代Web技术栈构建的跨平台问答卡片应用，支持Web端和Android端部署。

appPreview.png

下载安装

Android版本

点击下方链接下载安装最新版本的Android APK：

📱 下载安装包

安装说明：

  1. 下载APK文件到手机
  2. 点击APK文件开始安装
  3. 如果提示未知来源应用，请在设置中允许安装

技术栈

  • 前端框架: React 19
  • 构建工具: Vite 6
  • 移动端框架: Capacitor 7
  • 开发语言: JavaScript/TypeScript
  • 代码规范: ESLint

开发环境配置

前置要求

  • Node.js 18+
  • npm 9+
  • Android Studio (用于Android开发)
  • JDK 17+ (用于Android开发)

安装依赖

npm install

本地开发

Web端开发

启动开发服务器：

npm run dev

Android端开发

  1. 首先构建Web资源：
npm run build

2. 同步Web资源到Android项目：

npx cap sync android

3. 打开Android Studio项目：

npx cap open android

构建部署

Web端构建

npm run build

构建产物将生成在 dist 目录下。

Android端构建

  1. 确保已经完成Web端构建并同步：
npm run build
npx cap sync android

2. 使用Android Studio打开项目：

npx cap open android

3. 在Android Studio中选择Build > Build Bundle(s) / APK(s) > Build APK(s)进行构建

项目配置

Capacitor配置

主要配置文件：

  • capacitor.config.json: Capacitor全局配置
  • android/app/build.gradle: Android项目构建配置
  • android/variables.gradle: Android项目变量配置

当前Android配置：

  • 最小SDK版本：23
  • 目标SDK版本：35
  • 编译SDK版本：35

ESLint 配置

如果你正在开发生产应用，我们推荐使用 TypeScript 并启用类型感知的 lint 规则。可以参考 TS 模板 来集成 TypeScript 和 typescript-eslint。

主要功能

  • 响应式界面设计
  • 支持Web端和Android端
  • 触觉反馈支持
  • 动作感应支持
  • 手动抽签：通过点击按钮进行抽签
  • 摇一摇抽签：支持摇动设备触发抽签

项目结构

├── src/                # 源代码目录
├── public/            # 静态资源
├── android/           # Android项目目录
├── dist/              # 构建输出目录
├── vite.config.js     # Vite配置
└── capacitor.config.json  # Capacitor配置

注意事项

  • Android构建时请确保已正确配置JDK环境
  • 修改Android相关配置后需要重新运行npx cap sync android
  • 首次运行Android项目可能需要较长时间同步Gradle依赖
avatar
文章
阅读
粉丝