简介这份「人工智能实战微信小程序demo」面向希望把人工智能能力落地到微信小程序的开发者与学习者适合具备基础前端或小程序语法、想通过完整示例理解页面组织与交互实现的初中级人群。压缩包共59个文件约1.36MB以23个png、4个gif和2个jpg图片资源配合12个js、5个wxml、7个wxss、5个json构成典型小程序工程结构另有1个md说明文档用于辅助阅读。目录中可见首页、关于、个人中心、待办等页面模块以及utils工具、message消息组件和语音录制、播放相关脚本并附带微软AI演示素材便于对照理解页面、逻辑、样式与配置的分层方式。已有243人学习下载可作为课程实验、毕业设计原型或二次开发起点帮助读者快速熟悉项目骨架、组件拆分和资源组织减少从零搭建与排查结构问题的时间。1. 一个能跑通的小程序 AI 闭环比十个教程片段有用很多人手机里存了一堆人工智能接口文档真要做成微信小程序第一关就卡住了选完图上传失败云端返回超时开发者工具里一切正常、真机上一片空白。这份人工智能实战微信小程序demo.zip解决的就是这段最难受的路——它把「用户选图或说话 → 上传 → 调用 AI 能力 → 结果回显」这条链在小程序里完整走通了一遍页面、请求、云函数、错误提示都在。适合三类人想给现有小程序加一个 AI 入口的开发者、要交付课程设计但不想从零搭脚手架的同学、以及想验证某个识别或问答能力值不值得接的独立开发者。下面按「拆骨架 → 选路线 → 写代码 → 避坑 → 上线验证」的顺序讲每一步都能对着改。2. demo 的工程骨架从目录结构到一次 AI 请求的完整链路拿到一个 zip最忌讳的是直接双击打开、看到报错就开始改代码。先把目录摸一遍搞清楚哪部分是界面、哪部分是请求、哪部分是云端后面所有问题都会好定位。小程序项目有个特点它能跑起来的路径有两条一条是端上直接发请求一条是走云函数中转这两条路径在 demo 里往往同时存在混着看很容易误判。2.1 目录里每一样东西是干什么的一个典型的小程序 AI demo解压后基本是下面这套骨架。不同作者的命名会有出入但职责划分大同小异你按职责对号入座就行。路径职责改动频率app.js全局初始化云开发环境 ID 一般写在这里必改一次app.json页面注册、窗口样式、分包配置、权限声明加页面时改project.config.json项目配置AppID、编译设置、云函数根目录必改一次pages/index/主入口页通常是功能导航或直接是 AI 对话页常改pages/camera/或pages/upload/选图、拍照、预览、上传常改pages/result/结果展示识别框、文本卡片常改utils/request.js请求封装统一超时、错误码、重试常改utils/auth.js登录态、token 存取偶尔改cloudfunctions/云函数目录AI 密钥一般放在这里的环境变量必看components/自定义组件常见的是 loading、结果卡片偶尔改重点看两个地方。第一是utils/request.js它决定了整个项目怎么发请求、超时多少、失败怎么提示后面排查问题八成从这里入手。第二是cloudfunctions/下每个函数的index.jsAI 服务的密钥、模型名、温度参数通常都在里面这是整个 demo 的「黑匣子」不看清楚就会在报错时一头雾水。2.2 一次「选图—推理—回显」在小程序里走四段路把一次完整调用拆开看是四段第一段在端上用户点按钮触发wx.chooseMedia拿到临时文件路径。这一步不涉及网络但要注意临时路径有生命周期页面刷新或小程序切后台久了会失效所以不要先存路径再延迟上传。第二段是准备数据。如果走云开发用wx.cloud.uploadFile把文件丢到云存储拿到fileID如果走自建后端就得用wx.uploadFile走 multipart 表单。两条路的差别在于云存储的fileID只能在云函数里换成真实下载地址端上直接拼 URL 是拿不到的。第三段是推理请求。demo 的常见做法是端上wx.cloud.callFunction调一个代理函数函数里读出密钥、拼好请求体、发给 AI 服务、把结果裁成一个干净对象返回。这一层存在的意义不是「多此一举」而是密钥不能出现在小程序包里——小程序包是可以被解包看到源码的任何写在前端的密钥等于公开。第四段是回显。识别类结果通常要画框要在 canvas 上按原图比例换算坐标问答类结果要做流式或分段渲染。这一步最容易翻车的地方是坐标系错位图片被image组件用modeaspectFit缩放后你在 canvas 上按原始尺寸画的框会整体偏移。2.3 导入运行从解压到真机跑通的最小改动下面这套改动是每次拿到新 demo 我都会走一遍的顺序不要颠倒否则会出现「改了但没生效」的错觉。第一步用开发者工具「导入项目」目录选解压后的根目录不要选到子目录。AppID 那里如果暂时没有先选测试号但测试号不能用云开发后面调云函数会失败所以能填真实 AppID 就填。{ miniprogramRoot: miniprogram/, cloudfunctionRoot: cloudfunctions/, setting: { urlCheck: false, es6: true, enhance: true, postcss: true, minified: true }, appid: 填你自己的 AppID, projectname: ai-demo }这段是project.config.json里最关键的几个字段。miniprogramRoot和cloudfunctionRoot必须和实际目录对上很多 demo 解压后多套了一层文件夹导致工具找不到云函数目录右键菜单里根本没有「上传并部署」。urlCheck: false只在开发阶段有用它让工具不校验合法域名但注意这只是工具侧的行为真机不会给你这个豁免。第二步改app.js里的云环境初始化// app.js App({ onLaunch() { if (!wx.cloud) { console.error(当前基础库不支持云开发请升级基础库); return; } wx.cloud.init({ // env 必须换成你自己云开发控制台里的环境 ID // 填错的表现是调用报 -404011 或提示环境不存在 env: your-env-id, traceUser: true }); }, globalData: { // 放一些跨页共享的临时数据别把大对象塞这里 lastResult: null } });env是唯一必须改的字段写成 demo 作者的环境 ID 一定失败。traceUser打开后可以在控制台看到用户访问记录调试期有用上线前按需保留。globalData里不要放 base64 图片这类大对象它会一直驻留内存低端机上很容易被系统回收页面。第三步部署云函数。在cloudfunctions目录下每个函数上右键「上传并部署云端安装依赖」。这一步会读函数目录下的package.json如果作者没写依赖或者依赖版本写死了旧版本会在这里报错。装完之后在控制台看日志确认函数列表里有对应条目。第四步真机预览。点「预览」扫码重点验证三件事图片能不能选、请求有没有发出去、结果有没有正常显示。工具里跑通不算数真机才是唯一标准原因在第 5 章展开。3. 三条 AI 接入路线怎么选云函数、自建后端与端侧推理demo 给了你一条能跑的路线但不代表它适合你的场景。同样是「小程序调 AI」三条路在成本、可控性、合规负担上差得很远。选错路线后面每加一个功能都要还债。3.1 云函数代理demo 默认最省事的一条路云函数的核心价值是把密钥和后端逻辑从小程序包里挪出去同时省掉域名备案和服务器运维。它的调用链是端上wx.cloud.callFunction→ 云端执行 → 返回结果。整个过程不需要你配置任何合法域名这是它对新手最友好的地方。// cloudfunctions/aiProxy/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); // 密钥从云函数环境变量读不要硬编码在这个文件里 // 控制台 - 云函数 - 配置 - 环境变量 里加 AI_API_KEY const API_KEY process.env.AI_API_KEY; const ENDPOINT process.env.AI_ENDPOINT; // 例如 https://api.example.com/v1/analyze exports.main async (event, context) { const { fileID, text } event; // 参数校验放在最前面失败了直接返回别浪费一次外部请求 if (!fileID !text) { return { code: 400, msg: 缺少 fileID 或 text }; } try { // fileID 只能在云端换成临时下载地址 let imageUrl ; if (fileID) { const res await cloud.getTempFileURL({ fileList: [fileID] }); imageUrl res.fileList[0].tempFileURL; } const resp await fetch(ENDPOINT, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY} }, body: JSON.stringify({ image_url: imageUrl, query: text || }) }); if (!resp.ok) { // 把上游状态码原样带回来方便端上区分是限流还是参数错 return { code: resp.status, msg: 上游服务返回异常 }; } const data await resp.json(); // 只回传端上真正要用的字段减少传输体积 return { code: 0, label: data.label, score: data.score, boxes: data.boxes || [] }; } catch (err) { // 错误信息要打日志但不要原样抛给端上避免泄露内部地址 console.error(aiProxy error, err); return { code: 500, msg: 服务暂时不可用 }; } };这段代码有几个点值得说。cloud.DYNAMIC_CURRENT_ENV让函数自动使用当前所在环境省得写死环境 ID。密钥走环境变量而不是代码是为了避免代码上传后被人从控制台或仓库里翻出来。返回值做裁剪很关键上游返回的原始 JSON 往往几百 KB端上根本用不上全量透传会让小程序的白屏时间明显变长。参数上要注意两个默认值云函数的超时时间默认是秒级具体几秒看配置跑图片识别这种任务要在控制台里往上调内存默认值偏小处理大图时容易 OOM建议至少调到 256MB 起步。3.2 自建后端网关可控但要先解决域名和鉴权当你的 AI 调用需要复用已有业务系统、需要做精细的计费和限流、或者需要落库存历史记录时云函数就不够用了得走自建后端。这条路的代价是服务器、域名、HTTPS 证书、备案、以及在小程序后台配置 request 合法域名一样都不能少。配置合法域名的规则很死只能是 HTTPS不能带端口不能是 IP必须已完成备案一个月内修改次数有限制。很多人在这一步翻车是因为把测试环境的域名配上去上线时忘了换或者反过来在开发期就配了生产域名导致测试数据打到线上库。// utils/request.js const BASE_URL https://api.example.com; // 必须是在后台配好的合法域名 const DEFAULT_TIMEOUT 15000; function request(path, options {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL path, method: options.method || POST, data: options.data || {}, timeout: options.timeout || DEFAULT_TIMEOUT, header: { Content-Type: application/json, // token 从本地存储取过期了在拦截层统一处理 Authorization: Bearer (wx.getStorageSync(token) || ) }, success(res) { if (res.statusCode 200 res.data.code 0) { resolve(res.data.data); return; } // 401 单独处理跳登录页不要在这里弹 toast 完事 if (res.statusCode 401) { wx.removeStorageSync(token); wx.navigateTo({ url: /pages/login/login }); reject(new Error(unauthorized)); return; } reject(new Error(res.data.msg || 请求失败)); }, fail(err) { // 网络层失败和业务层失败要分开提示文案不一样 reject(new Error(err.errMsg || network error)); } }); }); } module.exports { request };timeout建议显式写死默认值是 60 秒对一个要展示加载动画的 AI 请求来说太长了用户等 15 秒没反应就会退出。Authorization的取法要统一不要在某个页面里手写 token 字符串否则后期换鉴权方案要改几十处。fail回调和success里的业务错误必须分开处理前者是网络问题后者是服务端逻辑问题混在一起会让排查变成玄学。3.3 端侧推理与插件什么时候该放弃小程序也支持跑一些轻量模型比如图像分类、简单 OCR通过端侧推理框架或者插件市场里的能力接入。优点是响应快、不依赖网络、没有调用费用缺点是包体积涨得厉害、模型精度受限、平台对动态加载模型文件有约束。我一般这么判断如果你的需求是「通用物体识别、人脸比对、大段文本理解」直接放弃端侧走云端如果是「固定几类标签的分类、证件号识别、离线场景」端侧才值得考虑。不要因为「端侧听起来更高级」就硬上一个几百 KB 的模型塞进主包很容易把主包顶到 2MB 红线后面加个页面都要分包。插件方案要注意的是审核和权限。插件市场里的 AI 能力大多需要单独申请、单独计费且部分插件对小程序类目有要求个人主体不一定能用。选之前先看清楚「支持的主体类型」和「是否需要额外资质」别做到一半才发现用不了。3.4 超时、并发、重试这三个参数怎么定这三个参数决定了 demo 在你的真实场景里是稳还是崩。超时分层设置。端上wx.request的 timeout 设为 15 秒左右云函数内部的执行超时设为端上超时的 1.5 倍上游 AI 服务的请求超时再比云函数短一点。这样做的目的是让错误在最近的一层暴露而不是端上等了 60 秒、云函数早就超时退出、用户看到的是一个莫名其妙的失败。并发要主动限流。用户连续点五次「识别」如果你不拦就是五次上传加五次推理流量翻五倍、费用翻五倍还可能触发上游的频率限制。简单做法是在页面 data 里放一个loading标志请求期间禁用按钮更稳的做法是在utils里维护一个队列同时最多跑一个任务。重试要有条件。只对网络层失败和 5xx 重试4xx 一律不重试因为参数错了重试一百次还是错。重试次数控制在 1 到 2 次间隔用递增比如 1 秒、3 秒不要用固定间隔固定间隔容易在服务端抖动时形成雪崩。4. 三个高频功能的代码骨架图像、语音、对话demo 里最常出现的三类 AI 功能是图片识别、语音输入、对话问答。它们的端上骨架差别不大坑却各不相同。下面按「能直接抄」的粒度写参数含义都标在代码里。4.1 图片选择与压缩上传的完整参数图片这条路的核心矛盾是清晰度和传输体积打架。原图动辄 3 到 5MB直接转 base64 传给云函数很容易触发请求体大小限制或者云函数内存超限表现就是「偶尔成功、偶尔失败」非常难查。// pages/upload/upload.js Page({ data: { uploading: false, previewUrl: }, async chooseAndUpload() { if (this.data.uploading) return; // count 限制一次选几张sizeType 选 compressed 让系统先压一轮 const media await wx.chooseMedia({ count: 1, mediaType: [image], sizeType: [compressed], sourceType: [album, camera] }); const filePath media.tempFiles[0].tempFilePath; // 再压一次指定最长边和画质避免系统压缩不够狠 // compressedWidth 需要较新的基础库老版本会忽略这个参数 const compressed await wx.compressImage({ src: filePath, quality: 80, compressedWidth: 1280 }); this.setData({ uploading: true, previewUrl: compressed.tempFilePath }); try { const cloudPath ai-input/${Date.now()}-${Math.floor(Math.random() * 1000)}.jpg; const res await wx.cloud.uploadFile({ cloudPath, filePath: compressed.tempFilePath }); // fileID 交给云函数端上不要试图自己拼下载地址 const result await wx.cloud.callFunction({ name: aiProxy, data: { fileID: res.fileID } }); this.setData({ uploading: false }); wx.navigateTo({ url: /pages/result/result?data encodeURIComponent(JSON.stringify(result.result)) }); } catch (err) { this.setData({ uploading: false }); wx.showToast({ title: 识别失败请重试, icon: none }); console.error(upload failed, err); } } });quality: 80和compressedWidth: 1280是我反复试出来比较平衡的一组值文字类图片在这个尺寸下识别率基本不掉文件体积能压到 200KB 以内云函数处理起来很轻松。如果做的是人脸或细粒度分类可以把宽度提到 1600但要注意体积会跟着涨。cloudPath里拼时间戳加随机数是为了避免同名覆盖。云存储的同名文件默认是覆盖行为两个用户同时上传同一路径后一个会把前一个顶掉表现就是「结果偶尔串号」这种 bug 找起来极其难受。还有一点临时文件路径不要存到globalData里跨页传递后再上传页面跳转和切后台都可能导致临时文件失效。选择完立即上传是最稳的做法。4.2 对话问答流式渲染与 setData 节流对话类界面最影响体验的不是模型答得好不好而是「用户按下发送后屏幕多久开始有反应」。等 8 秒一次性蹦出一大段文字观感远不如逐字出现。小程序原生的wx.request支持分块接收但要通过enableChunked打开且需要较新的基础库。如果后端不方便做流式退而求其次的做法是「首字快、后续补」先返回一句简短的确认再异步返回完整答案。// pages/chat/chat.js Page({ data: { answer: , pending: false }, onInput(e) { this.query e.detail.value; }, async ask() { if (!this.query || this.data.pending) return; this.setData({ pending: true, answer: }); wx.request({ url: https://api.example.com/chat, method: POST, enableChunked: true, // 打开分块接收旧基础库会走普通模式 header: { Content-Type: application/json }, data: { q: this.query }, success: () { this.setData({ pending: false }); }, fail: (err) { this.setData({ pending: false, answer: 请求失败请稍后重试 }); console.error(err); } }); // 分块回调里做节流不要每来一个 chunk 就 setData const task this.requestTask; let buffer ; let timer null; task.onChunkReceived((res) { // ArrayBuffer 转字符串注意中文可能被切断要按 UTF-8 拼接 buffer this.decodeChunk(res.data); if (timer) return; timer setTimeout(() { timer null; this.setData({ answer: buffer }); }, 80); }); }, decodeChunk(buffer) { return new TextDecoder(utf-8).decode(new Uint8Array(buffer), { stream: true }); } });节流的间隔 80ms 是个经验值太快会让渲染线程忙不过来表现为界面卡顿、输入框吞字太慢就没有流式的观感了。TextDecoder的stream: true参数必须加不加的话一个中文字被切在两个 chunk 里就会变成乱码这个问题在英文环境测不出来中文语料一测一个准。如果用的是云函数代理而不是直连后端流式基本没法做因为wx.cloud.callFunction是一次性返回的。这时候比较务实的方案是端上先显示「正在思考」的占位骨架等结果回来一次性替换配合打字机动画模拟逐字效果。体验上不如真流式但比干等 10 秒强很多。4.3 语音录制与转写链路的格式坑语音这条路最常见的失败原因是格式不匹配。录音管理器默认输出的格式不一定是你调用的转写服务接受的格式采样率不对也会导致识别率明显下降。// utils/recorder.js const recorder wx.getRecorderManager(); function startRecord() { recorder.start({ duration: 60000, // 最长 60 秒超时自动停止 sampleRate: 16000, // 语音识别常用采样率别用 44100 numberOfChannels: 1, // 单声道足够双声道会白白翻倍体积 encodeBitRate: 48000, // 配合 16k 采样率的常见码率 format: mp3, // 转写服务大多支持 mp3aac 需要确认 frameSize: 4 // 每 4KB 回调一次用于画音量波形 }); } recorder.onStop((res) { // res.tempFilePath 是临时文件同样要尽快上传 console.log(record done, res.duration, res.fileSize); }); recorder.onError((err) { // 常见错误用户拒绝麦克风权限、被电话打断 console.error(recorder error, err); });sampleRate: 16000和numberOfChannels: 1是语音转写场景的通用配置音频体积能压到 1MB/分钟左右云函数处理起来很快。format要根据下游服务来定有的服务只吃 wav 或 pcm这时候就得在端上转换或者交给云函数转别指望服务端自动兼容所有格式。权限是个绕不开的坑。第一次调用录音接口会弹授权框用户点了拒绝之后再调用不会弹了只会静默失败。正确做法是在onError里判断错误类型引导用户去设置页手动打开wx.showModal({ title: 需要麦克风权限, content: 请在设置中开启麦克风权限后重试, success: (res) { if (res.confirm) wx.openSetting(); } });4.4 结果缓存与降级让 demo 在弱网下不崩demo 通常不做缓存每次点都重新请求。真实场景里这样很浪费尤其是同一个问题被反复问、同一张图被反复传的情况。缓存策略我一般这么做文本结果按「问题文本的哈希」做 key存wx.setStorageSync带一个时间戳字段超过 10 分钟就失效图片结果不做本地缓存因为图片本身太大只缓存「图片内容哈希 → 结果」的映射哈希用文件大小加文件名粗略生成即可不必上完整摘要算法。降级要有兜底。网络请求失败时如果本地有可用的历史结果先展示历史结果并标注「可能是旧数据」如果完全没有就展示一个明确的重试按钮而不是空白页。这一条听起来简单但很多 demo 在断网测试时直接白屏用户根本不知道发生了什么。function getCache(key) { const item wx.getStorageSync(key); if (!item) return null; // 超过 10 分钟视为过期 if (Date.now() - item.ts 10 * 60 * 1000) { wx.removeStorageSync(key); return null; } return item.value; }缓存要注意容量小程序单个 key 的存储上限是 1MB总上限 10MB。别把整个响应体塞进去只存端上真正要展示的字段。5. 避坑与排查真机上跑不通的五个高频问题这一章是我踩过的坑里出现频率最高的五个全部按「现象 → 原因 → 解决」写。如果你只读一章读这章。5.1 开发者工具里一切正常真机请求全挂现象模拟器里点按钮请求正常返回结果正常显示扫码预览到手机上点同一个按钮要么一直转圈要么直接提示「请求失败」控制台里连请求记录都没有。原因project.config.json里的urlCheck: false只作用于开发者工具真机不认这个豁免。真机上只有在小程序后台「开发设置 → 服务器域名」里配置过的域名才能请求而且必须是 HTTPS、不能带端口、必须已备案。另外还有一个容易忽略的点配置后不是立刻生效通常要等几分钟改了域名马上测会以为是配置没生效。解决先确认域名配置无误再用真机的「打开调试」模式看 vConsole 里的具体报错。报「url not in domain list」就是域名没配报「ssl handshake failed」是证书链不完整报超时是服务端没响应或者网络环境问题。如果只是临时调试可以在真机上打开「调试模式」但上线前必须把域名配齐不能依赖这个开关。5.2 云函数初始化失败与 -404011现象调用云函数时返回-404011或者提示「cloud init failed」控制台里云函数列表是空的右键菜单里也没有「上传并部署」。原因三种情况最常见。一是app.js里的env填的是 demo 作者的环境 ID你的账号下根本没有这个环境二是项目目录结构和project.config.json里的cloudfunctionRoot对不上工具识别不到云函数目录三是根本没开通云开发测试号尤其容易出这个问题。解决先去云开发控制台确认环境 ID复制粘贴到app.js注意不要带多余空格。然后检查目录层级如果解压后是xxx-demo/cloudfunctions而配置文件写的是cloudfunctions/就要么改配置要么把目录提上来。最后确认账号已开通云开发且当前 AppID 有权限测试号换正式号。提示改完app.js一定要重新编译云开发的初始化只在onLaunch里执行一次热重载有时候不会重新触发。5.3 大图上传后推理结果错乱现象小图识别正常传一张手机原图返回的识别框位置全偏或者干脆返回空结果有时候上传直接失败提示「请求体过大」。原因这里其实是两个问题叠在一起。一是坐标换算image组件默认的mode是scaleToFill会把图片拉伸变形你在 canvas 上按原图宽高比画的框自然对不上。二是图片没压缩几 MB 的图转成 base64 后体积膨胀约三分之一很容易超过云函数请求体限制。解决image组件加modeaspectFit然后在bindload回调里拿到图片渲染后的实际宽高按比例换算坐标。压缩按 4.1 节的参数走最长边控制在 1280画质 80。如果业务要求必须看原图细节就把原图存云存储端上展示压缩图画框时用压缩图的尺寸做基准。5.4 setData 卡顿与长列表白屏现象对话页聊到二三十轮之后输入框开始卡打字有延迟或者结果页要渲染上百个识别框页面直接白屏几秒。原因setData是跨线程通信单次传输数据量超过 1MB 会明显卡顿而且它会触发页面重新渲染。很多人习惯this.setData({ list: this.data.list.concat(newItem) })每次全量传整个数组轮次一多就是灾难。解决只传变化的部分用路径写法this.setData({ [list[ index ]]: item })。长列表用scroll-view加虚拟列表只渲染可视区域内的节点。识别框超过 50 个时考虑合并成一张图用 canvas 一次性绘制而不是每个框一个view。5.5 冷启动超时与「第一次总是失败」现象小程序放置一段时间后第一次调用 AI 功能必定超时失败紧接着重试第二次就正常了。用户第一次打开的体验极差。原因云函数有冷启动长时间没人调用时实例会被回收下一次调用要重新拉起运行环境这个过程可能持续几秒。如果端上超时设得紧就会在冷启动完成前先断开。解决端上超时放宽到 15 秒以上给冷启动留出余量云函数里对上游请求加重试一次失败立刻重试一次首屏进入时做一个「预热调用」在用户真正操作前先把函数拉起来。还可以在页面上放骨架屏让等待有明确反馈比空白转圈体感好得多。6. 上线前的验证清单包体积、内容安全与一个压测小技巧从 demo 到能上线中间隔着的不是功能而是几条硬性红线。这个 demo 的功能已经完整了剩下的活主要是「别踩线」。6.1 主包 2MB 红线怎么守住主包体积上限是 2MB这是硬约束超了直接传不上去。demo 里最容易占体积的是这三类本地图标和背景图、没用到的第三方库、以及打包进来的示例数据。处理顺序是先看体积构成开发者工具的「代码依赖分析」能直接告诉你哪个目录最胖。图片一律换成网络地址或者用字体图标非要在本地放就压到 WebP第三方库按需引入lodash这种整包引入能占几百 KB示例数据全部删掉。如果还是超就把非首屏页面拆到分包里主包里只留入口页和公共工具。6.2 内容安全接口该在哪个环节接只要涉及用户输入和 AI 生成内容就得做内容安全检测。检测点有两个用户提交的文本或图片在进入 AI 之前先过一遍AI 返回的文本在展示给用户之前再过一遍。前者防的是用户输入违规内容后者防的是模型输出不可控内容。实现上文本检测和图片检测都有对应的开放接口需要在云函数里调用因为端上直接调会暴露凭证而且部分接口要求服务端环境。检测是异步的图片检测尤其如此所以端上要有「审核中」的中间态不能检测没回来就直接展示。注意内容安全检测要考虑失败放行还是失败拦截。我的做法是「检测服务异常时拦截并提示重试」宁可让用户多点一次也不要把未检测的内容直接展示出去。6.3 一个我常用的弱网验证技巧开发者工具的网络面板能模拟弱网但它模拟不出真实的「切后台、锁屏、地铁进隧道」这些场景。我的做法是拿一部旧手机开飞行模式后打开小程序把所有页面点一遍看哪些地方会白屏、哪些按钮点了没反应、哪些 loading 状态永远不结束。这个测试经常能揪出真问题。比如某次我发现结果页在断网时一直转圈原因是wx.request的fail回调里只写了console.log忘了把loading置回 false。这种 bug 在网络好的时候永远不会出现一上线就被用户撞上。从那以后我每次改完请求层都会强制走一遍「飞行模式点全流程」再补一个「请求中途切后台再切回来」的用例确认页面状态不会错乱。这套习惯救过我很多次希望帮到你。本文还有配套的精品资源点击获取
简介这份「人工智能实战微信小程序demo」面向希望把人工智能能力落地到微信小程序的开发者与学习者适合具备基础前端或小程序语法、想通过完整示例理解页面组织与交互实现的初中级人群。压缩包共59个文件约1.36MB以23个png、4个gif和2个jpg图片资源配合12个js、5个wxml、7个wxss、5个json构成典型小程序工程结构另有1个md说明文档用于辅助阅读。目录中可见首页、关于、个人中心、待办等页面模块以及utils工具、message消息组件和语音录制、播放相关脚本并附带微软AI演示素材便于对照理解页面、逻辑、样式与配置的分层方式。已有243人学习下载可作为课程实验、毕业设计原型或二次开发起点帮助读者快速熟悉项目骨架、组件拆分和资源组织减少从零搭建与排查结构问题的时间。1. 一个能跑通的小程序 AI 闭环比十个教程片段有用很多人手机里存了一堆人工智能接口文档真要做成微信小程序第一关就卡住了选完图上传失败云端返回超时开发者工具里一切正常、真机上一片空白。这份人工智能实战微信小程序demo.zip解决的就是这段最难受的路——它把「用户选图或说话 → 上传 → 调用 AI 能力 → 结果回显」这条链在小程序里完整走通了一遍页面、请求、云函数、错误提示都在。适合三类人想给现有小程序加一个 AI 入口的开发者、要交付课程设计但不想从零搭脚手架的同学、以及想验证某个识别或问答能力值不值得接的独立开发者。下面按「拆骨架 → 选路线 → 写代码 → 避坑 → 上线验证」的顺序讲每一步都能对着改。2. demo 的工程骨架从目录结构到一次 AI 请求的完整链路拿到一个 zip最忌讳的是直接双击打开、看到报错就开始改代码。先把目录摸一遍搞清楚哪部分是界面、哪部分是请求、哪部分是云端后面所有问题都会好定位。小程序项目有个特点它能跑起来的路径有两条一条是端上直接发请求一条是走云函数中转这两条路径在 demo 里往往同时存在混着看很容易误判。2.1 目录里每一样东西是干什么的一个典型的小程序 AI demo解压后基本是下面这套骨架。不同作者的命名会有出入但职责划分大同小异你按职责对号入座就行。路径职责改动频率app.js全局初始化云开发环境 ID 一般写在这里必改一次app.json页面注册、窗口样式、分包配置、权限声明加页面时改project.config.json项目配置AppID、编译设置、云函数根目录必改一次pages/index/主入口页通常是功能导航或直接是 AI 对话页常改pages/camera/或pages/upload/选图、拍照、预览、上传常改pages/result/结果展示识别框、文本卡片常改utils/request.js请求封装统一超时、错误码、重试常改utils/auth.js登录态、token 存取偶尔改cloudfunctions/云函数目录AI 密钥一般放在这里的环境变量必看components/自定义组件常见的是 loading、结果卡片偶尔改重点看两个地方。第一是utils/request.js它决定了整个项目怎么发请求、超时多少、失败怎么提示后面排查问题八成从这里入手。第二是cloudfunctions/下每个函数的index.jsAI 服务的密钥、模型名、温度参数通常都在里面这是整个 demo 的「黑匣子」不看清楚就会在报错时一头雾水。2.2 一次「选图—推理—回显」在小程序里走四段路把一次完整调用拆开看是四段第一段在端上用户点按钮触发wx.chooseMedia拿到临时文件路径。这一步不涉及网络但要注意临时路径有生命周期页面刷新或小程序切后台久了会失效所以不要先存路径再延迟上传。第二段是准备数据。如果走云开发用wx.cloud.uploadFile把文件丢到云存储拿到fileID如果走自建后端就得用wx.uploadFile走 multipart 表单。两条路的差别在于云存储的fileID只能在云函数里换成真实下载地址端上直接拼 URL 是拿不到的。第三段是推理请求。demo 的常见做法是端上wx.cloud.callFunction调一个代理函数函数里读出密钥、拼好请求体、发给 AI 服务、把结果裁成一个干净对象返回。这一层存在的意义不是「多此一举」而是密钥不能出现在小程序包里——小程序包是可以被解包看到源码的任何写在前端的密钥等于公开。第四段是回显。识别类结果通常要画框要在 canvas 上按原图比例换算坐标问答类结果要做流式或分段渲染。这一步最容易翻车的地方是坐标系错位图片被image组件用modeaspectFit缩放后你在 canvas 上按原始尺寸画的框会整体偏移。2.3 导入运行从解压到真机跑通的最小改动下面这套改动是每次拿到新 demo 我都会走一遍的顺序不要颠倒否则会出现「改了但没生效」的错觉。第一步用开发者工具「导入项目」目录选解压后的根目录不要选到子目录。AppID 那里如果暂时没有先选测试号但测试号不能用云开发后面调云函数会失败所以能填真实 AppID 就填。{ miniprogramRoot: miniprogram/, cloudfunctionRoot: cloudfunctions/, setting: { urlCheck: false, es6: true, enhance: true, postcss: true, minified: true }, appid: 填你自己的 AppID, projectname: ai-demo }这段是project.config.json里最关键的几个字段。miniprogramRoot和cloudfunctionRoot必须和实际目录对上很多 demo 解压后多套了一层文件夹导致工具找不到云函数目录右键菜单里根本没有「上传并部署」。urlCheck: false只在开发阶段有用它让工具不校验合法域名但注意这只是工具侧的行为真机不会给你这个豁免。第二步改app.js里的云环境初始化// app.js App({ onLaunch() { if (!wx.cloud) { console.error(当前基础库不支持云开发请升级基础库); return; } wx.cloud.init({ // env 必须换成你自己云开发控制台里的环境 ID // 填错的表现是调用报 -404011 或提示环境不存在 env: your-env-id, traceUser: true }); }, globalData: { // 放一些跨页共享的临时数据别把大对象塞这里 lastResult: null } });env是唯一必须改的字段写成 demo 作者的环境 ID 一定失败。traceUser打开后可以在控制台看到用户访问记录调试期有用上线前按需保留。globalData里不要放 base64 图片这类大对象它会一直驻留内存低端机上很容易被系统回收页面。第三步部署云函数。在cloudfunctions目录下每个函数上右键「上传并部署云端安装依赖」。这一步会读函数目录下的package.json如果作者没写依赖或者依赖版本写死了旧版本会在这里报错。装完之后在控制台看日志确认函数列表里有对应条目。第四步真机预览。点「预览」扫码重点验证三件事图片能不能选、请求有没有发出去、结果有没有正常显示。工具里跑通不算数真机才是唯一标准原因在第 5 章展开。3. 三条 AI 接入路线怎么选云函数、自建后端与端侧推理demo 给了你一条能跑的路线但不代表它适合你的场景。同样是「小程序调 AI」三条路在成本、可控性、合规负担上差得很远。选错路线后面每加一个功能都要还债。3.1 云函数代理demo 默认最省事的一条路云函数的核心价值是把密钥和后端逻辑从小程序包里挪出去同时省掉域名备案和服务器运维。它的调用链是端上wx.cloud.callFunction→ 云端执行 → 返回结果。整个过程不需要你配置任何合法域名这是它对新手最友好的地方。// cloudfunctions/aiProxy/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); // 密钥从云函数环境变量读不要硬编码在这个文件里 // 控制台 - 云函数 - 配置 - 环境变量 里加 AI_API_KEY const API_KEY process.env.AI_API_KEY; const ENDPOINT process.env.AI_ENDPOINT; // 例如 https://api.example.com/v1/analyze exports.main async (event, context) { const { fileID, text } event; // 参数校验放在最前面失败了直接返回别浪费一次外部请求 if (!fileID !text) { return { code: 400, msg: 缺少 fileID 或 text }; } try { // fileID 只能在云端换成临时下载地址 let imageUrl ; if (fileID) { const res await cloud.getTempFileURL({ fileList: [fileID] }); imageUrl res.fileList[0].tempFileURL; } const resp await fetch(ENDPOINT, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY} }, body: JSON.stringify({ image_url: imageUrl, query: text || }) }); if (!resp.ok) { // 把上游状态码原样带回来方便端上区分是限流还是参数错 return { code: resp.status, msg: 上游服务返回异常 }; } const data await resp.json(); // 只回传端上真正要用的字段减少传输体积 return { code: 0, label: data.label, score: data.score, boxes: data.boxes || [] }; } catch (err) { // 错误信息要打日志但不要原样抛给端上避免泄露内部地址 console.error(aiProxy error, err); return { code: 500, msg: 服务暂时不可用 }; } };这段代码有几个点值得说。cloud.DYNAMIC_CURRENT_ENV让函数自动使用当前所在环境省得写死环境 ID。密钥走环境变量而不是代码是为了避免代码上传后被人从控制台或仓库里翻出来。返回值做裁剪很关键上游返回的原始 JSON 往往几百 KB端上根本用不上全量透传会让小程序的白屏时间明显变长。参数上要注意两个默认值云函数的超时时间默认是秒级具体几秒看配置跑图片识别这种任务要在控制台里往上调内存默认值偏小处理大图时容易 OOM建议至少调到 256MB 起步。3.2 自建后端网关可控但要先解决域名和鉴权当你的 AI 调用需要复用已有业务系统、需要做精细的计费和限流、或者需要落库存历史记录时云函数就不够用了得走自建后端。这条路的代价是服务器、域名、HTTPS 证书、备案、以及在小程序后台配置 request 合法域名一样都不能少。配置合法域名的规则很死只能是 HTTPS不能带端口不能是 IP必须已完成备案一个月内修改次数有限制。很多人在这一步翻车是因为把测试环境的域名配上去上线时忘了换或者反过来在开发期就配了生产域名导致测试数据打到线上库。// utils/request.js const BASE_URL https://api.example.com; // 必须是在后台配好的合法域名 const DEFAULT_TIMEOUT 15000; function request(path, options {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL path, method: options.method || POST, data: options.data || {}, timeout: options.timeout || DEFAULT_TIMEOUT, header: { Content-Type: application/json, // token 从本地存储取过期了在拦截层统一处理 Authorization: Bearer (wx.getStorageSync(token) || ) }, success(res) { if (res.statusCode 200 res.data.code 0) { resolve(res.data.data); return; } // 401 单独处理跳登录页不要在这里弹 toast 完事 if (res.statusCode 401) { wx.removeStorageSync(token); wx.navigateTo({ url: /pages/login/login }); reject(new Error(unauthorized)); return; } reject(new Error(res.data.msg || 请求失败)); }, fail(err) { // 网络层失败和业务层失败要分开提示文案不一样 reject(new Error(err.errMsg || network error)); } }); }); } module.exports { request };timeout建议显式写死默认值是 60 秒对一个要展示加载动画的 AI 请求来说太长了用户等 15 秒没反应就会退出。Authorization的取法要统一不要在某个页面里手写 token 字符串否则后期换鉴权方案要改几十处。fail回调和success里的业务错误必须分开处理前者是网络问题后者是服务端逻辑问题混在一起会让排查变成玄学。3.3 端侧推理与插件什么时候该放弃小程序也支持跑一些轻量模型比如图像分类、简单 OCR通过端侧推理框架或者插件市场里的能力接入。优点是响应快、不依赖网络、没有调用费用缺点是包体积涨得厉害、模型精度受限、平台对动态加载模型文件有约束。我一般这么判断如果你的需求是「通用物体识别、人脸比对、大段文本理解」直接放弃端侧走云端如果是「固定几类标签的分类、证件号识别、离线场景」端侧才值得考虑。不要因为「端侧听起来更高级」就硬上一个几百 KB 的模型塞进主包很容易把主包顶到 2MB 红线后面加个页面都要分包。插件方案要注意的是审核和权限。插件市场里的 AI 能力大多需要单独申请、单独计费且部分插件对小程序类目有要求个人主体不一定能用。选之前先看清楚「支持的主体类型」和「是否需要额外资质」别做到一半才发现用不了。3.4 超时、并发、重试这三个参数怎么定这三个参数决定了 demo 在你的真实场景里是稳还是崩。超时分层设置。端上wx.request的 timeout 设为 15 秒左右云函数内部的执行超时设为端上超时的 1.5 倍上游 AI 服务的请求超时再比云函数短一点。这样做的目的是让错误在最近的一层暴露而不是端上等了 60 秒、云函数早就超时退出、用户看到的是一个莫名其妙的失败。并发要主动限流。用户连续点五次「识别」如果你不拦就是五次上传加五次推理流量翻五倍、费用翻五倍还可能触发上游的频率限制。简单做法是在页面 data 里放一个loading标志请求期间禁用按钮更稳的做法是在utils里维护一个队列同时最多跑一个任务。重试要有条件。只对网络层失败和 5xx 重试4xx 一律不重试因为参数错了重试一百次还是错。重试次数控制在 1 到 2 次间隔用递增比如 1 秒、3 秒不要用固定间隔固定间隔容易在服务端抖动时形成雪崩。4. 三个高频功能的代码骨架图像、语音、对话demo 里最常出现的三类 AI 功能是图片识别、语音输入、对话问答。它们的端上骨架差别不大坑却各不相同。下面按「能直接抄」的粒度写参数含义都标在代码里。4.1 图片选择与压缩上传的完整参数图片这条路的核心矛盾是清晰度和传输体积打架。原图动辄 3 到 5MB直接转 base64 传给云函数很容易触发请求体大小限制或者云函数内存超限表现就是「偶尔成功、偶尔失败」非常难查。// pages/upload/upload.js Page({ data: { uploading: false, previewUrl: }, async chooseAndUpload() { if (this.data.uploading) return; // count 限制一次选几张sizeType 选 compressed 让系统先压一轮 const media await wx.chooseMedia({ count: 1, mediaType: [image], sizeType: [compressed], sourceType: [album, camera] }); const filePath media.tempFiles[0].tempFilePath; // 再压一次指定最长边和画质避免系统压缩不够狠 // compressedWidth 需要较新的基础库老版本会忽略这个参数 const compressed await wx.compressImage({ src: filePath, quality: 80, compressedWidth: 1280 }); this.setData({ uploading: true, previewUrl: compressed.tempFilePath }); try { const cloudPath ai-input/${Date.now()}-${Math.floor(Math.random() * 1000)}.jpg; const res await wx.cloud.uploadFile({ cloudPath, filePath: compressed.tempFilePath }); // fileID 交给云函数端上不要试图自己拼下载地址 const result await wx.cloud.callFunction({ name: aiProxy, data: { fileID: res.fileID } }); this.setData({ uploading: false }); wx.navigateTo({ url: /pages/result/result?data encodeURIComponent(JSON.stringify(result.result)) }); } catch (err) { this.setData({ uploading: false }); wx.showToast({ title: 识别失败请重试, icon: none }); console.error(upload failed, err); } } });quality: 80和compressedWidth: 1280是我反复试出来比较平衡的一组值文字类图片在这个尺寸下识别率基本不掉文件体积能压到 200KB 以内云函数处理起来很轻松。如果做的是人脸或细粒度分类可以把宽度提到 1600但要注意体积会跟着涨。cloudPath里拼时间戳加随机数是为了避免同名覆盖。云存储的同名文件默认是覆盖行为两个用户同时上传同一路径后一个会把前一个顶掉表现就是「结果偶尔串号」这种 bug 找起来极其难受。还有一点临时文件路径不要存到globalData里跨页传递后再上传页面跳转和切后台都可能导致临时文件失效。选择完立即上传是最稳的做法。4.2 对话问答流式渲染与 setData 节流对话类界面最影响体验的不是模型答得好不好而是「用户按下发送后屏幕多久开始有反应」。等 8 秒一次性蹦出一大段文字观感远不如逐字出现。小程序原生的wx.request支持分块接收但要通过enableChunked打开且需要较新的基础库。如果后端不方便做流式退而求其次的做法是「首字快、后续补」先返回一句简短的确认再异步返回完整答案。// pages/chat/chat.js Page({ data: { answer: , pending: false }, onInput(e) { this.query e.detail.value; }, async ask() { if (!this.query || this.data.pending) return; this.setData({ pending: true, answer: }); wx.request({ url: https://api.example.com/chat, method: POST, enableChunked: true, // 打开分块接收旧基础库会走普通模式 header: { Content-Type: application/json }, data: { q: this.query }, success: () { this.setData({ pending: false }); }, fail: (err) { this.setData({ pending: false, answer: 请求失败请稍后重试 }); console.error(err); } }); // 分块回调里做节流不要每来一个 chunk 就 setData const task this.requestTask; let buffer ; let timer null; task.onChunkReceived((res) { // ArrayBuffer 转字符串注意中文可能被切断要按 UTF-8 拼接 buffer this.decodeChunk(res.data); if (timer) return; timer setTimeout(() { timer null; this.setData({ answer: buffer }); }, 80); }); }, decodeChunk(buffer) { return new TextDecoder(utf-8).decode(new Uint8Array(buffer), { stream: true }); } });节流的间隔 80ms 是个经验值太快会让渲染线程忙不过来表现为界面卡顿、输入框吞字太慢就没有流式的观感了。TextDecoder的stream: true参数必须加不加的话一个中文字被切在两个 chunk 里就会变成乱码这个问题在英文环境测不出来中文语料一测一个准。如果用的是云函数代理而不是直连后端流式基本没法做因为wx.cloud.callFunction是一次性返回的。这时候比较务实的方案是端上先显示「正在思考」的占位骨架等结果回来一次性替换配合打字机动画模拟逐字效果。体验上不如真流式但比干等 10 秒强很多。4.3 语音录制与转写链路的格式坑语音这条路最常见的失败原因是格式不匹配。录音管理器默认输出的格式不一定是你调用的转写服务接受的格式采样率不对也会导致识别率明显下降。// utils/recorder.js const recorder wx.getRecorderManager(); function startRecord() { recorder.start({ duration: 60000, // 最长 60 秒超时自动停止 sampleRate: 16000, // 语音识别常用采样率别用 44100 numberOfChannels: 1, // 单声道足够双声道会白白翻倍体积 encodeBitRate: 48000, // 配合 16k 采样率的常见码率 format: mp3, // 转写服务大多支持 mp3aac 需要确认 frameSize: 4 // 每 4KB 回调一次用于画音量波形 }); } recorder.onStop((res) { // res.tempFilePath 是临时文件同样要尽快上传 console.log(record done, res.duration, res.fileSize); }); recorder.onError((err) { // 常见错误用户拒绝麦克风权限、被电话打断 console.error(recorder error, err); });sampleRate: 16000和numberOfChannels: 1是语音转写场景的通用配置音频体积能压到 1MB/分钟左右云函数处理起来很快。format要根据下游服务来定有的服务只吃 wav 或 pcm这时候就得在端上转换或者交给云函数转别指望服务端自动兼容所有格式。权限是个绕不开的坑。第一次调用录音接口会弹授权框用户点了拒绝之后再调用不会弹了只会静默失败。正确做法是在onError里判断错误类型引导用户去设置页手动打开wx.showModal({ title: 需要麦克风权限, content: 请在设置中开启麦克风权限后重试, success: (res) { if (res.confirm) wx.openSetting(); } });4.4 结果缓存与降级让 demo 在弱网下不崩demo 通常不做缓存每次点都重新请求。真实场景里这样很浪费尤其是同一个问题被反复问、同一张图被反复传的情况。缓存策略我一般这么做文本结果按「问题文本的哈希」做 key存wx.setStorageSync带一个时间戳字段超过 10 分钟就失效图片结果不做本地缓存因为图片本身太大只缓存「图片内容哈希 → 结果」的映射哈希用文件大小加文件名粗略生成即可不必上完整摘要算法。降级要有兜底。网络请求失败时如果本地有可用的历史结果先展示历史结果并标注「可能是旧数据」如果完全没有就展示一个明确的重试按钮而不是空白页。这一条听起来简单但很多 demo 在断网测试时直接白屏用户根本不知道发生了什么。function getCache(key) { const item wx.getStorageSync(key); if (!item) return null; // 超过 10 分钟视为过期 if (Date.now() - item.ts 10 * 60 * 1000) { wx.removeStorageSync(key); return null; } return item.value; }缓存要注意容量小程序单个 key 的存储上限是 1MB总上限 10MB。别把整个响应体塞进去只存端上真正要展示的字段。5. 避坑与排查真机上跑不通的五个高频问题这一章是我踩过的坑里出现频率最高的五个全部按「现象 → 原因 → 解决」写。如果你只读一章读这章。5.1 开发者工具里一切正常真机请求全挂现象模拟器里点按钮请求正常返回结果正常显示扫码预览到手机上点同一个按钮要么一直转圈要么直接提示「请求失败」控制台里连请求记录都没有。原因project.config.json里的urlCheck: false只作用于开发者工具真机不认这个豁免。真机上只有在小程序后台「开发设置 → 服务器域名」里配置过的域名才能请求而且必须是 HTTPS、不能带端口、必须已备案。另外还有一个容易忽略的点配置后不是立刻生效通常要等几分钟改了域名马上测会以为是配置没生效。解决先确认域名配置无误再用真机的「打开调试」模式看 vConsole 里的具体报错。报「url not in domain list」就是域名没配报「ssl handshake failed」是证书链不完整报超时是服务端没响应或者网络环境问题。如果只是临时调试可以在真机上打开「调试模式」但上线前必须把域名配齐不能依赖这个开关。5.2 云函数初始化失败与 -404011现象调用云函数时返回-404011或者提示「cloud init failed」控制台里云函数列表是空的右键菜单里也没有「上传并部署」。原因三种情况最常见。一是app.js里的env填的是 demo 作者的环境 ID你的账号下根本没有这个环境二是项目目录结构和project.config.json里的cloudfunctionRoot对不上工具识别不到云函数目录三是根本没开通云开发测试号尤其容易出这个问题。解决先去云开发控制台确认环境 ID复制粘贴到app.js注意不要带多余空格。然后检查目录层级如果解压后是xxx-demo/cloudfunctions而配置文件写的是cloudfunctions/就要么改配置要么把目录提上来。最后确认账号已开通云开发且当前 AppID 有权限测试号换正式号。提示改完app.js一定要重新编译云开发的初始化只在onLaunch里执行一次热重载有时候不会重新触发。5.3 大图上传后推理结果错乱现象小图识别正常传一张手机原图返回的识别框位置全偏或者干脆返回空结果有时候上传直接失败提示「请求体过大」。原因这里其实是两个问题叠在一起。一是坐标换算image组件默认的mode是scaleToFill会把图片拉伸变形你在 canvas 上按原图宽高比画的框自然对不上。二是图片没压缩几 MB 的图转成 base64 后体积膨胀约三分之一很容易超过云函数请求体限制。解决image组件加modeaspectFit然后在bindload回调里拿到图片渲染后的实际宽高按比例换算坐标。压缩按 4.1 节的参数走最长边控制在 1280画质 80。如果业务要求必须看原图细节就把原图存云存储端上展示压缩图画框时用压缩图的尺寸做基准。5.4 setData 卡顿与长列表白屏现象对话页聊到二三十轮之后输入框开始卡打字有延迟或者结果页要渲染上百个识别框页面直接白屏几秒。原因setData是跨线程通信单次传输数据量超过 1MB 会明显卡顿而且它会触发页面重新渲染。很多人习惯this.setData({ list: this.data.list.concat(newItem) })每次全量传整个数组轮次一多就是灾难。解决只传变化的部分用路径写法this.setData({ [list[ index ]]: item })。长列表用scroll-view加虚拟列表只渲染可视区域内的节点。识别框超过 50 个时考虑合并成一张图用 canvas 一次性绘制而不是每个框一个view。5.5 冷启动超时与「第一次总是失败」现象小程序放置一段时间后第一次调用 AI 功能必定超时失败紧接着重试第二次就正常了。用户第一次打开的体验极差。原因云函数有冷启动长时间没人调用时实例会被回收下一次调用要重新拉起运行环境这个过程可能持续几秒。如果端上超时设得紧就会在冷启动完成前先断开。解决端上超时放宽到 15 秒以上给冷启动留出余量云函数里对上游请求加重试一次失败立刻重试一次首屏进入时做一个「预热调用」在用户真正操作前先把函数拉起来。还可以在页面上放骨架屏让等待有明确反馈比空白转圈体感好得多。6. 上线前的验证清单包体积、内容安全与一个压测小技巧从 demo 到能上线中间隔着的不是功能而是几条硬性红线。这个 demo 的功能已经完整了剩下的活主要是「别踩线」。6.1 主包 2MB 红线怎么守住主包体积上限是 2MB这是硬约束超了直接传不上去。demo 里最容易占体积的是这三类本地图标和背景图、没用到的第三方库、以及打包进来的示例数据。处理顺序是先看体积构成开发者工具的「代码依赖分析」能直接告诉你哪个目录最胖。图片一律换成网络地址或者用字体图标非要在本地放就压到 WebP第三方库按需引入lodash这种整包引入能占几百 KB示例数据全部删掉。如果还是超就把非首屏页面拆到分包里主包里只留入口页和公共工具。6.2 内容安全接口该在哪个环节接只要涉及用户输入和 AI 生成内容就得做内容安全检测。检测点有两个用户提交的文本或图片在进入 AI 之前先过一遍AI 返回的文本在展示给用户之前再过一遍。前者防的是用户输入违规内容后者防的是模型输出不可控内容。实现上文本检测和图片检测都有对应的开放接口需要在云函数里调用因为端上直接调会暴露凭证而且部分接口要求服务端环境。检测是异步的图片检测尤其如此所以端上要有「审核中」的中间态不能检测没回来就直接展示。注意内容安全检测要考虑失败放行还是失败拦截。我的做法是「检测服务异常时拦截并提示重试」宁可让用户多点一次也不要把未检测的内容直接展示出去。6.3 一个我常用的弱网验证技巧开发者工具的网络面板能模拟弱网但它模拟不出真实的「切后台、锁屏、地铁进隧道」这些场景。我的做法是拿一部旧手机开飞行模式后打开小程序把所有页面点一遍看哪些地方会白屏、哪些按钮点了没反应、哪些 loading 状态永远不结束。这个测试经常能揪出真问题。比如某次我发现结果页在断网时一直转圈原因是wx.request的fail回调里只写了console.log忘了把loading置回 false。这种 bug 在网络好的时候永远不会出现一上线就被用户撞上。从那以后我每次改完请求层都会强制走一遍「飞行模式点全流程」再补一个「请求中途切后台再切回来」的用例确认页面状态不会错乱。这套习惯救过我很多次希望帮到你。本文还有配套的精品资源点击获取
到O(n)的优化)
