抖音小程序 - AI绘画

一句话，绘出心中所想。基于抖音小程序（字节跳动小程序）原生框架开发的 AI 绘画创作平台模板，开箱即用，可二次开发接入真实 AI 绘画能力。

一、产品简介

抖音小程序 - AI绘画 是一套完整的 AI 绘画创作类小程序源码，界面精致、交互流畅，覆盖从灵感发现、提示词创作、作品生成到作品管理的全流程。代码结构清晰、注释完善，内置本地模拟数据，无需后端即可直接在抖音开发者工具中预览运行，非常适合作为 AI 绘画类小程序的快速起步模板或学习参考。

二、功能介绍

1. 首页（创作中心）

• 渐变欢迎卡片，一键进入创作

• 浮动数据统计：我的作品数、已完成、收藏数、风格数

• 热门风格快选，点击直接以对应风格开始创作

• 精选作品瀑布流展示，支持跳转灵感广场

• 我的近期作品列表

• 平台动态公告

2. 灵感广场

• 按风格分类筛选（二次元、写实摄影、油画、赛博朋克、国风水墨、3D 渲染、像素风、奇幻插画）

• 关键字搜索（标题 / 提示词 / 作者 / 风格）

• 社区作品浏览，进入作品详情

3. 创作中心

• 风格选择预览

• 灵感提示词模板列表，一键套用

• 支持空白创作 / 选风格创作 / 套用模板创作多种入口

4. 创作表单（核心生成）

• 提示词输入 + 随机灵感一键填充

• 画面风格选择（8 种风格）

• 画面比例选择（1:1 方形、3:4 竖图、4:3 横图、9:16 手机壁纸），并带等比例缩略预览

• 分步生成动画（解析提示词 → 构图 → 渲染光影 → 精修细节）

• 生成完成后跳转作品详情

5. 我的作品

• 筛选：全部 / 收藏 / 已完成

• 关键字搜索

• 作品收藏切换、删除（带二次确认）

• 进入作品详情

6. 作品详情

• 作品大图预览（按真实比例展示）

• 提示词、风格、比例、日期等信息展示

• 点赞、收藏、下载（模拟）、复用提示词再次创作

7. 个人中心

• 用户资料展示（关注 / 粉丝 / 获赞）

• 创作数据统计

• 偏好设置开关（高清生成、水印、自动保存、消息通知）

• 会员开通（模拟）、数据重置

8. 底部导航

• 自定义 TabBar：首页 / 灵感 / 创作（凸起按钮）/ 作品 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API

• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与胶囊按钮

• 数据：内置本地 Mock 数据与模拟接口（utils/mock-api.js），基于本地存储，无需后端

• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰

• 图标：内置 blue / dark / gray / purple / white 等多套配色图标资源

• 版本管理：含 APP 版本号机制，便于发版时清理旧缓存

五、交付内容

项目目录结构（解压后）

源码_AI绘画/
├── app.js                  # 小程序入口（导航栏适配、缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
│   └── icons/{blue,dark,gray,purple,white}/
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   └── mock-data.js        # 种子演示数据
├── utils/
│   └── mock-api.js         # 模拟接口（增删改查、生成作品）
└── pages/                  # 页面
    ├── index/              # 首页
    ├── explore/            # 灵感广场
    ├── create/             # 创作中心
    ├── create-form/        # 创作表单（生成）
    ├── works/              # 我的作品
    ├── work-detail/        # 作品详情
    └── mine/               # 个人中心

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。

2. 解压 源码_AI绘画.zip。

3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_AI绘画 文件夹。

4. 填写自己的 AppID（或使用测试号），点击导入即可预览。

5. 如需接入真实 AI 绘画能力，替换 utils/mock-api.js 中 generate 方法的实现，对接实际后端接口即可。