简介这份人工智能实战微信小程序demo是一套面向小程序开发者与AI初学者的完整示例源码包适合希望快速了解AI能力如何植入微信小程序、需要参考页面组织与功能实现的读者。包内提供一个可直接运行的小程序工程包含首页、关于、我的、待办等页面模块涉及语音录制与播放、图像素材展示、录音动效等场景可帮助理解实际项目中AI相关功能的前后端衔接方式。资源共59个文件其中12个js逻辑文件、7个wxss样式文件、5个wxml页面结构文件以及5个json配置配合23个png、4个gif等图片素材整体仅1.36MB结构紧凑且易于阅读。代码中带有utils工具库与grace.js等公共脚本可用于复用请求、格式化等常用逻辑README.md提供了基本说明。目前已有241人学习浏览适合作为课设参考或快速入门的实战模板。 最近帮人做了个人工智能实战微信小程序demo没想到这套东西在群里被反复问到问得最多的就是“结构和代码到底怎么组织”“模型怎么接进去”“上线要注意哪些坑”。干脆把整个过程完整写下来从需求拆解、架构设计到编码实现再到真机调试和上线前的那堆破事一次性说清楚。这个demo不是那种只弹个“hello world”的玩具而是实打实把 AI 能力塞进了微信小程序既能做拍照识别OCR也能做智能问答还带简单的对话记忆。代码量不大但覆盖了一条完整的实战链路——小程序前端、后端服务、AI模型调用、数据持久化、鉴权与合规。换句话说你把这套 demo 拿去改一改完全可以变成自己的人工智能大作业、课程设计甚至毕设的底子。我默认你已经有最基础的微信小程序开发经验知道云开发是什么、写过几个简单页面。如果是纯零基础建议先把官方文档的“小程序起步”摸一遍再回来看这篇会顺很多。1. 项目定位与整体设计思路1.1 demo要解决什么问题做之前我先把需求捋了一遍核心就三件事演示 AI 能力在小程序端的落地方式不是简单调一个API而是有完整的请求链路和状态管理。代码结构清晰方便二次开发改个模型、换个场景都不需要伤筋动骨。能直接跑起来给老师或面试官看界面不难看、交互不拉胯、逻辑能自圆其说。所以功能上我砍掉了各种花哨的东西只保留两个最核心的能力拍照识别文字和多轮智能问答。前者用到了视觉模型后者用到了大语言模型两个场景覆盖了当前 AI 应用最常见的交互形态。识别结果可以一键复制、保存历史记录问答则支持上下文记忆连续追问不跑偏。1.2 为什么选“小程序前端 后端中转”架构很多人一上来就想着在小程序里直接调模型API这确实能跑通但实际项目中坑太多了——模型密钥直接暴露在客户端小程序审核基本过不了更别说安全性。所以我用了“前端小程序 后端中转服务”的架构小程序端负责 UI 交互、图片上传、结果展示、本地历史记录。后端服务负责接收前端请求、调用模型 API、处理返回数据、统一鉴权和限流。这样做有三个实实在在的好处。第一密钥只存在服务器环境变量里客户端完全接触不到第二所有 API 调用都在后端完成后续换模型厂商、做接口缓存、加用户鉴权都只改后端一处第三前端逻辑被简化成“发请求、收结果”代码结构清爽得多。1.3 技术选型与关键依赖具体技术栈我是这么定的模块技术选型选型理由小程序端原生小程序框架 WeUI 样式库零框架依赖包体小可读性好拷贝到别人电脑也能直接编译后端服务Node.js Express和前端同语言栈心智负担低生态成熟社区案例多AI 模型接入OpenAI 兼容接口文本生成、OCR 场景使用通用视觉接口主流云厂商基本都提供兼容格式方便一键切换数据存储后端轻量 JSON 文件存储 小程序本地缓存单人演示场景够用不做复杂数据库依赖部署方案本地局域网 工具代理调试上线时建议放到云函数或服务器容器兼顾开发效率和生产环境要求Node.js 做中转服务是最省事的你甚至可以跑在自己电脑上小程序开发者工具里开启“不校验合法域名”就能直接在模拟器里联调。等真要上线了再把后端布到云服务器域名配一下 HTTPS 就好。2. 核心功能拆解与关键实现2.1 前端页面结构与交互状态设计整个小程序一共六个页面首页功能入口 最近使用记录问答页大模型对话交互流式输出识别页拍照/相册选图 OCR 结果展示历史页所有操作的本地记录数据统计页识别数量、提问次数、使用时间分布关于页项目说明与免责声明页面一多最容易乱的就是状态管理。原生小程序没有 Vuex 这种统一状态库我自己的做法是用globalData做全局状态 页面data做局部状态。比如用户信息、会话上下文、历史记录缓存在globalData里当前页面的加载状态、识别结果、输入框内容则放在页面data里。两者互不污染逻辑清晰。问答页的核心数据流是这样的// 页面 data 关键字段 data: { messages: [], // 对话消息列表 inputValue: , isLoading: false, // 是否正在等待模型响应 currentSessionId: }每次用户发送消息先把用户消息 push 到messages再把完整上下文发送到后端等模型返回后再把助手回复 push 进去。这种“先展示、再请求、后追加”的模式是目前小程序内 AI 对话最常见的交互方式体验自然代码也好维护。2.2 后端 API 设计与鉴权思路后端我起了两个核心接口接口方法作用/api/chatPOST对话补全支持流式SSE返回/api/ocrPOST接收图片返回识别文本接口统一走 JSON 格式请求体类似这样{ userId: openid_abc123, sessionId: sess_001, messages: [ {role: user, content: 你是一个AI助手} ], imageBase64: }后端在真正调用模型之前会先做三道检查来源校验、请求体格式校验、频率限制。来源校验就是检查请求头里的自定义字段防止别人直接拿 postman 刷你的接口频率限制我用的是一个简单的内存计数器同一个 userId 一分钟内超过 20 次请求直接拒绝。这数量级在 demo 场景绰绰有余生产环境建议换 Redis 令牌桶方案。很多同学把后端写成“裸奔”的——接口谁都能调参数随意传。做作业可能没人管但如果你想放上线甚至写进简历这绝对是减分项。2.3 模型接入从提示词到参数调优模型接入这块我直接用的 OpenAI 兼容格式。请求模型时有两个参数特别关键temperature和max_tokens。问答场景我设temperature: 0.7既能保证回答有逻辑又带一点灵活性OCR 识别场景设temperature: 0.1尽量让输出保守精确。max_tokens问答设 1024识别场景设 512够用又不浪费。提示词Prompt也很重要。OCR 场景我是这样写的你是一个精确的OCR文字识别引擎。请提取图片中的所有文字内容保持原始排版格式。只输出识别到的文字不要添加任何解释。注意最后的强调——“只输出识别到的文字不要添加任何解释”。不加这句很多模型会把“好的我来识别一下”这种废话一起吐出来处理起来特别烦。多轮问答的提示词则更强调上下文连贯性你是智能学习助手demo中的AI助手。 请基于历史对话内容回答用户的问题保持回答简洁、准确、友好。 历史对话 ... 用户... 助手这样每次请求带上前文历史模型才能续上对话逻辑。demo里我限制了最多携带最近6轮消息超出的自动截断防止请求体过长拖慢响应。3. 实操过程从零搭建到跑通全流程3.1 环境准备与项目初始化实操部分我按自己的步骤来写你照着做基本能复现在微信公众平台注册小程序账号拿到 AppID。个人主体也可以只是后续有些类目会受限但对于 demo 演示完全够用。下载微信开发者工具新建项目时选“不使用模板”直接从空项目开始建。后端先建一个 Node.js 工程用npm init -y初始化安装 express、cors、axios 这几个依赖。后端目录结构我建议这么分server/ ├── index.js # 入口文件路由注册 ├── config/ │ └── index.js # 环境变量与模型配置 ├── api/ │ ├── chat.js # 对话接口逻辑 │ ├── ocr.js # 识别接口逻辑 │ └── middleware.js # 鉴权、限流中间件 └── utils/ ├── prompt.js # 提示词管理 └── response.js # 统一返回格式封装这样标准的 MVC 分层代码哪里出问题一眼就能定位后续加新功能也不会把入口文件变成意大利面。3.2 后端服务与模型对接实现后端核心逻辑在chat.js里。最基础的对话接口实现长这样// api/chat.js const express require(express); const router express.Router(); const { callLLM } require(../utils/model); const { verifyRequest, rateLimit } require(./middleware); router.post(/, verifyRequest, rateLimit, async (req, res) { const startTime Date.now(); try { const { messages } req.body; if (!Array.isArray(messages) || messages.length 0) { return res.status(400).json({ code: 400, message: 会话不能为空 }); } const reply await callLLM(messages); res.json({ code: 0, data: { reply }, cost: Date.now() - startTime }); } catch (err) { console.error(chat error:, err); res.status(500).json({ code: 500, message: AI服务暂时不可用 }); } }); module.exports router;callLLM是模型调用函数这里做个封装后续换模型只改一个文件// utils/model.js const axios require(axios); const config require(../config); async function callLLM(messages) { const { data } await axios.post( ${config.baseUrl}/chat/completions, { model: config.modelName, messages, temperature: config.temperature, max_tokens: config.maxTokens }, { headers: { Authorization: Bearer ${config.apiKey}, Content-Type: application/json } } ); return data.choices[0].message.content; }记得把apiKey放在.env文件里用dotenv加载千万别写死在代码里。提交到 GitHub 前先确认.env已在.gitignore中不然密钥泄露轻则账号受限重则被恶意刷到欠费。OCR 接口逻辑类似区别是请求体里不传文本而是传图片的 base64 编码。后端接收到图片后先做大小校验我限制 2MB 以内再转给视觉模型返回识别文本。3.3 小程序端功能实现与联调小程序端最核心的页面就是问答页。群友问得最多的问题就是流式输出到底怎么实现。这里说清楚流式输出后端返回的是 SSEServer-Sent Events格式前端用wx.request默认不支持直接读取流所以我做了个降级方案后端第一次返回正常 JSON非流式前端拿到完整内容后统一渲染。虽然等待时间稍长但胜在稳定也不会有微信版本兼容问题。要做流式可以在后端手动实现 chunked 传输前端用wx.connectSocket配合onSocketMessage逐段接收但代码复杂度会翻倍。demo 阶段我的建议是先跑通非流式再把流式当优化项加。上传图片识别也是实战中的高频操作。这里有个小细节微信小程序的wx.chooseMedia返回的临时文件路径tempFilePath直接传给后端是无效的必须先转成 base64。uploadAndRecognize() { wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [album, camera], success: (res) { const filePath res.tempFiles[0].tempFilePath; const fs wx.getFileSystemManager(); fs.readFile({ filePath, encoding: base64, success: (readRes) { const base64 readRes.data; // 压缩后再传输性能更好 this.sendOcrRequest(base64); } }); } }); }为什么临时文件不能直接用因为tempFilePath是本地临时路径只在当前会话有效后端无法直接访问小程序本地的文件系统。转成 base64 塞进 JSON 请求体才是通用的做法。大图建议先压缩图片宽度压到 1280px 以内否则请求体超过微信限制会直接报错。3.4 真机调试与发布前检查这步最容易被忽略但坑最多。模拟器里跑得飞起一上真机就各种怪问题这是常态。我的习惯是三步走开启真机调试手机上打开“开发版”小程序点右上角胶囊按钮里的“开发调试”开启后可以查看真机 console 日志。检查合法域名开发者工具一定要勾选“不校验合法域名”否则请求会被拦截。真机调试时也要在开发设置里把域名加入白名单不然请求还是过不去。体验评分开发者工具里的“体验评分”不是摆设它会分析包体积、接口耗时、安全漏洞等十几项指标。发布前跑一轮低于 80 分先别急着提交审核。发布前我还做了一个很关键的合规检查把后端接口地址从http://换成https://并把图片上传接口的大小限制收紧到 1MB。之前有次测试时传了一张 5MB 的照片请求直接超时加了这个限制之后再没有出现过类似问题。4. 常见问题与排查技巧实录这节我按自己实操中踩过的坑来排每个都给出具体排查思路你遇到类似问题时直接照着做就行。4.1 调试相关抓包与日志排查小程序开发最难受的就是网络请求出了问题只能看到屏上一个红叉也不知道后端到底返回了什么。我的排查习惯分三层第一层看开发者工具 Console 面板所有wx.request的fail回调必须打点日志输出。第二层在 Network 面板查看请求详情确认 URL、Header、Body 是否完整。第三层如果本地开发想抓 PC 端小程序的包可以给开发者工具配代理用抓包工具监听 8888 端口就能看到完整的请求响应数据。注意这是开发调试手段别拿来做非法用途。不过实际开发中最高效的方案是在后端接口入口加一行日志把入参和出参完整打印出来前端配合着打点问题定位起来快得多。真机调试模式下微信提供的 vConsole 也能看到所有网络日志值得养成习惯性打开。4.2 兼容性导航栏高度与软键盘遮挡微信小程序的顶部导航栏高度一直是个隐形的坑。不同机型、不同系统版本状态栏高度都不一样。iPhone X 以上机型有刘海状态栏高度是 44px普通安卓机型是 24px 左右但各厂商定制系统还不完全一样。我封装了一个工具函数getNavBarHeight() { const systemInfo wx.getWindowInfo(); const menuButton wx.getMenuButtonBoundingClientRect(); const navHeight (menuButton.top - systemInfo.statusBarHeight) * 2 menuButton.height; return { statusBarHeight: systemInfo.statusBarHeight, navBarHeight: navHeight }; }这个函数同时考虑了状态栏高度和胶囊按钮位置推导出的导航栏高度在绝大多数机型上都是准确的。软键盘遮挡输入框也是高频问题。问答页输入框在底部一调起键盘就把发送按钮挡住了用户根本按不到发送。解决方案是监听wx.onKeyboardHeightChange事件动态调整输入框的bottom值wx.onKeyboardHeightChange(res { this.setData({ inputBottom: res.height }); });实测这个 API 在 iOS 和 Android 上表现都比较稳定比写死高度靠谱得多。如果你在小程序里用video组件也注意别把它直接嵌在swiper里——iOS 上全屏播放后错位是高频 bug。我的做法是播放前用一个全屏遮罩层覆盖swiper播放关闭后移除避免了组件层级冲突。4.3 安全与合规签名验证与反编译风险很多同学把小程序当成不用防的黑盒其实小程序包在手机本地是有缓存的懂点技术的人抓包、反编译都能拿到你的源码和接口密钥。处理思路是接口加签名校验前端对请求参数做 MD5 签名后端用相同算法校验防止请求被篡改。imageBase64 字段做长度限制防止恶意大请求打垮后端。不在前端代码里写任何 API Key、AppSecret。反编译工具确实存在能还原小程序包内的静态资源但小程序自己的核心逻辑和密钥大多在后端前端代码被扒走影响不大。4.4 微信支付对接提醒这个不是我 demo 里的功能但后台问的人太多顺手多说一句。微信支付 v3 对接流程不算复杂——申请商户号、配置 API 密钥、下单、回调验签——但很多人在“回调验签”这步卡住。回调请求会带Wechatpay-Signature等一堆头字段需要先用平台证书公钥验签确认是微信服务器发来的再去更新订单状态。如果商家信息或支付目录配置不规范后台就会提示“支付功能暂时无法使用”这种基本都要找微信支付客服或检查商户平台的资质、类目个人开发者建议直接想清楚用不用得上再折腾别被这坑拖了进度。5. 这个demo还能怎么扩展如果你做完这个demo想继续往深挖我提供几个明确的方向接入语音输入用微信的语音识别能力把用户语音转成文字再交给AI回答交互更自然。换本地模型如果不想依赖云端API可以用 Ollama 跑本地模型后端接口逻辑完全不用改只改callLLM的实现即可。加数据可视化把历史提问、识别数据做成图表用 echarts 的微信小程序版本渲染演示效果会很加分。多轮会话管理引入真正的会话ID管理可以基于 Redis 做会话过期策略甚至支持多用户隔离。图片多场景识别目前只做OCR可以扩展成商品识别、植物识别、题目识别等场景越具体越容易出彩。每次迭代只加一个功能并且跑通后再加下一个保持 demo 的稳定性和可展示性。很多人会把 demo 越做越乱本质上是因为多个功能相互纠缠改一处挂一片教训就是把通用能力抽成公共模块把配置独立成文件模块之间别直接互相依赖。我在实际做完这套 demo 后最深的体会是AI 能力的接入本身并不复杂难的是怎么把前后端链路打通怎么处理边界情况怎么保证请求安全合规。你把这些基本功磨扎实了不管是做大作业、毕设还是以后的工作项目都能少走很多弯路。本文还有配套的精品资源点击获取