社会服务 | 乡农合规通 —— AI拍照识别农产品合规风险的微信小程序
一、Demo 简介
是什么： 乡农合规通是一款面向农产品电商从业者的 AI 合规助手微信小程序，核心功能是「拍照三秒，合规知道」——用户只需对着农产品拍一张照片，AI 即可自动识别产品类别、判断合规风险等级，并一键生成包含证照办理、标签规范、宣传话术的完整合规清单。
面向谁： 核心用户是农产品电商从业者（农户、合作社、家庭作坊主），特别适配中老年用户群体——全局大字体设计、大按钮交互、语音播报识别结果与合规清单，让不太擅长使用智能手机的农户也能轻松上手。
主要功能：
AI 拍照识别
对着农产品拍一张照片，AI 自动判断产品类别（初级农产品 / 初加工农产品 / 预包装深加工食品），并给出绿/黄/红三级风险等级和具体行动指引。
【首页 · 拍照识别入口】
【拍照识别页】
【识别结果页】
合规清单自动生成
根据产品识别结果 + 发货地/销售地，自动生成三部分合规清单：
证照办理指引 （证照名称、办理部门、法理依据、预计时长）
标签规范要求 （标注内容、对应国家标准如 GB 7718-2011）
宣传话术规范 （禁用词 + 建议替代词 + 职业打假高危词告警）
【合规清单页】
职业打假防护
针对农产品电商高频遭遇职业打假的痛点，内置高危词告警体系（“第一品牌”“国家级”“免检产品"等），并提供禁用词 → 建议替代词的自动替换建议（如"纯天然” → “新鲜采摘”、“产地直发”）。
法规知识库
内置食品安全法、农产品质量安全法、广告法、三小条例、GB 标准等法规库，支持搜索和分类浏览，帮助农户随时查阅相关法规。
【法规知识库页】
模板下载
提供食品标签模板、代销协议模板、小作坊申报表、合规话术指南、委托加工协议、承诺达标合格证模板等常用文档下载。
【模板下载页】
语音播报（适老化设计）
全局语音播报能力——识别结果、合规清单摘要均可一键语音播报，语速适配老年用户（0.8x），让不太识字的农户也能"听懂"合规要求。
二、Demo 创作思路
灵感来源
农产品电商近年爆发式增长，大量农户通过微信朋友圈、抖音、拼多多等渠道自产自销。然而，农产品合规是一个巨大的知识盲区——许多农户甚至不知道自己卖的东西需要办什么证、标签该怎么贴、宣传话术哪些词不能用。
与此同时，职业打假 已成为农产品电商的重灾区。一句"纯天然""无添加"的宣传，可能就引来数千元的索赔。农户们不是不想合规，而是合规门槛太高 ——法规条文晦涩难懂，办证流程复杂繁琐，找律师咨询成本太高。
想解决的问题
合规知识获取难： 农户不知道卖什么产品需要什么证，去哪办、怎么办、要多久
职业打假风险高： 不了解广告法和食品安全法的禁用词，容易踩雷
数字鸿沟大： 中老年农户占比高，现有合规工具门槛高、操作复杂
办证材料准备难： 不知道需要准备什么材料、标签该怎么标
为什么做这个方向
我选择从「识别 → 评估 → 清单」 这个最短路径切入，而非做一个大而全的合规平台。原因如下：
拍照识别是最低门槛的交互方式 ：农户不需要输入文字、不需要搜索法规，只需拍一张照片就能获得专业合规建议
三级风险体系直观易懂 ：绿（放心卖）黄（办个证再卖）红（别急着卖），比法条条文更直观
合规清单是可行动的 ：不只是告诉农户"你有风险"，而是直接给出"你需要办什么证、标签怎么贴、话术怎么说"的具体指引
适老化设计是差异竞争力 ：大字体 + 语音播报，让 60 岁的果农也能独立使用
三、Demo 体验地址
体验方式： 交互式可体验的 HTML 格式文件（小程序完整代码 + Mock 数据体系，可直接在微信开发者工具中加载运行体验全部功能）
Zip下载地址：https://github.com/Coca330/xiangnong-compliance-miniapp/archive/refs/heads/main.zip
微信开发者工具体验： 下载完整项目代码，使用微信开发者工具导入 xiangnong-compliance-miniapp 目录，AppID 可使用测试号或自行注册，即可体验全部功能（所有数据使用内置 Mock 体系，无需后端服务）
核心体验路径： 首页 → 点击「拍照识别」→ 选择图片 → AI 自动识别 → 查看识别结果（风险等级 + 行动指引）→ 生成合规清单 → 语音播报清单
四、TRAE 实践过程
本项目完全使用 TRAE IDE 进行开发，从创意到可体验 Demo 的完整过程如下：
Step 1：需求拆解与方案设计
首先在 TRAE 中描述了产品的核心需求和目标用户，TRAE 帮我完成了：
用户画像分析（农产品电商从业者、中老年用户为主）
核心功能优先级排序（AI 识别 → 合规清单 → 知识库 → 模板下载）
技术方案选型（微信原生小程序 vs uni-app，最终选择微信原生以获得最佳性能和微信能力支持）
页面结构规划（9 个页面、2 个自定义组件、4 个 Tab）
Step 2：项目骨架搭建
使用 TRAE 自动生成了小程序的完整项目骨架：
app.js / app.json / app.wxss 全局配置
9 个页面的完整文件结构（js / json / wxml / wxss）
TabBar 配置（首页、知识库、模板、我的）
全局 CSS 变量体系和中老年大字体适配方案
【截图2：项目骨架搭建对话】
Step 3：核心功能开发（AI 识别流程）
这是项目最核心的部分，在 TRAE 中分步完成了：
拍照/选图页面的 UI 开发与图片压缩逻辑
图片上传接口对接（wx.uploadFile）
识别结果页面的风险等级展示（绿/黄/红三级徽章组件开发）
AI 不确定时的三级联动品类手动选择器
行动指引和法律依据的折叠面板组件
Step 4：合规清单与 Mock 数据体系
合规清单自动生成逻辑（证照 + 标签 + 话术三部分）
省份选择器组件开发（覆盖全国 34 个省级行政区）
完整的 Mock 数据体系搭建（utils/request.js），包含 8 种农产品的模拟识别数据
Step 5：适老化设计与语音播报
全局 CSS 变量重构（font-sm: 26rpx, font-md: 30rpx, font-lg: 34rpx）
大按钮设计（88rpx 高度、圆角设计、充足点击区域）
TTS 语音播报工具开发（utils/tts.js，语速 0.8x 适配老年用户）
首页悬浮语音播报按钮
Step 6：法规知识库与模板下载
法规知识库页面（搜索 + 分类浏览 + 法规列表）
模板下载页面（分类 Tabs + 模板列表 + Mock 模板数据）
专家咨询页面（留言表单 + 历史记录）
我的页面（用户信息、识别历史、功能菜单）
开发心得与踩坑经历
Mock 数据设计是个学问 ：为了让 Demo 在没有后端的情况下也能完整体验，我设计了基于图片路径哈希的 Mock 识别逻辑——不同图片会返回不同的识别结果，让体验更真实。这个方案是和 TRAE 反复讨论后确定的，比简单的随机返回更合理。
适老化设计要落到实处 ：不只是"字体大一点"，而是从交互链路重新设计——按钮要够大（88rpx）、反馈要够明显（loading 状态、成功提示）、信息层级要够清晰（风险颜色区分）。TRAE 帮我建立了完整的 CSS 变量体系，后续调整全局只需改几个变量值。
三级风险体系的信息架构 ：最初想把所有合规信息都堆在结果页，后来在 TRAE 的建议下拆分为"结果页看风险 + 清单页看细节"的两步结构，信息密度更合理，用户不会被一次性吓到。
组件化思维 ：风险等级徽章（risk-badge）和省份选择器（province-picker）独立为组件，复用性很好，TRAE 在指导组件设计时强调了props设计和事件通信的最佳实践。
关键 Session ID 汇总
| Session ID | 对应任务 |
|---|---|
| 4355645197780800:3ede5b4980d2d8ebbe87f83f0c3af3af_6a5392b9dd4953e70aa69299.6a5392b9dd4953e70aa6929c.6a5392b9dd4953e70aa6929a:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 21:12:25) | 项目骨架搭建 |
| 4355645197780800:0178238e4c6f97751f8d23917c35a9a6_6a5392b9dd4953e70aa69299.6a53a7b8dd4953e70aa6944a.6a53a7b8dd4953e70aa69448:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 22:42:00) | 布置到微信开发者工具中 |
| 4355645197780800:205a0383cac066c082ea6bc2cccd1800_6a5392b9dd4953e70aa69299.6a53ad2ddd4953e70aa69478.6a53ad2ddd4953e70aa69476:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 23:05:17) | 修改错误 |
| 4355645197780800:afc61cd40bcd848e2f0393d1fb405b15_6a5392b9dd4953e70aa69299.6a53af6bdd4953e70aa694e6.6a53af6bdd4953e70aa694e4:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 23:14:51) | 修改错误 |