免费开源一款作文批改小程序模版，下载即可二开

本文介绍了一款基于uni-app x开发的英语作文批改小程序模板，采用温暖的奶酪风格设计。项目主要功能包括年级选择、作文输入/拍照上传、AI批改(Mock数据)、批改报告和历史记录查看。文章详细展示了项目结构、技术实现(如主题配置、Loading动画和拍照功能)以及快速启动指南。该模板采用MIT开源协议，支持免费商用，适合面向中小学生的教育类应用开发。作者建议开发者可进一步扩展用户系统、数据持久化

菜鸟学习成功之路-李飞

456人浏览 · 2026-01-07 11:24:17

菜鸟学习成功之路-李飞 · 2026-01-07 11:24:17 发布

【开源】uni-app x 实战：从零打造一款奶酪风格的英语作文批改小程序

前言

最近在学习 uni-app x，顺手做了一个英语作文批改的小程序模板，采用了温暖的「奶酪风格」设计，非常适合面向中小学生的教育类应用。

现在把它开源出来，希望能帮助到有类似需求的开发者，也欢迎大家一起交流学习！

🧀 一个温暖可爱的教育类应用模板，适合学习 uni-app x 开发

效果预览

原型预览图

👉 在线体验原型：https://barebear.cn/projects/english-essay-assistant/app/index.html

首页	写作页	报告页	历史记录
年级选择、推荐题目	在线输入/拍照上传	AI评分、修改建议	历史列表

开源地址

平台	地址
Gitee	https://gitee.com/uniapp-template_1/essay_assistant
DCloud 插件市场	https://ext.dcloud.net.cn/plugin?id=26470
在线原型	https://barebear.cn/projects/english-essay-assistant/app/index.html

MIT 开源协议，可免费商用！

一、项目介绍

1.1 这是什么？

一款面向中小学生的英语作文批改应用模板，主要功能：

📝 选择年级和作文题目
✍️ 在线输入或拍照上传作文
🤖 AI 批改（目前是 Mock 数据，可自行对接 API）
📊 生成详细的批改报告（评分、点评、修改建议、参考范文）
📜 历史记录查看

1.2 为什么选择 uni-app x？

uni-app x 是 DCloud 推出的下一代跨平台框架，相比传统 uni-app：

特性	uni-app	uni-app x
渲染引擎	WebView	原生渲染
开发语言	JS/TS	UTS (统一类型脚本)
性能	一般	接近原生
包体积	较大	更小

简单说就是：性能更好，体验更接近原生。

1.3 设计风格

采用「奶酪风格」设计：

🎨 暖黄色主色调（#FFC107）
🍞 米色背景（#FFFBE8）
🧈 大圆角卡片（20px）
🧀 深棕色文字（#5D4037）

整体风格温暖、可爱、有亲和力，非常适合学生群体。

二、功能展示

2.1 首页

功能：
- 欢迎语展示
- 年级选择器（三年级~初三）
- 推荐题目列表
- 底部 TabBar 导航

2.2 写作页

功能：
- 题目信息展示
- Tab 切换（在线输入 / 拍照上传）
- 字数统计
- 提交批改 + Loading 动画

2.3 报告页

功能：
- 总分展示（大号数字 + 装饰）
- 三维度评分（词汇、语法、逻辑）
- AI 老师点评
- 逐条修改建议（原句→修正句→原因）
- 参考范文

2.4 历史记录页

功能：
- 历史作文列表
- 分数颜色区分（绿/黄/红）
- 点击查看详情

三、技术实现

3.1 项目结构

essayAssistant/
├── pages/
│   ├── home/home.uvue          # 首页
│   ├── writing/writing.uvue    # 写作页
│   ├── report/report.uvue      # 报告页
│   ├── history/history.uvue    # 历史页
│   └── mine/mine.uvue          # 我的
├── components/
│   └── cheese-loading/         # 加载动画组件
├── common/
│   ├── types.uts               # 类型定义
│   └── data.uts                # Mock 数据
├── prototype/                  # 原型 HTML
├── static/icons/               # TabBar 图标
├── uni.scss                    # 主题变量
├── pages.json                  # 路由配置
└── manifest.json               # 应用配置

3.2 主题色配置

在 uni.scss 中定义奶酪主题变量：

/* 主色调 - 奶酪黄 */
$cheese-primary: #FFC107;
$cheese-primary-dark: #FFB300;
$cheese-primary-light: #FFECB3;

/* 背景色 */
$cheese-bg: #FFFBE8;
$cheese-bg-card: #FFFFFF;

/* 文字颜色 */
$cheese-text-primary: #5D4037;
$cheese-text-secondary: #8D6E63;

/* 圆角 */
$cheese-radius-lg: 20px;
$cheese-radius-round: 50px;

3.3 Loading 动画实现

由于 uni-app x 对 CSS 动画支持有限，采用 JS 定时器 + 响应式数据 实现：

// 动画状态
const dotIndex = ref(0)
const tipIndex = ref(0)
const loadingTips = ['分析语法结构...', '检查词汇用法...', '评估逻辑连贯性...']

// 开始动画
function startLoadingAnimation() {
    // 圆点动画 - 每300ms切换
    dotTimer = setInterval(() => {
        dotIndex.value = (dotIndex.value + 1) % 3
    }, 300)

    // 提示文字 - 每800ms切换
    tipTimer = setInterval(() => {
        tipIndex.value = (tipIndex.value + 1) % loadingTips.length
    }, 800)
}

模板中通过 :class 绑定实现视觉切换：

<view class="dot" :class="{ active: dotIndex === 0 }"></view>
<view class="dot" :class="{ active: dotIndex === 1 }"></view>
<view class="dot" :class="{ active: dotIndex === 2 }"></view>

3.4 拍照功能

function handleUpload() {
    uni.showActionSheet({
        itemList: ['拍照', '从相册选择'],
        success: (res) => {
            const sourceType = res.tapIndex === 0 ? ['camera'] : ['album']
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: sourceType,
                success: (res) => {
                    imageUrl.value = res.tempFilePaths[0]
                }
            })
        }
    })
}

四、快速开始

4.1 环境要求

HBuilderX 4.0+
微信开发者工具（如需小程序）

4.2 运行步骤

# 1. 克隆项目
git clone https://gitee.com/uniapp-template_1/essay_assistant.git

# 2. 用 HBuilderX 打开项目

# 3. 替换 TabBar 图标（static/icons/）

# 4. 修改 manifest.json 中的 appid

# 5. 运行到目标平台