小程序3分制作流程：3分钟跑通上线

「3 分制作流程」不是标题党，它指的是把一个小程序从零到能扫码体验，压缩成三个可交付阶段：3 分钟搭骨架、3 分钟接数据、3 分钟发布预览。每个阶段只做一件事，做完立刻能验证。下面按我实际做 demo 和接小单的顺序拆开讲。

先明确边界：3 分钟能做什么，不能做什么

能做的：一个带列表页、详情页、表单提交、云数据库读写、可预览的可用版本。不能做的：复杂权限体系、支付对账、多端适配打磨。把「3 分」理解成最小可验证闭环，而不是交付成品，心态就对了。

第一段：3 分钟搭骨架

1. 建项目时选对模板

• 打开微信开发者工具，新建项目，AppID 填自己的测试号。
• 后端服务选「微信云开发」，不要选「不使用云服务」——后面接数据能省掉服务器和域名备案。
• 模板选「云开发基础模板」，它自带 pages 目录、app.json 和云函数示例，省去手写配置。

2. 只留三个页面

删掉模板里的多余页面，在 app.json 里只保留列表、详情、我的三个路由。页面越少，编译越快，心智负担越小。

{
  "pages": [
    "pages/list/list",
    "pages/detail/detail",
    "pages/mine/mine"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  }
}

3. 用 flex 铺一个能看的列表

不要一上来写组件库。列表页用一个 scroll-view 加循环渲染即可，样式控制在 30 行以内。骨架阶段的验收标准只有一个：真机上点得动、跳得过去。

第二段：3 分钟接数据

1. 建集合，灌三条假数据

在云开发控制台新建集合 items，手动录入三条记录，字段就 title、desc、createTime。不要写导入脚本，手填最快。

2. 列表页一次查询

在 onLoad 里直接调数据库，不封装、不抽象，先跑通：

const db = wx.cloud.database()
Page({
  data: { list: [] },
  onLoad() {
    db.collection('items')
      .orderBy('createTime', 'desc')
      .limit(20)
      .get()
      .then(res => this.setData({ list: res.data }))
      .catch(err => console.error(err))
  }
})

3. 详情页带参数跳转

列表项绑定 data-id，点击时 wx.navigateTo 拼上 id，详情页 onLoad(options) 拿到 id 再查一次单条。这一步跑通，说明「读」的链路完整了。

很多新手卡在权限上：云数据库默认「仅创建者可读写」，自己测试没问题，换个人扫码就空白。骨架阶段先在控制台把权限改成「所有用户可读」，后面再收紧。

第三段：3 分钟发布预览

1. 上传并生成体验版

点开发者工具右上角「上传」，填版本号和备注，然后到微信公众平台后台的「版本管理」里把开发版设为体验版，生成体验二维码。整个动作两分钟内能完成。

2. 用真机扫一遍

重点看三处：首屏白屏时间、列表滚动是否卡顿、表单提交后有没有反馈。发现问题直接改，不要攒着。

3. 留一个可回滚的版本号

每次上传备注写清楚改了什么，例如 v0.1 列表+详情跑通。体验版只有一个名额，覆盖前确认上一版没有需要保留的现场。

三个容易踩的坑

• 云函数没部署就调用：本地调试能过，真机报错。上传代码时记得勾选「云端安装依赖」。
• setData 传大对象：列表一次塞几百条会明显卡顿，先用 limit 20 兜住。
• 忘记配合法域名：如果后面接了自建接口，要在后台配 request 合法域名，否则真机请求全挂。

把 3 分钟变成可复用的节奏

这套流程真正的价值不在快，而在强制分段验收。骨架没跑通就不碰数据，数据没跑通就不谈发布。我接小单时也这么排：第一天上午跑通三段，下午再谈 UI 和细节。客户看到能扫码的东西，沟通成本会低很多。

如果你打算长期做小程序，建议把这九个动作写成自己的 checklist，每次新建项目照着走一遍。熟练之后，从建项目到体验版二维码，真的只要一杯咖啡的时间。