唐山小程序开发：架构怎么搭才不返工

我是知码客，在唐山做小程序和 APP 开发这些年，见过太多项目不是死在需求上，而是死在架构上。刚开始跑得挺顺，功能一加就卡，改一处崩三处，最后只能推倒重来。今天不聊虚的，就说说唐山本地项目里，小程序架构到底该怎么搭。

先想清楚：你的小程序是“页面堆”还是“有结构”

很多唐山做小程序的团队，起步阶段就是建几个 page，接口直接写在 onLoad 里，数据用 setData 一把梭。demo 阶段没问题，但一旦要接支付、接会员、接多门店，代码就开始互相打架。

我的建议是，动手前先画三张图：页面流转图、数据流向图、接口清单。哪怕只是唐山本地一家餐饮店的点餐小程序，也值得花半天理清楚。架构不是给大厂准备的，是给“以后还要改”的项目准备的。

分层：把“界面”和“业务”拆开

小程序天然适合做轻量分层，我一般按三层走：

• 视图层：page 和 component，只负责渲染和事件转发，不写业务判断。
• 服务层：把接口请求、数据加工、缓存读写收拢到 service 目录，页面只调方法，不关心 request 细节。
• 状态层：跨页面共享的数据（登录态、购物车、当前门店）统一放 store，别靠 globalData 到处传。

这样拆完，最直接的好处是：唐山客户临时要加一个“会员价显示”，你只改服务层和一处组件，不用翻遍所有页面。

目录结构：让接手的人一眼看懂

miniprogram/
  pages/           页面，按业务模块分文件夹
  components/      通用组件（按钮、弹窗、空状态）
  services/        接口封装，一个业务一个文件
  store/           全局状态
  utils/           工具函数、格式化、校验
  config/          环境配置、常量、字典
  assets/          图片、字体

这套结构不新鲜，但胜在稳定。我带过的唐山小程序外包项目，交付时都会附一份目录说明，客户后续换人维护也不至于抓瞎。见过太多项目把接口地址硬编码在页面里，换个环境就得全局搜索替换，这种坑完全可以用一个 config 文件避免。

接口层：别让页面直接碰 wx.request

这是我最想强调的一点。页面里直接写 wx.request，短期省事，长期是灾难。正确做法是封装一层 request：

// utils/request.js
const BASE_URL = require('../config/env').baseUrl;

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: { token: wx.getStorageSync('token') || '' },
      success(res) {
        if (res.statusCode === 200 && res.data.code === 0) {
          resolve(res.data.data);
        } else {
          reject(res.data);
        }
      },
      fail: reject
    });
  });
}

好处很实在：统一加 token、统一错误提示、统一处理登录过期。唐山app开发那边同理，接口层是复用的核心资产，小程序和 APP 共用一套接口约定，后端改字段时只改一处映射。

组件化：从“复制粘贴”里解放出来

唐山做小程序，很多是本地生活类：商城、预约、点餐、社区团购。这类项目页面相似度极高，列表、卡片、价格、倒计时反复出现。我的做法是先沉淀 5 到 8 个基础组件，比如 price-tag、goods-card、empty-state、loading-more，页面里只传参不写样式逻辑。

组件化不是为了炫技，是为了改需求时只改一处。客户说“价格字体再大一点”，你改一个组件，全站生效，而不是挨个页面调。

云开发还是自建后端

唐山不少中小客户预算有限，我会建议先用微信云开发跑起来：云函数、云数据库、云存储，省掉服务器和运维，上线快。但要注意，云开发的架构边界要提前想好，业务逻辑尽量放云函数，别把复杂计算塞进小程序端。等业务量上来，再平滑迁到自建后端，接口层封装得好，迁移成本就低。

架构的本质不是一步到位，而是让每次改动都便宜。唐山小程序开发项目，能撑过三次大改的架构，才算合格。

性能这块，别等卡了才想起

• 首屏只加载必要数据，列表分页，图片用 CDN 加压缩。
• setData 只传变化的部分，别整对象重设。
• 长列表用虚拟列表或分页加载，唐山本地商城项目商品多，这点很关键。
• 分包加载，把低频页面拆出去，主包控制在 2M 以内。

写在最后

我是知码客，专注小程序和 APP 开发，用代码改变生活。在唐山做项目这些年，越发觉得架构是“看不见但最值钱”的部分。它不体现在界面上，却决定了你三个月后是轻松加功能，还是熬夜填坑。如果你正在唐山做小程序，或者准备启动一个本地项目，先把架构想清楚，再动手写第一行代码，后面会省很多事。