简介游戏社区攻略小程序Demo源码是一份面向微信小程序初学者的参考项目涵盖从框架搭建到社区互动的核心开发链路。源码共191个文件包括73个WXSS样式文件、35个JS逻辑文件、32个JSON配置、31个WXML页面结构文件及20张图片素材压缩包仅160KB结构简洁适合快速上手。已有42人学习下载。资源重点展示了小程序基础框架、页面导航与数据绑定、用户界面设计、以及攻略内容的展示与存储方式同时涉及用户登录、分享、评论、点赞等交互实现并兼顾数据加密、代码压缩及网络请求优化等安全性能措施。对于想了解社区类小程序如何实现用户发布攻略、回复评论、关注好友等功能的开发者这份源码提供了可直接参考的代码思路与页面逻辑。借助这份Demo开发者可缩短从学习到实战的路径快速构建自己的游戏社区攻略小程序。1. 拆解游戏社区攻略小程序 Demo从文件清单到运行逻辑这份游戏社区攻略-小程序Demo源码.zip解压后里面是一套完整的微信小程序原生项目。值得注意的不是那一堆index.js重复出现而是hellspawnSearch.js、http.js、uploader.js、dialog.js这几个文件组成的链路。它们分别承担了攻略搜索、网络请求、图片上传和用户反馈正好覆盖了一个社区类小程序从列表加载到发布攻略的全部流程。对刚开始做小程序开发的人来说这份源码可以当作一个已经跑得通的最小框架对写过几年业务页面的工程师更有价值的反而是这些工具模块的拆分方式和边界。下面按运行顺序拆文件不按目录顺序。2. 小程序源码主干app.js 全局配置与 index.js 页面控制器2.1 全局 App 实例为什么要放 globalDataapp.js是小程序启动时第一个执行的脚本App()会注册全局实例。社区攻略类小程序常见的做法是把登录态、用户信息、接口根地址全部放在globalData里避免每个页面进城后都重新读一次缓存。// app.js App({ globalData: { userInfo: null, baseUrl: https://api.example.com/game, token: }, onLaunch() { // 冷启动时从本地缓存读 token避免每次都触发登录 const token wx.getStorageSync(token); if (token) { this.globalData.token token; } } });onLaunch只在小程序初始化时执行一次适合做缓存的预读取。globalData本身不是响应式的页面对这个对象的修改不会自动驱动视图更新所以我的习惯是只把不涉及渲染的数据放进去真正的列表和表单状态放在页面data中。2.2 页面控制器 index.js 的数据流源码里出现两次index.js并不奇怪一般是一个放在pages/index/下作为首页控制器另一个放在components/下作为某个列表组件或搜索组件。首页控制器的核心职责是拉取攻略列表、处理分页、触发搜索。// index.js const http require(./http.js); // 实际路径以项目结构为准 Page({ data: { list: [], page: 1, hasMore: true }, onLoad() { this.fetchList(); }, fetchList() { return http.get(/guide/list, { page: this.data.page }).then(res { const list this.data.page 1 ? res.list : this.data.list.concat(res.list); this.setData({ list, hasMore: res.hasMore }); }); }, onReachBottom() { if (this.data.hasMore) { this.setData({ page: this.data.page 1 }); this.fetchList(); } }, onPullDownRefresh() { this.setData({ page: 1 }); this.fetchList().finally(() wx.stopPullDownRefresh()); } });onReachBottom触底加载依赖hasMore字段防止下一页接口被重复触发。onPullDownRefresh里需要手动把page重置为 1否则下拉刷新后拼接出来的列表会重复。wx.stopPullDownRefresh用finally调用这样即使接口失败加载动画也能正常关闭。2.3 文件结构与职责对照文件职责说明app.js全局入口注册小程序实例管理 globalDataindex.js页面控制器攻略列表、分页加载、搜索入口hellspawnSearch.js搜索逻辑关键字匹配、标签过滤、排序input.js输入框交互搜索输入、表单输入、防抖处理http.js请求封装wx.request 包装、header 注入、错误码处理uploader.js上传封装wx.uploadFile 包装、多图上传dialog.js用户反馈toast、loading、模态框统一封装base64.js编解码工具图片或参数的 base64 转换vcode.jpg静态资源验证码图片或示例占位图从这张表能看出这份源码是典型的“工具模块 页面控制器”结构。没有把搜索写死在页面里也没有在页面里到处调用wx.request整体维护成本会低很多。2.4 渲染层与逻辑层setData 的边界微信小程序的视图层和逻辑层是分开的setData是把数据从逻辑层传到渲染层的唯一通道但这个通道有开销。社区攻略页面的列表如果一次性渲染几百条用户滑动时会出现明显卡顿。常见做法是后端分页前端每次只往列表里concat一页数据并且控制图片数量。另外helloSearch.js这类纯逻辑模块尽量不依赖wxAPI方便以后直接用 Node 脚本做单元测试。这也是拆模块时值得参考的边界纯函数留在普通 JS 文件里页面只负责调用和绑定数据。3. 社区攻略搜索hellspawnSearch.js 的关键字匹配与过滤3.1 隔离搜索逻辑而不是堆在 Page 里hellspawnSearch.js是这份源码里最耐看的文件。搜索逻辑如果写在页面里筛选条件一多index.js会膨胀到很难维护。源码的做法是把匹配、过滤、排序抽成一个模块对外只暴露一个方法。// hellspawnSearch.js function search(list, keyword, tag) { if (!list || list.length 0) return []; const kw (keyword || ).trim().toLowerCase(); return list.filter(item { const hitKeyword !kw || item.title.toLowerCase().includes(kw) || item.desc.toLowerCase().includes(kw); let hitTag true; if (tag) { hitTag item.tags item.tags.includes(tag); } return hitKeyword hitTag; }).sort((a, b) { // 先按权重降序再按创建时间倒序 if (a.weight ! b.weight) return (b.weight || 0) - (a.weight || 0); return new Date(b.createAt) - new Date(a.createAt); }); } module.exports { search };这里的toLowerCase()让关键词匹配不区分大小写适合攻略标题和描述这种中英文混排内容。tags.includes(tag)是数组判断如果 tags 是字符串就要换成indexOf(tag) -1。排序时用(b.weight || 0)防止空字段参与减法产生NaN这是很容易踩的坑。3.2 输入框的防抖与键盘处理input.js负责搜索框和表单输入的交互。搜索框最典型的问题是用户每敲一个字就发起请求既浪费带宽又容易造成旧请求覆盖新结果。所以必须做防抖。// input.js let timer null; function onSearchInput(e) { const keyword e.detail.value; clearTimeout(timer); timer setTimeout(() { this.setData({ keyword }); this.fetchSearch(keyword); // 300ms 后真正触发搜索 }, 300); }clearTimeout清掉上一次定时器只有用户停止输入超过 300ms 才发起请求。这个值在真机上可以适当调大到 500ms尤其遇到低端安卓机键盘弹起和中文输入法组合会拖慢事件触发。使用这个函数时需要在页面onLoad里绑定 this例如this.onSearchInput input.onSearchInput.bind(this);否则函数内部的this会丢失。3.3 搜索状态与页面联动搜索结果和推荐流共用一个列表页是社区类小程序的常规设计。源码里可以这样处理增加searchMode字段区分当前展示的是推荐流还是搜索结果。// index.js 片段 data: { searchMode: false, searchKeyword: , searchList: [] }, onSearchConfirm({ detail }) { const keyword detail.value.trim(); if (!keyword) return; this.setData({ searchMode: true, searchKeyword: keyword }); this.fetchSearch(keyword); }, onClearSearch() { // 还原推荐流避免切 tab 后还停留在过滤结果 this.setData({ searchMode: false, searchKeyword: , searchList: [] }); }搜索确认后把searchMode置为 true列表渲染和触底加载都走搜索接口清空关键词后恢复推荐流。如果不做这个状态切换用户搜索完切去其他 tab 再回来列表内容还是过滤后的体验很怪。3.4 关键词高亮与正则转义搜索结果页通常需要把命中的关键词标成高亮这个逻辑也可以放在hellspawnSearch.js或单独的工具文件里。function highlight(text, keyword) { if (!keyword) return text; const escaped keyword.replace(/[.*?^${}()|[\]\\]/g, \\$); const reg new RegExp((${escaped}), gi); return text.replace(reg, text classhl$1/text); }注意先对关键词里的正则特殊字符做转义否则用户搜“新手”这类带括号的内容RegExp会直接报错。highlight返回的字符串需要放在rich-text组件里渲染直接在text组件里输出会把text当成普通文本展示。这一步是很多小程序开发新手容易忽略的。4. 请求层http.js 的 wx.request 封装与 base64 编解码4.1 统一请求入口和错误码wx.request的重复代码太多每次都要拼 URL、加 header、判断 HTTP 状态码、处理登录失效。http.js把这些收敛成get、post方法业务方只需要传入接口地址和数据。// http.js function request(method, url, data, options {}) { const app getApp(); const token app.globalData.token; if (options.showLoading) { wx.showLoading({ title: 加载中 }); } return new Promise((resolve, reject) { wx.request({ url: app.globalData.baseUrl url, method, data, header: { Content-Type: application/json, Authorization: token ? Bearer token : }, success(res) { if (res.statusCode 200 res.data.code 0) { resolve(res.data.data); } else if (res.statusCode 401) { wx.navigateTo({ url: /pages/login/login }); reject(new Error(login expired)); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(new Error(res.data.msg || request error)); } }, fail(err) { reject(err); }, complete() { if (options.showLoading) wx.hideLoading(); } }); }); }这里把 HTTP 状态码和业务状态码分开判断code 0是业务成功statusCode 401是登录态失效。Token 校验用Authorization: Bearer头后端如果走 JWT 可以直接对接。showLoading由调用方按需开启接口内部在complete里统一关闭避免 loading 永远关不掉。4.2 请求竞态旧响应覆盖新数据社区搜索场景有个隐藏问题用户在输入过程中连续触发搜索先发出的请求可能比后发出的晚返回旧数据就会覆盖新结果。防抖能减少触发次数但不能彻底解决网络竞态。常见做法是维护一个请求序号只有最新序号的结果允许写入页面。// index.js let searchSeq 0; function fetchSearch(keyword) { const seq searchSeq; return http.get(/guide/search, { keyword }).then(res { // 只处理最新一次请求防止旧响应覆盖新列表 if (seq searchSeq) { this.setData({ searchList: res.list }); } }); }这个写法比abort简单而且不会因为中断请求带来额外的fail处理成本。只要seq不是最新值返回值就直接忽略。4.3 base64.js 在验证码和图片处理中的应用base64.js在源码里放在工具模块通常用于两种场景一是把图片文件转成 base64 串传给后端二是处理后端返回的验证码图片数据。vcode.jpg和它配合说明登录或发布流程里有验证码校验。// base64 转换示例 function fileToBase64(filePath) { return new Promise((resolve, reject) { wx.getFileSystemManager().readFile({ filePath, encoding: base64, success: res resolve(res.data), fail: reject }); }); }使用wx.getFileSystemManager().readFile可以把本地临时图片编码成 base64。这个操作对内存占用不小只适合验证码、头像这类几十 KB 的小文件。攻略正文配图应该走uploader.js传到服务器或 CDN拿到 URL 后再展示而不是把整个图片塞进请求体。5. 发布攻略的完整链路uploader.js 上传、vcode.jpg 验证码与 dialog.js 反馈5.1 从选图到上传社区攻略发布离不开图片。uploader.js做的事情是把wx.chooseMedia拿到的文件路径通过wx.uploadFile发给后端并处理返回的 URL。// uploader.js function upload(filePath) { const app getApp(); return new Promise((resolve, reject) { wx.uploadFile({ url: app.globalData.baseUrl /upload, filePath, name: file, header: { Authorization: Bearer app.globalData.token }, success(res) { // uploadFile 的 res.data 是字符串必须手动转 JSON const data JSON.parse(res.data); if (data.code 0) { resolve(data.url); } else { reject(new Error(data.msg || 上传失败)); } }, fail: reject }); }); }name字段对应后端接口接收文件的参数名两边不一致会直接拿不到文件。wx.uploadFile返回的res.data是字符串不是对象这里必须手动JSON.parse这是最容易被当作 bug 处理的点。上传接口和业务接口通常不共用同一个封装因为wx.uploadFile不支持Content-Type: application/json方式的 body 传参只能走formData。5.2 验证码在发布流程中的位置vcode.jpg在 Demo 里可能是本地占位图真实项目中验证码应该由后端生成前端拿到图片 URL 或 base64 字符串后再显示。用户输入验证码后input.js拿到输入值连同攻略正文一起提交。// 发布前校验 if (!this.data.vcode) { dialog.toast(请输入验证码); return; } if (this.data.vcode.length ! 4) { dialog.toast(验证码格式不对); return; }验证码的作用是防止脚本批量灌水游戏社区里刷攻略、刷评论很常见。但要注意验证码通常是一次性的提交失败后需要重新刷新vcode.jpg否则用户第二次提交时看到的还是旧图校验大概率失败。刷新图片时URL 后面最好拼一个时间戳参数避免缓存。5.3 dialog.js反馈组件的一致性dialog.js的作用是统一wx.showToast、wx.showModal和wx.showLoading这样全局的交互风格保持一致。发布成功弹一个 toast删除攻略前弹一个确认框不用每个页面各写一套。// dialog.js function toast(title) { wx.showToast({ title, icon: none, duration: 2000 }); } function confirm(content) { return new Promise(resolve { wx.showModal({ title: 提示, content, success: res resolve(res.confirm) }); }); } module.exports { toast, confirm };toast的icon: none可以显示纯文字但真机上最多显示两行超出部分会被截断所以较长错误信息建议走confirm或独立错误页。confirm用 Promise 包装页面里可以配合async/await写删除逻辑代码更线性。5.4 参数与异常场景对照场景涉及文件关键参数失败表现攻略列表加载http.js / index.jspage, pageSize列表空白检查 baseUrl 和域名白名单搜索攻略hellspawnSearch.js / input.jskeyword, tag搜索无结果确认字段名大小写发表图片uploader.jsfilePath, nameJSON.parse 失败确认后端回包格式验证码校验vcode.jpg / input.jsvcode401 或提交失败刷新验证码登录态过期http.js / dialog.jsAuthorization所有请求返回 401跳转登录页排查时可以按这张表定位先确定问题发生在哪个文件对应的链路环节再去看日志里的状态码。很多页面没反应的问题根因其实在http.js的header拼写或后端域名没备案。5.5 多图上传的并发控制一个攻略带多张图片时直接Promise.all并发上传全部文件虽然快但容易把内存和带宽打满。常见做法是分批发每批 3 张。async function uploadFiles(filePaths, limit 3) { const results []; for (let i 0; i filePaths.length; i limit) { const batch filePaths.slice(i, i limit); // 串行批次避免瞬时内存峰值 const urls await Promise.all(batch.map(upload)); results.push(...urls); } return results; }这个函数把filePaths按limit切成若干批每批内部并发上传批与批之间串行。limit在安卓机上建议取 2 到 3iOS 可以放宽到 4。上传完成后把results里的 URL 拼到攻略内容里一起提交整个发布链路就闭环了。6. 上线前要检查的细节包体、域名与登录态续期6.1 把静态验证码图片挪出主包vcode.jpg放在主包里会导致包体变大微信小程序主包 2MB、总包 20MB 的限制一直都在。Demo 里保留它是为了方便本地调试上线前的替换做法是改成接口返回图片 URLthis.setData({ // 拼时间戳防止微信浏览器缓存同一张验证码 vcodeUrl: app.globalData.baseUrl /captcha?ts Date.now() });URL 后面拼Date.now()是为了绕过缓存。很多人忽略了这一步导致验证码刷新后还是同一张旧图用户连续输错几次就会认为产品有 bug。6.2 登录态续期不能只跳登录页http.js里碰到401就跳登录页对 Demo 来说够用但真实环境里用户会频繁遇到 token 过期每过一小时就跳一次登录流失率很高。常见做法是维护一个refreshToken在 401 时静默续期并重放原请求。// 简化版先刷新 token再重试原来的请求 } else if (res.statusCode 401) { const refreshToken wx.getStorageSync(refreshToken); wx.request({ url: app.globalData.baseUrl /auth/refresh, method: POST, data: { refreshToken }, success: r { app.globalData.token r.data.token; wx.setStorageSync(token, r.data.token); resolve(request(method, url, data, options)); } }); }这个逻辑要小心里面的循环调用resolve(request(...))只在刷新成功后再执行一次如果刷新接口自己又返回 401就要主动跳登录页避免无限递归。6.3 真机预览前的三项检查用开发者工具能跑通不代表真机没问题。我发布前固定检查三件事第一所有请求域名必须是 HTTPS并且在小程序后台把域名加进request、uploadFile合法域名第二uploadFile的并发数量控制在 3 以内弱网条件下减少图片压缩和上传的峰值内存第三用wx.getNetworkType判断当前网络类型弱网时提示用户优先使用 Wi-Fi再决定是否继续上传多张图片。提示如果发布后图片加载缓慢优先排查 CDN 的可用性而不是反复在小程序代码里做无谓的优化。验证方式很简单打开微信开发者工具的「真机调试」在 Network 面板里看每个请求的耗时和statusCode特别关注 401 和超时请求。把这三个检查项过一遍社区类小程序常见的图片传不上去、列表加载失败问题基本能消掉大半。本文还有配套的精品资源点击获取 
长河君 · 2026/9/15 11:31:07 · 阅读 1.2k 微信小程序社区攻略源码拆解：搜索、请求与上传模块实战
简介游戏社区攻略小程序Demo源码是一份面向微信小程序初学者的参考项目涵盖从框架搭建到社区互动的核心开发链路。源码共191个文件包括73个WXSS样式文件、35个JS逻辑文件、32个JSON配置、31个WXML页面结构文件及20张图片素材压缩包仅160KB结构简洁适合快速上手。已有42人学习下载。资源重点展示了小程序基础框架、页面导航与数据绑定、用户界面设计、以及攻略内容的展示与存储方式同时涉及用户登录、分享、评论、点赞等交互实现并兼顾数据加密、代码压缩及网络请求优化等安全性能措施。对于想了解社区类小程序如何实现用户发布攻略、回复评论、关注好友等功能的开发者这份源码提供了可直接参考的代码思路与页面逻辑。借助这份Demo开发者可缩短从学习到实战的路径快速构建自己的游戏社区攻略小程序。1. 拆解游戏社区攻略小程序 Demo从文件清单到运行逻辑这份游戏社区攻略-小程序Demo源码.zip解压后里面是一套完整的微信小程序原生项目。值得注意的不是那一堆index.js重复出现而是hellspawnSearch.js、http.js、uploader.js、dialog.js这几个文件组成的链路。它们分别承担了攻略搜索、网络请求、图片上传和用户反馈正好覆盖了一个社区类小程序从列表加载到发布攻略的全部流程。对刚开始做小程序开发的人来说这份源码可以当作一个已经跑得通的最小框架对写过几年业务页面的工程师更有价值的反而是这些工具模块的拆分方式和边界。下面按运行顺序拆文件不按目录顺序。2. 小程序源码主干app.js 全局配置与 index.js 页面控制器2.1 全局 App 实例为什么要放 globalDataapp.js是小程序启动时第一个执行的脚本App()会注册全局实例。社区攻略类小程序常见的做法是把登录态、用户信息、接口根地址全部放在globalData里避免每个页面进城后都重新读一次缓存。// app.js App({ globalData: { userInfo: null, baseUrl: https://api.example.com/game, token: }, onLaunch() { // 冷启动时从本地缓存读 token避免每次都触发登录 const token wx.getStorageSync(token); if (token) { this.globalData.token token; } } });onLaunch只在小程序初始化时执行一次适合做缓存的预读取。globalData本身不是响应式的页面对这个对象的修改不会自动驱动视图更新所以我的习惯是只把不涉及渲染的数据放进去真正的列表和表单状态放在页面data中。2.2 页面控制器 index.js 的数据流源码里出现两次index.js并不奇怪一般是一个放在pages/index/下作为首页控制器另一个放在components/下作为某个列表组件或搜索组件。首页控制器的核心职责是拉取攻略列表、处理分页、触发搜索。// index.js const http require(./http.js); // 实际路径以项目结构为准 Page({ data: { list: [], page: 1, hasMore: true }, onLoad() { this.fetchList(); }, fetchList() { return http.get(/guide/list, { page: this.data.page }).then(res { const list this.data.page 1 ? res.list : this.data.list.concat(res.list); this.setData({ list, hasMore: res.hasMore }); }); }, onReachBottom() { if (this.data.hasMore) { this.setData({ page: this.data.page 1 }); this.fetchList(); } }, onPullDownRefresh() { this.setData({ page: 1 }); this.fetchList().finally(() wx.stopPullDownRefresh()); } });onReachBottom触底加载依赖hasMore字段防止下一页接口被重复触发。onPullDownRefresh里需要手动把page重置为 1否则下拉刷新后拼接出来的列表会重复。wx.stopPullDownRefresh用finally调用这样即使接口失败加载动画也能正常关闭。2.3 文件结构与职责对照文件职责说明app.js全局入口注册小程序实例管理 globalDataindex.js页面控制器攻略列表、分页加载、搜索入口hellspawnSearch.js搜索逻辑关键字匹配、标签过滤、排序input.js输入框交互搜索输入、表单输入、防抖处理http.js请求封装wx.request 包装、header 注入、错误码处理uploader.js上传封装wx.uploadFile 包装、多图上传dialog.js用户反馈toast、loading、模态框统一封装base64.js编解码工具图片或参数的 base64 转换vcode.jpg静态资源验证码图片或示例占位图从这张表能看出这份源码是典型的“工具模块 页面控制器”结构。没有把搜索写死在页面里也没有在页面里到处调用wx.request整体维护成本会低很多。2.4 渲染层与逻辑层setData 的边界微信小程序的视图层和逻辑层是分开的setData是把数据从逻辑层传到渲染层的唯一通道但这个通道有开销。社区攻略页面的列表如果一次性渲染几百条用户滑动时会出现明显卡顿。常见做法是后端分页前端每次只往列表里concat一页数据并且控制图片数量。另外helloSearch.js这类纯逻辑模块尽量不依赖wxAPI方便以后直接用 Node 脚本做单元测试。这也是拆模块时值得参考的边界纯函数留在普通 JS 文件里页面只负责调用和绑定数据。3. 社区攻略搜索hellspawnSearch.js 的关键字匹配与过滤3.1 隔离搜索逻辑而不是堆在 Page 里hellspawnSearch.js是这份源码里最耐看的文件。搜索逻辑如果写在页面里筛选条件一多index.js会膨胀到很难维护。源码的做法是把匹配、过滤、排序抽成一个模块对外只暴露一个方法。// hellspawnSearch.js function search(list, keyword, tag) { if (!list || list.length 0) return []; const kw (keyword || ).trim().toLowerCase(); return list.filter(item { const hitKeyword !kw || item.title.toLowerCase().includes(kw) || item.desc.toLowerCase().includes(kw); let hitTag true; if (tag) { hitTag item.tags item.tags.includes(tag); } return hitKeyword hitTag; }).sort((a, b) { // 先按权重降序再按创建时间倒序 if (a.weight ! b.weight) return (b.weight || 0) - (a.weight || 0); return new Date(b.createAt) - new Date(a.createAt); }); } module.exports { search };这里的toLowerCase()让关键词匹配不区分大小写适合攻略标题和描述这种中英文混排内容。tags.includes(tag)是数组判断如果 tags 是字符串就要换成indexOf(tag) -1。排序时用(b.weight || 0)防止空字段参与减法产生NaN这是很容易踩的坑。3.2 输入框的防抖与键盘处理input.js负责搜索框和表单输入的交互。搜索框最典型的问题是用户每敲一个字就发起请求既浪费带宽又容易造成旧请求覆盖新结果。所以必须做防抖。// input.js let timer null; function onSearchInput(e) { const keyword e.detail.value; clearTimeout(timer); timer setTimeout(() { this.setData({ keyword }); this.fetchSearch(keyword); // 300ms 后真正触发搜索 }, 300); }clearTimeout清掉上一次定时器只有用户停止输入超过 300ms 才发起请求。这个值在真机上可以适当调大到 500ms尤其遇到低端安卓机键盘弹起和中文输入法组合会拖慢事件触发。使用这个函数时需要在页面onLoad里绑定 this例如this.onSearchInput input.onSearchInput.bind(this);否则函数内部的this会丢失。3.3 搜索状态与页面联动搜索结果和推荐流共用一个列表页是社区类小程序的常规设计。源码里可以这样处理增加searchMode字段区分当前展示的是推荐流还是搜索结果。// index.js 片段 data: { searchMode: false, searchKeyword: , searchList: [] }, onSearchConfirm({ detail }) { const keyword detail.value.trim(); if (!keyword) return; this.setData({ searchMode: true, searchKeyword: keyword }); this.fetchSearch(keyword); }, onClearSearch() { // 还原推荐流避免切 tab 后还停留在过滤结果 this.setData({ searchMode: false, searchKeyword: , searchList: [] }); }搜索确认后把searchMode置为 true列表渲染和触底加载都走搜索接口清空关键词后恢复推荐流。如果不做这个状态切换用户搜索完切去其他 tab 再回来列表内容还是过滤后的体验很怪。3.4 关键词高亮与正则转义搜索结果页通常需要把命中的关键词标成高亮这个逻辑也可以放在hellspawnSearch.js或单独的工具文件里。function highlight(text, keyword) { if (!keyword) return text; const escaped keyword.replace(/[.*?^${}()|[\]\\]/g, \\$); const reg new RegExp((${escaped}), gi); return text.replace(reg, text classhl$1/text); }注意先对关键词里的正则特殊字符做转义否则用户搜“新手”这类带括号的内容RegExp会直接报错。highlight返回的字符串需要放在rich-text组件里渲染直接在text组件里输出会把text当成普通文本展示。这一步是很多小程序开发新手容易忽略的。4. 请求层http.js 的 wx.request 封装与 base64 编解码4.1 统一请求入口和错误码wx.request的重复代码太多每次都要拼 URL、加 header、判断 HTTP 状态码、处理登录失效。http.js把这些收敛成get、post方法业务方只需要传入接口地址和数据。// http.js function request(method, url, data, options {}) { const app getApp(); const token app.globalData.token; if (options.showLoading) { wx.showLoading({ title: 加载中 }); } return new Promise((resolve, reject) { wx.request({ url: app.globalData.baseUrl url, method, data, header: { Content-Type: application/json, Authorization: token ? Bearer token : }, success(res) { if (res.statusCode 200 res.data.code 0) { resolve(res.data.data); } else if (res.statusCode 401) { wx.navigateTo({ url: /pages/login/login }); reject(new Error(login expired)); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(new Error(res.data.msg || request error)); } }, fail(err) { reject(err); }, complete() { if (options.showLoading) wx.hideLoading(); } }); }); }这里把 HTTP 状态码和业务状态码分开判断code 0是业务成功statusCode 401是登录态失效。Token 校验用Authorization: Bearer头后端如果走 JWT 可以直接对接。showLoading由调用方按需开启接口内部在complete里统一关闭避免 loading 永远关不掉。4.2 请求竞态旧响应覆盖新数据社区搜索场景有个隐藏问题用户在输入过程中连续触发搜索先发出的请求可能比后发出的晚返回旧数据就会覆盖新结果。防抖能减少触发次数但不能彻底解决网络竞态。常见做法是维护一个请求序号只有最新序号的结果允许写入页面。// index.js let searchSeq 0; function fetchSearch(keyword) { const seq searchSeq; return http.get(/guide/search, { keyword }).then(res { // 只处理最新一次请求防止旧响应覆盖新列表 if (seq searchSeq) { this.setData({ searchList: res.list }); } }); }这个写法比abort简单而且不会因为中断请求带来额外的fail处理成本。只要seq不是最新值返回值就直接忽略。4.3 base64.js 在验证码和图片处理中的应用base64.js在源码里放在工具模块通常用于两种场景一是把图片文件转成 base64 串传给后端二是处理后端返回的验证码图片数据。vcode.jpg和它配合说明登录或发布流程里有验证码校验。// base64 转换示例 function fileToBase64(filePath) { return new Promise((resolve, reject) { wx.getFileSystemManager().readFile({ filePath, encoding: base64, success: res resolve(res.data), fail: reject }); }); }使用wx.getFileSystemManager().readFile可以把本地临时图片编码成 base64。这个操作对内存占用不小只适合验证码、头像这类几十 KB 的小文件。攻略正文配图应该走uploader.js传到服务器或 CDN拿到 URL 后再展示而不是把整个图片塞进请求体。5. 发布攻略的完整链路uploader.js 上传、vcode.jpg 验证码与 dialog.js 反馈5.1 从选图到上传社区攻略发布离不开图片。uploader.js做的事情是把wx.chooseMedia拿到的文件路径通过wx.uploadFile发给后端并处理返回的 URL。// uploader.js function upload(filePath) { const app getApp(); return new Promise((resolve, reject) { wx.uploadFile({ url: app.globalData.baseUrl /upload, filePath, name: file, header: { Authorization: Bearer app.globalData.token }, success(res) { // uploadFile 的 res.data 是字符串必须手动转 JSON const data JSON.parse(res.data); if (data.code 0) { resolve(data.url); } else { reject(new Error(data.msg || 上传失败)); } }, fail: reject }); }); }name字段对应后端接口接收文件的参数名两边不一致会直接拿不到文件。wx.uploadFile返回的res.data是字符串不是对象这里必须手动JSON.parse这是最容易被当作 bug 处理的点。上传接口和业务接口通常不共用同一个封装因为wx.uploadFile不支持Content-Type: application/json方式的 body 传参只能走formData。5.2 验证码在发布流程中的位置vcode.jpg在 Demo 里可能是本地占位图真实项目中验证码应该由后端生成前端拿到图片 URL 或 base64 字符串后再显示。用户输入验证码后input.js拿到输入值连同攻略正文一起提交。// 发布前校验 if (!this.data.vcode) { dialog.toast(请输入验证码); return; } if (this.data.vcode.length ! 4) { dialog.toast(验证码格式不对); return; }验证码的作用是防止脚本批量灌水游戏社区里刷攻略、刷评论很常见。但要注意验证码通常是一次性的提交失败后需要重新刷新vcode.jpg否则用户第二次提交时看到的还是旧图校验大概率失败。刷新图片时URL 后面最好拼一个时间戳参数避免缓存。5.3 dialog.js反馈组件的一致性dialog.js的作用是统一wx.showToast、wx.showModal和wx.showLoading这样全局的交互风格保持一致。发布成功弹一个 toast删除攻略前弹一个确认框不用每个页面各写一套。// dialog.js function toast(title) { wx.showToast({ title, icon: none, duration: 2000 }); } function confirm(content) { return new Promise(resolve { wx.showModal({ title: 提示, content, success: res resolve(res.confirm) }); }); } module.exports { toast, confirm };toast的icon: none可以显示纯文字但真机上最多显示两行超出部分会被截断所以较长错误信息建议走confirm或独立错误页。confirm用 Promise 包装页面里可以配合async/await写删除逻辑代码更线性。5.4 参数与异常场景对照场景涉及文件关键参数失败表现攻略列表加载http.js / index.jspage, pageSize列表空白检查 baseUrl 和域名白名单搜索攻略hellspawnSearch.js / input.jskeyword, tag搜索无结果确认字段名大小写发表图片uploader.jsfilePath, nameJSON.parse 失败确认后端回包格式验证码校验vcode.jpg / input.jsvcode401 或提交失败刷新验证码登录态过期http.js / dialog.jsAuthorization所有请求返回 401跳转登录页排查时可以按这张表定位先确定问题发生在哪个文件对应的链路环节再去看日志里的状态码。很多页面没反应的问题根因其实在http.js的header拼写或后端域名没备案。5.5 多图上传的并发控制一个攻略带多张图片时直接Promise.all并发上传全部文件虽然快但容易把内存和带宽打满。常见做法是分批发每批 3 张。async function uploadFiles(filePaths, limit 3) { const results []; for (let i 0; i filePaths.length; i limit) { const batch filePaths.slice(i, i limit); // 串行批次避免瞬时内存峰值 const urls await Promise.all(batch.map(upload)); results.push(...urls); } return results; }这个函数把filePaths按limit切成若干批每批内部并发上传批与批之间串行。limit在安卓机上建议取 2 到 3iOS 可以放宽到 4。上传完成后把results里的 URL 拼到攻略内容里一起提交整个发布链路就闭环了。6. 上线前要检查的细节包体、域名与登录态续期6.1 把静态验证码图片挪出主包vcode.jpg放在主包里会导致包体变大微信小程序主包 2MB、总包 20MB 的限制一直都在。Demo 里保留它是为了方便本地调试上线前的替换做法是改成接口返回图片 URLthis.setData({ // 拼时间戳防止微信浏览器缓存同一张验证码 vcodeUrl: app.globalData.baseUrl /captcha?ts Date.now() });URL 后面拼Date.now()是为了绕过缓存。很多人忽略了这一步导致验证码刷新后还是同一张旧图用户连续输错几次就会认为产品有 bug。6.2 登录态续期不能只跳登录页http.js里碰到401就跳登录页对 Demo 来说够用但真实环境里用户会频繁遇到 token 过期每过一小时就跳一次登录流失率很高。常见做法是维护一个refreshToken在 401 时静默续期并重放原请求。// 简化版先刷新 token再重试原来的请求 } else if (res.statusCode 401) { const refreshToken wx.getStorageSync(refreshToken); wx.request({ url: app.globalData.baseUrl /auth/refresh, method: POST, data: { refreshToken }, success: r { app.globalData.token r.data.token; wx.setStorageSync(token, r.data.token); resolve(request(method, url, data, options)); } }); }这个逻辑要小心里面的循环调用resolve(request(...))只在刷新成功后再执行一次如果刷新接口自己又返回 401就要主动跳登录页避免无限递归。6.3 真机预览前的三项检查用开发者工具能跑通不代表真机没问题。我发布前固定检查三件事第一所有请求域名必须是 HTTPS并且在小程序后台把域名加进request、uploadFile合法域名第二uploadFile的并发数量控制在 3 以内弱网条件下减少图片压缩和上传的峰值内存第三用wx.getNetworkType判断当前网络类型弱网时提示用户优先使用 Wi-Fi再决定是否继续上传多张图片。提示如果发布后图片加载缓慢优先排查 CDN 的可用性而不是反复在小程序代码里做无谓的优化。验证方式很简单打开微信开发者工具的「真机调试」在 Network 面板里看每个请求的耗时和statusCode特别关注 401 和超时请求。把这三个检查项过一遍社区类小程序常见的图片传不上去、列表加载失败问题基本能消掉大半。本文还有配套的精品资源点击获取