尧图网站开发 
简介面向同城生活服务领域的中小创业者与PHP开发者这款小程序源码用于搭建支持城市自主切换的商业信息平台覆盖分类信息、商户入驻、红包广告、同城动态、代理加盟五大模块并内置付费发帖置顶、自定义万能表单、城市自动定位等运营功能。包体共1087个文件以276个PHP后台逻辑、263个HTML页面模板、106个CSS样式和43个JS交互为主另有PNG/JPG界面素材若干整包仅12.13MB结构清晰便于部署与二次开发。目前已有486人学习下载。通过源码可直观掌握多城市切换、商户入驻审核、红包广告本地投放、代理分站管理等实现思路也可直接运行用于演示、毕业设计或商业起步含完整前后台代码性价比高。1. 同城商业信息小程序源代码先想清楚业务模型再去看代码一套能跑通的同城商业信息小程序源代码代码量通常在一万到三万行之间。真正拉开项目差距的不是首页轮播图也不是分类图标的动效而是那条商业信息从发布、审核到过期下架的完整生命周期谁能发布、发到哪个城市、怎么过滤垃圾内容、过期后如何处理。这个业务模型一旦想清楚源代码才能从“能编译”变成“可交付”。如果你是接同城单子的外包团队、准备做本地二手或苗木交易的创业个体或者想从一套现成代码里改出自己的信息平台这篇会用一个通用 MVP 方案把“同城”拆成定位、分类、列表、发布、审核五条主线并把源码工程里最容易出问题的场景值解析、动态设置标题和“审核屏蔽”机制一起讲透。要提醒的是同城商业信息的核心价值永远是“可信度过滤”代码只是把规则落到界面和接口上。下面从技术选型开始拆这套源代码。2. 同城商业信息小程序源代码的结构与基础框架2.1 选型为什么大部分同城信息项目最终会落到 uni-app 上接一个同城商业信息小程序项目时后端用 PHP、Java 还是 Node.js 其实不会对源码交付产生决定性影响真正影响甲方后续找人维护的是前端那套代码长什么样。目前市面交付形态里最常见的是 uni-app Vue3 编译到微信小程序H5 作为活动页和分享页复用同一套代码。对于一个需要同时覆盖公众号入口和微信小程序的同城项目来说少维护一套前端的价值很高。原生微信小程序适合团队已经非常熟练、并且确定未来长期只在微信生态内迭代的场景。Taro 适合本来就用 React 的团队但同城业务里大量使用地图 SDK、上传组件和模板消息这类插件在 uni-app 插件市场里更齐全遇到问题的问答沉淀也更多。下面这个表可以作为选型时的判断依据方案编译产物跨端能力定位/地图接入甲方找人维护的难度适用场景原生微信小程序微信小程序仅微信微信地图 SDK 最直接依赖前端个人能力只做微信端团队就是原班人马uni-app Vue3微信/支付宝/H5/App强定位用 uni.getLocation地图可换多端插件前后端结构清晰上手资料多大多数同城商业信息项目Taro React多端中生态相对分散常需自行封装需要 React 背景已有 React 技术栈的团队选型结论很简单源代码的“可交付性”比“技术先进性”重要。甲方下一次大概率要加个抖音小程序或 H5 版uni-app 收编三端比到时候重写一遍划算得多。2.2 读源代码先看目录哪里是页面、哪里是接口、哪里是业务配置拿到一套同城商业信息小程序源代码先别急着在微信开发者工具里点编译。先看工程目录确认架构分层是否清晰。一个合格的 MVP 工程通常长这样├── pages │ ├── index # 首页分类导航 推荐信息流 │ ├── list # 列表页按分类/区域过滤 │ ├── detail # 详情页商家信息、图片、拨号 │ ├── publish # 发布页表单 图片上传 │ └── mine # 我的发布记录、收藏、审核状态 ├── components │ ├── info-card # 信息卡片复用与信息流列表 │ └── city-picker # 城市切换组件 ├── api │ ├── request.js # 请求封装注入 token 和城市参数 │ ├── lead.js # 商业信息相关接口 │ └── user.js # 登录、手机号接口 ├── store # 全局状态定位城市、登录态、审核模式 ├── utils │ ├── geo.js # 逆地址解析、距离计算 │ └── format.js # 时间、联系方式打码格式化 └── config ├── categories.js # 分类配置改这里换行业 └── app.js # 应用级参数请求域名、地图密钥这里有一个判断源码质量的关键标准页面目录只做“组装”业务规则应该收敛在api、store和config三层里。如果分类列表直接写死在index.vue里后续想从二手闲置改成苗木交易就要动页面代码这种源码的扩展性比较差。各页面职责和生命周期的配合方式可以对照这张表看页面关键生命周期主要职责首页 indexonShow 读取定位与缓存决定当前城市、渲染分类导航列表 listonLoad 读取路由参数接收 category、city_code、district 并拉取信息流详情 detailonShow 刷新收藏状态展示联系方式、一键拨号、举报入口发布 publish表单提交组装 payload 交给审核流程2.3 源代码里的数据契约字段名就是业务约定同城商业信息小程序的核心数据表无论底层是 MySQL 还是云开发结构上都高度相似。读懂源码之前先读懂这条核心数据契约{ id: 10086, business_type: secondhand, title: 九成新雅迪电动车 1200 元自提, images: [https://cdn.example.com/xxx.jpg], contact_mobile: 138****1234, city_code: 330100, district_code: 330106, lng: 120.1536, lat: 30.2875, audit_status: 1, status: 1, expire_at: 2025-06-30 23:59:59 }字段说明里要特别关注三个容易踩坑的点其一lng和lat必须允许为 0 但要提供兜底逻辑发布页定位失败时不拦截会导致大量坐标00的脏数据其二audit_status和status是两回事前者记录审核流转状态后者是上下架状态很多改源码的人只改前者导致列表页出现审核中的数据其三expire_at的过期下架应该由后端定时任务把status置为 0前端只做“已过期”标签展示不要在页面里用本地时间判断。数据契约是源代码的“语义层”。一套源代码能不能被快速改造成另一个行业的同城平台取决于这套字段设计是否够通用。这里补充说明business_type建议存英文枚举中文名称放在config/categories.js里维护。好处是分类改名不影响历史数据这个是常见做法。3. 同城商业信息小程序核心模块实现定位、分类、信息流的代码写法3.1 同城定位不能只拿经纬度逆地址解析才算拿到“城市”同城商业信息小程序和普通内容类小程序最大的区别是首页和列表页都强依赖当前城市。直接调用wx.getLocation只能拿到经纬度要把经纬度换算成用户能理解且后端能过滤的city_code常见做法是调用腾讯位置服务的逆地址解析接口。// utils/geo.js —— 定位并解析同城城市 async function locateCity() { // 优先读缓存避免每次冷启动都弹授权框 const cache uni.getStorageSync(city_info); if (cache) return cache; const { latitude, longitude } await new Promise((resolve, reject) { uni.getLocation({ type: gcj02, isHighAccuracy: true, success: resolve, fail: reject }); }); const qqMapKey getApp().globalData.qqMapKey; const res await uni.request({ url: https://apis.map.qq.com/ws/geocoder/v1/, data: { key: qqMapKey, location: ${latitude},${longitude} } }); const { ad_info } res.data.result; const cityInfo { city_code: ad_info.adcode, name: ad_info.city, lng: longitude, lat: latitude }; uni.setStorageSync(city_info, cityInfo); return cityInfo; }参数说明isHighAccuracy: true在开阔环境下定位精度可以到几十米同城场景足够在室内或地下车库会明显变慢所以这段逻辑必须搭配“使用上一次缓存城市”的降级方案。adcode是行政区划代码注意省直辖县和普通地级市的码段不同后端过滤时不要简单按前四位截断。缓存的清理时机也很关键在设置页提供“切换城市”入口手动切换时执行uni.removeStorageSync(city_info)否则用户从北京回到杭州看到仍是北京的同城信息。3.2 分类导航把行业类目做成配置数组而不是写死在页面里同城商业信息平台往往同时覆盖“二手闲置、家政服务、招聘求职、苗木花卉”等多种类目。如果首页的分类导航是逐个手写view换行业时就要改页面结构。更合理的源代码组织方式是把分类做成可配置数组// config/categories.js —— 分类配置是替换业务的关键文件 export const categories [ { id: secondhand, name: 二手闲置, icon: secondhand, sort: 10 }, { id: service, name: 家政服务, icon: service, sort: 20 }, { id: recruitment, name: 招聘求职, icon: job, sort: 30 } ]; export function getCategoryById(id) { return categories.find((item) item.id id); }首页只需要渲染这个数组view classgrid view classgrid-item wx:for{{categories}} wx:keyid bindtapgoList >goList(e) { const { id, name } e.currentTarget.dataset; uni.navigateTo({ url: /pages/list/list?category${id}title${encodeURIComponent(name)} }); }>Page({ data: { list: [], page: 1, size: 10, hasMore: true, loading: false }, onLoad(options) { this.category options.category || ; this.title decodeURIComponent(options.title || 全部信息); uni.setNavigationBarTitle({ title: this.title }); this.refresh(); }, refresh() { this.setData({ page: 1, list: [], hasMore: true }); this.loadNext(); }, loadNext() { if (!this.data.hasMore || this.data.loading) return; this.setData({ loading: true }); const city uni.getStorageSync(city_info) || {}; uni.request({ url: ${getApp().globalData.apiBase}/leads, data: { city_code: city.city_code || , category: this.category, page: this.data.page, size: this.data.size, sort: audit_time_desc }, success: (res) { const rows res.data.data.rows; this.setData({ list: this.data.list.concat(rows), page: this.data.page 1, hasMore: rows.length this.data.size }); }, complete: () this.setData({ loading: false }) }); }, onReachBottom() { this.loadNext(); } });参数说明size在微信小程序里建议 10 到 15太大首屏渲染时间长太小会导致onReachBottom频繁请求sort用audit_time_desc比create_time_desc更合理因为审核通过时间才是用户可见上架时间防止“创建早但审核晚”的信息被误判为旧数据。分页结束判断用rows.length this.data.size避免用res.data.data.total后者在后端做关键词搜索时经常统计不准会导致最后一页永远拉不完。3.4 发布页校验把三类脏数据挡在提交之前发布页是同城商业信息的质量入口。第一次定位失败、图片没传、标题乱填这些脏数据进到审核队列里会大幅增加运营成本。这里给出一个发布前的校验函数function validatePublishForm(form) { if (form.title.trim().length 4) { return 标题至少 4 个字避免纯标点; } if (form.images.length 0) { return 至少上传一张现场图片; } if (form.lng 0 || form.lat 0) { return 定位失败请重新选择位置; } return ; }校验通过后提交audit_status置为 0用户端立即提示“信息已提交审核通过后展示”。这里有个容易被忽略的细节提交成功后要把mine页的数据缓存标记为过期让用户从发布页返回“我的”时能立刻看到待审核状态而不是看到旧列表。4. 同城商业信息小程序源代码的常见问题与工程化避坑4.1 scene 参数不解析小程序码推广渠道等于白做同城商业信息项目线下场景很多商家台卡、电梯广告、朋友圈海报。这些物料上的小程序码通常把渠道参数放在scene字段里比如city330100categorysecondhandinviter1001。基础库会把整段参数做 URL 编码之后传给onLoad(options)常见的坑是拿到options.scene后直接拿去赋值给category结果%3D解析失败。// pages/list/list.js 的 onLoad 中解析 scene onLoad(options) { const scene options.scene ? decodeURIComponent(options.scene) : ; const query {}; if (scene) { scene.split().forEach((kv) { const [k, v] kv.split(); query[k] v; }); } // query 里可能是 category 和 city先用 scene 里的城市兜底 if (query.city_code) { uni.setStorageSync(scene_city_code, query.city_code); } this.city_code query.city_code || uni.getStorageSync(city_info).city_code; this.loadNext(); }逻辑说明decodeURIComponent必须放在split()之前否则参数里的%序列会被错误切割。渠道参数里的inviter在提交发布表单时要原样带回后端用于后续的数据分析这是同城商业信息平台做地推效果评估的关键源码里没有这套机制的话建议在改造时补上。4.2 发布页的城市以谁为准定位城市做默认值允许手动改很多同城信息项目在发布页只展示“当前定位城市”不做二次确认。这个设计在用户出差场景下会出问题一个杭州用户到上海出差想发布一条杭州家中的二手家具定位系统给的上海就被当作发布城市信息挂到了上海。处理这类情况推荐双轨制页面加载时用locateCity()拿定位城市作为默认选中项同时展示地图选点入口用户手动改城市时弹窗确认“信息将发布到某某城市是否确认”。后端最终只信表单字段里的city_code不根据坐标再推算一次。// 发布页中手动切换城市的确认逻辑 handleCityChange(city) { uni.showModal({ title: 确认发布城市, content: 信息将发布到 ${city.name}确定吗, confirmText: 确定, cancelText: 再想想, success: (res) { if (res.confirm) { this.setData({ selectedCity: city }); } } }); }这个二次确认的成本很低但能显著降低信息挂错城市的投诉做同城项目的都应该加上。4.3 审核模式下要有一个“屏蔽开关”给审核员看一个干净版本微信生态对同城信息类的审核重点在于类目资质和内容合规。实践中我们常在源码里留一个“审核屏蔽”机制当小程序处于审核模式时隐藏部分风险类目和接口入口审核员看到的首页和正式用户看到的首页不完全一样。// config/audit.js —— 审核屏蔽配置 const isAuditMode getApp().globalData.appEnv audit; export function isCategoryVisible(categoryId) { const BLOCK_CATEGORIES [service]; // 示例家政服务类目在审核模式下隐藏 return !(isAuditMode BLOCK_CATEGORIES.includes(categoryId)); }使用时在首页渲染分类导航前过滤一次就足以让审核员无法触达隐藏类目。这个开关本质上是“把交付给审核员看的版本做成一个可配置的裁剪版”成本很低但能在审核类目风险上给运营留出缓冲空间。需要确认后端是否也开启对应屏蔽否则接口仍可被直接访问。4.4 动态设置标题与请求调试交付前两个必学的动作热词里“小程序动态设置标题”对应的正是wx.setNavigationBarTitle。同城商业信息小程序里列表页的标题应该跟随扫码带的category变化而不是写死一个“同城信息”。在onLoad里同步设置uni.setNavigationBarTitle({ title: this.title });注意点这个调用必须在onLoad里同步执行不能等网络请求返回后再设置否则用户会先看到默认标题、再看到一闪而过的变化。列表页滚动到第 3 屏时标题已经稳定没必要在onPageScroll里反复设置频繁调用会导致导航栏闪烁。请求调试方面微信开发者工具的 Network 面板可以看到完整请求参数。城市不对时先看city_code是否为空返回数据为空时先确认后端是否按city_code category page size四个条件联合过滤这四个条件缺少任何一个都会让列表异常。5. 同城商业信息小程序源代码的二次开发与验收清单5.1 从“二手闲置”改成“苗木交易”的最小修改路径同城商业信息平台换行业的本质是换一套分类配置和表单字段。以“苗木交易小程序源代码”场景为例把上面这套通用源码改造成苗木交易平台只需要三步改config/categories.js里的类目、改发布表单的字段配置、改列表页的筛选项。// config/formConfig.js —— 发布表单字段配置化 export const publishFields { secondhand: [ { name: title, label: 标题, type: input, maxlength: 20 }, { name: price, label: 价格, type: number, suffix: 元 }, { name: desc, label: 描述, type: textarea, maxlength: 200 } ], seedling: [ { name: title, label: 名称, type: input, maxlength: 20 }, { name: spec, label: 规格, type: picker, options: [3cm-5cm, 5cm-8cm, 8cm以上] }, { name: quantity, label: 数量, type: number, suffix: 株 } ] };逻辑说明表单配置化的核心价值是把业务规则从页面里抽出去。改苗木交易时后端表结构如果还是price字段只需在前端把“价格”标签换成“单价”并新增一个quantity字段不用改页面模板。列表页的筛选条件从分类 Tab 改成“品种 地区”两级联动筛选参数仍然走category city_code的同一套接口后端无需变动。5.2 源码交付前的验收表一张表防漏验收项检查方法通过标准定位授权冷启动时拒绝定位权限拒绝后仍能手动选城市不白屏发布流程上传 2 张图并提交提示“待审核”列表页不出现新信息小程序码体验版生成测试码scene 参数能解析出 category 和 city_code动态标题扫码进入列表页导航栏标题是分类名非默认文案分页加载连续翻页 5 次无重复数据无无限加载城市切换手动切到杭州发布后端记录的 city_code 与表单一致清理缓存设置页清缓存再启动首页能重新定位并正常拉列表逐个勾完之后基本可以确认这套同城商业信息小程序源代码已经满足交付要求。5.3 用一条命令快速体检源码完整性最后给一个本地体检命令在源码根目录运行找出工程里可能被改坏的引用grep -rL export default --include*.js --include*.vue pages/ api/ config/运行结果里输出的文件就是可能缺失默认导出、导致编译报错的目标文件列表。如果输出为空说明pages目录下所有页面都正常导出了页面对象。再配合find pages -name *.vue | wc -l核对页面数量和app.json中注册的页面路径数应该一致。把这两条命令的结果放在一起对比遗漏的页面、写错的路由当场就能暴露出来。本文还有配套的精品资源点击获取 
简介面向同城生活服务领域的中小创业者与PHP开发者这款小程序源码用于搭建支持城市自主切换的商业信息平台覆盖分类信息、商户入驻、红包广告、同城动态、代理加盟五大模块并内置付费发帖置顶、自定义万能表单、城市自动定位等运营功能。包体共1087个文件以276个PHP后台逻辑、263个HTML页面模板、106个CSS样式和43个JS交互为主另有PNG/JPG界面素材若干整包仅12.13MB结构清晰便于部署与二次开发。目前已有486人学习下载。通过源码可直观掌握多城市切换、商户入驻审核、红包广告本地投放、代理分站管理等实现思路也可直接运行用于演示、毕业设计或商业起步含完整前后台代码性价比高。1. 同城商业信息小程序源代码先想清楚业务模型再去看代码一套能跑通的同城商业信息小程序源代码代码量通常在一万到三万行之间。真正拉开项目差距的不是首页轮播图也不是分类图标的动效而是那条商业信息从发布、审核到过期下架的完整生命周期谁能发布、发到哪个城市、怎么过滤垃圾内容、过期后如何处理。这个业务模型一旦想清楚源代码才能从“能编译”变成“可交付”。如果你是接同城单子的外包团队、准备做本地二手或苗木交易的创业个体或者想从一套现成代码里改出自己的信息平台这篇会用一个通用 MVP 方案把“同城”拆成定位、分类、列表、发布、审核五条主线并把源码工程里最容易出问题的场景值解析、动态设置标题和“审核屏蔽”机制一起讲透。要提醒的是同城商业信息的核心价值永远是“可信度过滤”代码只是把规则落到界面和接口上。下面从技术选型开始拆这套源代码。2. 同城商业信息小程序源代码的结构与基础框架2.1 选型为什么大部分同城信息项目最终会落到 uni-app 上接一个同城商业信息小程序项目时后端用 PHP、Java 还是 Node.js 其实不会对源码交付产生决定性影响真正影响甲方后续找人维护的是前端那套代码长什么样。目前市面交付形态里最常见的是 uni-app Vue3 编译到微信小程序H5 作为活动页和分享页复用同一套代码。对于一个需要同时覆盖公众号入口和微信小程序的同城项目来说少维护一套前端的价值很高。原生微信小程序适合团队已经非常熟练、并且确定未来长期只在微信生态内迭代的场景。Taro 适合本来就用 React 的团队但同城业务里大量使用地图 SDK、上传组件和模板消息这类插件在 uni-app 插件市场里更齐全遇到问题的问答沉淀也更多。下面这个表可以作为选型时的判断依据方案编译产物跨端能力定位/地图接入甲方找人维护的难度适用场景原生微信小程序微信小程序仅微信微信地图 SDK 最直接依赖前端个人能力只做微信端团队就是原班人马uni-app Vue3微信/支付宝/H5/App强定位用 uni.getLocation地图可换多端插件前后端结构清晰上手资料多大多数同城商业信息项目Taro React多端中生态相对分散常需自行封装需要 React 背景已有 React 技术栈的团队选型结论很简单源代码的“可交付性”比“技术先进性”重要。甲方下一次大概率要加个抖音小程序或 H5 版uni-app 收编三端比到时候重写一遍划算得多。2.2 读源代码先看目录哪里是页面、哪里是接口、哪里是业务配置拿到一套同城商业信息小程序源代码先别急着在微信开发者工具里点编译。先看工程目录确认架构分层是否清晰。一个合格的 MVP 工程通常长这样├── pages │ ├── index # 首页分类导航 推荐信息流 │ ├── list # 列表页按分类/区域过滤 │ ├── detail # 详情页商家信息、图片、拨号 │ ├── publish # 发布页表单 图片上传 │ └── mine # 我的发布记录、收藏、审核状态 ├── components │ ├── info-card # 信息卡片复用与信息流列表 │ └── city-picker # 城市切换组件 ├── api │ ├── request.js # 请求封装注入 token 和城市参数 │ ├── lead.js # 商业信息相关接口 │ └── user.js # 登录、手机号接口 ├── store # 全局状态定位城市、登录态、审核模式 ├── utils │ ├── geo.js # 逆地址解析、距离计算 │ └── format.js # 时间、联系方式打码格式化 └── config ├── categories.js # 分类配置改这里换行业 └── app.js # 应用级参数请求域名、地图密钥这里有一个判断源码质量的关键标准页面目录只做“组装”业务规则应该收敛在api、store和config三层里。如果分类列表直接写死在index.vue里后续想从二手闲置改成苗木交易就要动页面代码这种源码的扩展性比较差。各页面职责和生命周期的配合方式可以对照这张表看页面关键生命周期主要职责首页 indexonShow 读取定位与缓存决定当前城市、渲染分类导航列表 listonLoad 读取路由参数接收 category、city_code、district 并拉取信息流详情 detailonShow 刷新收藏状态展示联系方式、一键拨号、举报入口发布 publish表单提交组装 payload 交给审核流程2.3 源代码里的数据契约字段名就是业务约定同城商业信息小程序的核心数据表无论底层是 MySQL 还是云开发结构上都高度相似。读懂源码之前先读懂这条核心数据契约{ id: 10086, business_type: secondhand, title: 九成新雅迪电动车 1200 元自提, images: [https://cdn.example.com/xxx.jpg], contact_mobile: 138****1234, city_code: 330100, district_code: 330106, lng: 120.1536, lat: 30.2875, audit_status: 1, status: 1, expire_at: 2025-06-30 23:59:59 }字段说明里要特别关注三个容易踩坑的点其一lng和lat必须允许为 0 但要提供兜底逻辑发布页定位失败时不拦截会导致大量坐标00的脏数据其二audit_status和status是两回事前者记录审核流转状态后者是上下架状态很多改源码的人只改前者导致列表页出现审核中的数据其三expire_at的过期下架应该由后端定时任务把status置为 0前端只做“已过期”标签展示不要在页面里用本地时间判断。数据契约是源代码的“语义层”。一套源代码能不能被快速改造成另一个行业的同城平台取决于这套字段设计是否够通用。这里补充说明business_type建议存英文枚举中文名称放在config/categories.js里维护。好处是分类改名不影响历史数据这个是常见做法。3. 同城商业信息小程序核心模块实现定位、分类、信息流的代码写法3.1 同城定位不能只拿经纬度逆地址解析才算拿到“城市”同城商业信息小程序和普通内容类小程序最大的区别是首页和列表页都强依赖当前城市。直接调用wx.getLocation只能拿到经纬度要把经纬度换算成用户能理解且后端能过滤的city_code常见做法是调用腾讯位置服务的逆地址解析接口。// utils/geo.js —— 定位并解析同城城市 async function locateCity() { // 优先读缓存避免每次冷启动都弹授权框 const cache uni.getStorageSync(city_info); if (cache) return cache; const { latitude, longitude } await new Promise((resolve, reject) { uni.getLocation({ type: gcj02, isHighAccuracy: true, success: resolve, fail: reject }); }); const qqMapKey getApp().globalData.qqMapKey; const res await uni.request({ url: https://apis.map.qq.com/ws/geocoder/v1/, data: { key: qqMapKey, location: ${latitude},${longitude} } }); const { ad_info } res.data.result; const cityInfo { city_code: ad_info.adcode, name: ad_info.city, lng: longitude, lat: latitude }; uni.setStorageSync(city_info, cityInfo); return cityInfo; }参数说明isHighAccuracy: true在开阔环境下定位精度可以到几十米同城场景足够在室内或地下车库会明显变慢所以这段逻辑必须搭配“使用上一次缓存城市”的降级方案。adcode是行政区划代码注意省直辖县和普通地级市的码段不同后端过滤时不要简单按前四位截断。缓存的清理时机也很关键在设置页提供“切换城市”入口手动切换时执行uni.removeStorageSync(city_info)否则用户从北京回到杭州看到仍是北京的同城信息。3.2 分类导航把行业类目做成配置数组而不是写死在页面里同城商业信息平台往往同时覆盖“二手闲置、家政服务、招聘求职、苗木花卉”等多种类目。如果首页的分类导航是逐个手写view换行业时就要改页面结构。更合理的源代码组织方式是把分类做成可配置数组// config/categories.js —— 分类配置是替换业务的关键文件 export const categories [ { id: secondhand, name: 二手闲置, icon: secondhand, sort: 10 }, { id: service, name: 家政服务, icon: service, sort: 20 }, { id: recruitment, name: 招聘求职, icon: job, sort: 30 } ]; export function getCategoryById(id) { return categories.find((item) item.id id); }首页只需要渲染这个数组view classgrid view classgrid-item wx:for{{categories}} wx:keyid bindtapgoList >goList(e) { const { id, name } e.currentTarget.dataset; uni.navigateTo({ url: /pages/list/list?category${id}title${encodeURIComponent(name)} }); }>Page({ data: { list: [], page: 1, size: 10, hasMore: true, loading: false }, onLoad(options) { this.category options.category || ; this.title decodeURIComponent(options.title || 全部信息); uni.setNavigationBarTitle({ title: this.title }); this.refresh(); }, refresh() { this.setData({ page: 1, list: [], hasMore: true }); this.loadNext(); }, loadNext() { if (!this.data.hasMore || this.data.loading) return; this.setData({ loading: true }); const city uni.getStorageSync(city_info) || {}; uni.request({ url: ${getApp().globalData.apiBase}/leads, data: { city_code: city.city_code || , category: this.category, page: this.data.page, size: this.data.size, sort: audit_time_desc }, success: (res) { const rows res.data.data.rows; this.setData({ list: this.data.list.concat(rows), page: this.data.page 1, hasMore: rows.length this.data.size }); }, complete: () this.setData({ loading: false }) }); }, onReachBottom() { this.loadNext(); } });参数说明size在微信小程序里建议 10 到 15太大首屏渲染时间长太小会导致onReachBottom频繁请求sort用audit_time_desc比create_time_desc更合理因为审核通过时间才是用户可见上架时间防止“创建早但审核晚”的信息被误判为旧数据。分页结束判断用rows.length this.data.size避免用res.data.data.total后者在后端做关键词搜索时经常统计不准会导致最后一页永远拉不完。3.4 发布页校验把三类脏数据挡在提交之前发布页是同城商业信息的质量入口。第一次定位失败、图片没传、标题乱填这些脏数据进到审核队列里会大幅增加运营成本。这里给出一个发布前的校验函数function validatePublishForm(form) { if (form.title.trim().length 4) { return 标题至少 4 个字避免纯标点; } if (form.images.length 0) { return 至少上传一张现场图片; } if (form.lng 0 || form.lat 0) { return 定位失败请重新选择位置; } return ; }校验通过后提交audit_status置为 0用户端立即提示“信息已提交审核通过后展示”。这里有个容易被忽略的细节提交成功后要把mine页的数据缓存标记为过期让用户从发布页返回“我的”时能立刻看到待审核状态而不是看到旧列表。4. 同城商业信息小程序源代码的常见问题与工程化避坑4.1 scene 参数不解析小程序码推广渠道等于白做同城商业信息项目线下场景很多商家台卡、电梯广告、朋友圈海报。这些物料上的小程序码通常把渠道参数放在scene字段里比如city330100categorysecondhandinviter1001。基础库会把整段参数做 URL 编码之后传给onLoad(options)常见的坑是拿到options.scene后直接拿去赋值给category结果%3D解析失败。// pages/list/list.js 的 onLoad 中解析 scene onLoad(options) { const scene options.scene ? decodeURIComponent(options.scene) : ; const query {}; if (scene) { scene.split().forEach((kv) { const [k, v] kv.split(); query[k] v; }); } // query 里可能是 category 和 city先用 scene 里的城市兜底 if (query.city_code) { uni.setStorageSync(scene_city_code, query.city_code); } this.city_code query.city_code || uni.getStorageSync(city_info).city_code; this.loadNext(); }逻辑说明decodeURIComponent必须放在split()之前否则参数里的%序列会被错误切割。渠道参数里的inviter在提交发布表单时要原样带回后端用于后续的数据分析这是同城商业信息平台做地推效果评估的关键源码里没有这套机制的话建议在改造时补上。4.2 发布页的城市以谁为准定位城市做默认值允许手动改很多同城信息项目在发布页只展示“当前定位城市”不做二次确认。这个设计在用户出差场景下会出问题一个杭州用户到上海出差想发布一条杭州家中的二手家具定位系统给的上海就被当作发布城市信息挂到了上海。处理这类情况推荐双轨制页面加载时用locateCity()拿定位城市作为默认选中项同时展示地图选点入口用户手动改城市时弹窗确认“信息将发布到某某城市是否确认”。后端最终只信表单字段里的city_code不根据坐标再推算一次。// 发布页中手动切换城市的确认逻辑 handleCityChange(city) { uni.showModal({ title: 确认发布城市, content: 信息将发布到 ${city.name}确定吗, confirmText: 确定, cancelText: 再想想, success: (res) { if (res.confirm) { this.setData({ selectedCity: city }); } } }); }这个二次确认的成本很低但能显著降低信息挂错城市的投诉做同城项目的都应该加上。4.3 审核模式下要有一个“屏蔽开关”给审核员看一个干净版本微信生态对同城信息类的审核重点在于类目资质和内容合规。实践中我们常在源码里留一个“审核屏蔽”机制当小程序处于审核模式时隐藏部分风险类目和接口入口审核员看到的首页和正式用户看到的首页不完全一样。// config/audit.js —— 审核屏蔽配置 const isAuditMode getApp().globalData.appEnv audit; export function isCategoryVisible(categoryId) { const BLOCK_CATEGORIES [service]; // 示例家政服务类目在审核模式下隐藏 return !(isAuditMode BLOCK_CATEGORIES.includes(categoryId)); }使用时在首页渲染分类导航前过滤一次就足以让审核员无法触达隐藏类目。这个开关本质上是“把交付给审核员看的版本做成一个可配置的裁剪版”成本很低但能在审核类目风险上给运营留出缓冲空间。需要确认后端是否也开启对应屏蔽否则接口仍可被直接访问。4.4 动态设置标题与请求调试交付前两个必学的动作热词里“小程序动态设置标题”对应的正是wx.setNavigationBarTitle。同城商业信息小程序里列表页的标题应该跟随扫码带的category变化而不是写死一个“同城信息”。在onLoad里同步设置uni.setNavigationBarTitle({ title: this.title });注意点这个调用必须在onLoad里同步执行不能等网络请求返回后再设置否则用户会先看到默认标题、再看到一闪而过的变化。列表页滚动到第 3 屏时标题已经稳定没必要在onPageScroll里反复设置频繁调用会导致导航栏闪烁。请求调试方面微信开发者工具的 Network 面板可以看到完整请求参数。城市不对时先看city_code是否为空返回数据为空时先确认后端是否按city_code category page size四个条件联合过滤这四个条件缺少任何一个都会让列表异常。5. 同城商业信息小程序源代码的二次开发与验收清单5.1 从“二手闲置”改成“苗木交易”的最小修改路径同城商业信息平台换行业的本质是换一套分类配置和表单字段。以“苗木交易小程序源代码”场景为例把上面这套通用源码改造成苗木交易平台只需要三步改config/categories.js里的类目、改发布表单的字段配置、改列表页的筛选项。// config/formConfig.js —— 发布表单字段配置化 export const publishFields { secondhand: [ { name: title, label: 标题, type: input, maxlength: 20 }, { name: price, label: 价格, type: number, suffix: 元 }, { name: desc, label: 描述, type: textarea, maxlength: 200 } ], seedling: [ { name: title, label: 名称, type: input, maxlength: 20 }, { name: spec, label: 规格, type: picker, options: [3cm-5cm, 5cm-8cm, 8cm以上] }, { name: quantity, label: 数量, type: number, suffix: 株 } ] };逻辑说明表单配置化的核心价值是把业务规则从页面里抽出去。改苗木交易时后端表结构如果还是price字段只需在前端把“价格”标签换成“单价”并新增一个quantity字段不用改页面模板。列表页的筛选条件从分类 Tab 改成“品种 地区”两级联动筛选参数仍然走category city_code的同一套接口后端无需变动。5.2 源码交付前的验收表一张表防漏验收项检查方法通过标准定位授权冷启动时拒绝定位权限拒绝后仍能手动选城市不白屏发布流程上传 2 张图并提交提示“待审核”列表页不出现新信息小程序码体验版生成测试码scene 参数能解析出 category 和 city_code动态标题扫码进入列表页导航栏标题是分类名非默认文案分页加载连续翻页 5 次无重复数据无无限加载城市切换手动切到杭州发布后端记录的 city_code 与表单一致清理缓存设置页清缓存再启动首页能重新定位并正常拉列表逐个勾完之后基本可以确认这套同城商业信息小程序源代码已经满足交付要求。5.3 用一条命令快速体检源码完整性最后给一个本地体检命令在源码根目录运行找出工程里可能被改坏的引用grep -rL export default --include*.js --include*.vue pages/ api/ config/运行结果里输出的文件就是可能缺失默认导出、导致编译报错的目标文件列表。如果输出为空说明pages目录下所有页面都正常导出了页面对象。再配合find pages -name *.vue | wc -l核对页面数量和app.json中注册的页面路径数应该一致。把这两条命令的结果放在一起对比遗漏的页面、写错的路由当场就能暴露出来。本文还有配套的精品资源点击获取