华网天下小程序制作实战复盘

前阵子接了个活，客户是做本地生活信息聚合的，产品名叫「华网天下」。需求听起来不复杂：一个能按区域浏览商家、查看优惠、在线预约的小程序。但真做起来，坑一个接一个。这篇文章把从需求拆解到上线的关键节点记下来，给准备做类似项目的朋友当个参考。

先搞清楚「华网天下」到底要什么

客户最初给的描述是一句话：「像58同城那样，但是只做我们市」。这种描述没法直接开工。我花了两个下午跟对方过了一遍真实业务，最后把功能收敛成三块：

• 区域导航：按区县、街道筛选商家，这是核心入口，不能做成普通列表。
• 商家详情页：图文介绍、营业时间、联系方式、优惠券领取。
• 预约与核销：用户线上预约，商家端扫码核销，避免到店扯皮。

注意，客户一开始还想加「社区论坛」和「同城拼车」。我直接劝退了——这两个模块的运营成本远高于开发成本，没有内容运营团队，上线就是死水。功能规划阶段做减法，比后期砍功能省事得多。

技术选型：为什么用云开发而不是自建后端

这个项目预算有限，客户没有自己的服务器运维能力。我选了微信云开发，理由很实际：

• 数据库、存储、云函数一体，省掉服务器采购和备案环节的沟通成本。
• 商家端核销只需要一个云函数加权限校验，不用单独搭管理后台。
• 按量计费，前期用户量小，成本几乎可以忽略。

代价也有：云开发的查询能力比自建 MySQL 弱，复杂聚合要绕。所以区域筛选这块，我提前把「区县-街道」做成两级字典，商家表里冗余存储区县编码和街道编码，查询时直接按编码匹配，避免联表。

区域筛选的数据结构

商家集合里存的是编码而不是名称，前端拿到字典后本地渲染，减少一次请求：

// 商家文档示例
{
  _id: "shop_1024",
  name: "老王牛肉面",
  districtCode: "410102",
  streetCode: "410102003",
  tags: ["面食", "快餐"],
  location: { latitude: 34.75, longitude: 113.62 },
  status: 1
}

查询时用 db.collection('shops').where({ districtCode, status: 1 }) 就够了，分页用 skip/limit。数据量上千以后 skip 会变慢，我在第二版改成了基于 _id 游标分页，体验明显好转。

预约核销的权限设计

这是整个项目最容易出安全问题的地方。商家端和用户端在同一个代码包里，靠角色区分。我的做法是：

1. 用户 openid 与商家账号在云数据库里做绑定表，不信任前端传的 role 字段。
2. 核销云函数入口第一件事是查绑定表，确认调用者确实是该商家的核销员。
3. 核销记录写库时带上操作人 openid 和时间戳，方便事后对账。

云函数里大概是这个逻辑：

exports.main = async (event, context) => {
  const { OPENID } = cloud.getWXContext();
  const bind = await db.collection('merchant_staff')
    .where({ openid: OPENID, shopId: event.shopId, status: 1 })
    .get();
  if (bind.data.length === 0) {
    return { code: 403, msg: '无核销权限' };
  }
  // 校验预约码有效性后更新状态
  await db.collection('orders').doc(event.orderId)
    .update({ data: { status: 'used', verifyBy: OPENID, verifyAt: Date.now() } });
  return { code: 0 };
};

别在前端判断角色，前端代码是可以被反编译的，这个教训值得每个做小程序的人记住。

踩过的两个坑

坑一：图片存储没做压缩

商家上传的封面图动辄三四兆，列表页一次加载十几张，首屏白屏时间超过三秒。后来在云函数里接了图片处理，上传时统一压到宽度 750px、质量 80%，列表页只取缩略图 URL。这一改，首屏时间降到一秒出头。

坑二：审核类目选错

「华网天下」涉及商家信息展示，第一次提审选了「工具-信息查询」，被驳回，要求补充相关资质。后来按「生活服务-本地生活」类目重新提交，并在页面里明确了信息来源于商家自主入驻，才过审。类目这事，开工前就该查清楚，别等代码写完再返工。

上线后的数据与调整

上线第一个月，后台看数据发现一个现象：区域筛选的使用率不到 15%，大部分用户直接用搜索框。于是第二版把搜索框提到首页顶部，区域筛选收进二级入口，首页信息流改成「附近推荐 + 最新入驻」。改版后首页点击率提升明显。

这说明一件事：产品经理拍脑袋的「核心入口」不一定成立，上线后看真实行为再调，比争论谁对更有效。

小结

「华网天下」这类区域信息聚合小程序，技术难度不算高，难点在功能取舍和权限设计。云开发适合预算紧、无运维团队的项目，但要提前想好分页和查询的边界。如果你也在做类似的东西，欢迎在评论区聊聊你遇到的具体问题。