小程序前后端开发实战指南

小程序看起来轻，但真正落地一个可维护的项目，前后端的分工与协作方式决定了后期改需求的成本。这篇文章从实际项目出发，讲清楚小程序前后端开发中几个关键决策：接口怎么设计、鉴权怎么做、数据怎么存、上线前要检查什么。

一、先定架构：自建后端还是云开发

小程序前端跑在微信客户端里，后端可以自由选择。常见两种路线：

• 自建后端：Node.js / Java / Go 部署在自己的服务器，配 HTTPS 域名并在小程序后台配置 request 合法域名。灵活度高，适合已有业务系统、需要对接内部服务的项目。
• 云开发：直接用微信提供的云函数、云数据库、云存储，省去服务器运维和域名备案。适合个人项目、MVP 验证、活动类小程序。

判断标准很简单：如果后端逻辑主要是增删改查且没有复杂事务，云开发足够；如果涉及支付对账、多端共用同一套 API、需要定时任务和复杂权限，自建后端更稳。

二、前端：请求层要统一封装

小程序原生 wx.request 是回调风格，项目里到处散落容易失控。建议在 utils/request.js 做一层 Promise 封装，统一处理域名、token、错误码：

const BASE_URL = 'https://api.example.com'

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'content-type': 'application/json',
        'Authorization': 'Bearer ' + (wx.getStorageSync('token') || '')
      },
      success(res) {
        if (res.statusCode === 200 && res.data.code === 0) {
          resolve(res.data.data)
        } else if (res.statusCode === 401) {
          wx.removeStorageSync('token')
          wx.navigateTo({ url: '/pages/login/login' })
          reject(new Error('未登录'))
        } else {
          wx.showToast({ title: res.data.message || '请求失败', icon: 'none' })
          reject(new Error(res.data.message))
        }
      },
      fail: reject
    })
  })
}

module.exports = { request }

这样页面里只写 request({ url: '/user/profile' })，鉴权、错误提示、登录跳转都收敛在一处。后续换域名、加埋点只改一个文件。

三、后端：登录态与 openid 的换取

小程序登录不能只靠前端。标准流程是：前端调用 wx.login() 拿到临时 code，传给后端；后端用 code + appid + secret 请求微信接口换 openid 和 session_key，再签发自己的 token 返回给前端。

// 后端示例（Node.js + Express）
app.post('/api/login', async (req, res) => {
  const { code } = req.body
  const url = 'https://api.weixin.qq.com/sns/jscode2session' +
    `?appid=${APPID}&secret=${SECRET}&js_code=${code}&grant_type=authorization_code`
  const { data } = await axios.get(url)
  if (!data.openid) return res.json({ code: 1, message: '登录失败' })

  // 查库或建用户，签发 token
  const token = jwt.sign({ openid: data.openid }, JWT_SECRET, { expiresIn: '7d' })
  res.json({ code: 0, data: { token } })
})

注意 secret 只能放在服务端，绝不能出现在小程序代码里；session_key 也不要下发给前端。

四、数据交互的几个实践

• 接口返回统一结构：{ code, message, data }，code 为 0 表示成功，业务错误码单独约定，前端据此做分支处理。
• 列表分页用游标而非页码：数据频繁新增时页码分页会重复或漏数据，用 lastId 或时间戳做游标更可靠。
• 图片走 CDN 或云存储：不要把图片转 base64 塞进接口，体积和渲染都会出问题。
• 敏感操作二次校验：删除、支付等接口在后端再次校验用户归属，不能只信前端传的 id。

五、上线前的检查清单

• request 合法域名已在小程序后台配置，且为 HTTPS。
• 体验版完整走一遍登录、下单、支付、退款流程。
• 隐私协议与用户信息授权弹窗符合平台规范，避免审核驳回。
• 后端接口加了限流与日志，方便上线后定位问题。
• 小程序包体积控制在 2MB 以内，图片和静态资源尽量外链。

小程序前后端开发并不复杂，难的是把登录态、请求封装、错误处理这些基础件一次做对。基础打牢之后，加页面、加功能都只是重复劳动，项目节奏会顺很多。