小程序制作教学全流程：从零到上线

很多人问过我：一个人能不能把小程序从零做上线？能。但前提是你得把流程拆明白，别一上来就写代码。这篇文章按我实际做项目的顺序，把「小程序制作教学全流程」讲一遍，重点放在容易被教程忽略的环节。

第一步：先定边界，别急着选框架

动手之前先回答三个问题：

• 用户从哪来：只做微信内，还是要兼容支付宝、抖音？只做微信就用原生或 uni-app，多端才考虑跨端方案。
• 数据放哪：纯展示类不需要后端；有用户体系、订单、支付，就必须有服务端或云开发。
• 谁维护：自己维护就选熟悉的技术栈，别为了「先进」选一个半年后自己都不想碰的框架。

这一步花半小时，能省掉后面两周的返工。我见过太多人先搭脚手架，写到一半发现支付资质没办、类目选错，整个项目推倒重来。

第二步：注册与资质，流程里最枯燥但最不能省

微信公众平台注册小程序账号，拿到 AppID。然后按业务选服务类目，这里有个坑：类目决定你能用哪些能力。比如涉及在线交易，类目和支付权限要对得上，否则调起支付会直接报错。

• 个人主体：功能受限，不能做电商交易类。
• 企业主体：需要营业执照，可开通微信支付。
• 特殊行业：餐饮、医疗等要额外资质，提前查清楚。

把 AppID、AppSecret、支付商户号这些凭证统一记在一个地方，后面开发天天要用。

第三步：原型与页面结构

不需要高保真设计稿，但一定要有一张页面流转图。小程序页面层级建议控制在三层以内，因为返回栈最多十层，层级太深用户会迷路。

pages/
  index/        首页
  list/         列表
  detail/       详情
  order/        下单
  mine/         个人中心

每个页面先想清楚：进来时请求什么数据、空状态长什么样、加载失败怎么提示。这三件事在写代码前定好，能避免后期到处补丁。

第四步：开发环境与项目初始化

下载微信开发者工具，新建项目填入 AppID。如果不想自己搭服务器，直接用云开发，省掉域名备案和 HTTPS 配置这一大段流程。

// app.json 里配置页面与窗口
{
  "pages": ["pages/index/index", "pages/detail/detail"],
  "window": {
    "navigationBarTitleText": "示例",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

建议一开始就把请求封装好，别在每个页面里裸写 wx.request：

const request = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      data,
      success: res => res.statusCode === 200 ? resolve(res.data) : reject(res),
      fail: reject
    });
  });
};

第五步：核心功能开发顺序

我的习惯是按「数据链路」推进，而不是按页面推进：

1. 先打通数据源，确认接口能返回正确结构；
2. 再做列表和详情，验证渲染与分页；
3. 然后接登录，用 wx.login 换 openid，建立用户态；
4. 最后做交易类功能，支付、订单状态回写。

支付这块单独提醒：统一下单在服务端做，前端只负责调起，支付结果以服务端回调为准，别信前端返回的 success。

第六步：真机调试与性能自查

模拟器永远不代表真机。上线前至少做这几件事：

• 用低端安卓机跑一遍，看首屏加载和滚动是否卡顿；
• 图片全部走 CDN 并压缩，列表图用懒加载；
• 检查 setData 的数据量，大对象别整个丢进去；
• 断网、弱网各测一次，确认有兜底提示。

第七步：提审与发布

在开发者工具点上传，填版本号和备注，然后到公众平台提交审核。审核被拒最常见的原因：功能不完整、类目不符、有诱导分享、隐私政策缺失。第一次提审前把「用户隐私保护指引」填好，能少走一轮。

经验之谈：提审描述写清楚每个页面的用途，审核员看得懂，通过率会明显提高。

第八步：上线之后才是开始

发布不等于结束。接入数据统计，看留存和关键路径转化；留一个灰度开关，出问题能快速回滚；把错误日志收集起来，真机报错往往只在特定机型出现。

整套流程走一遍，快的话两三周，慢的话一两个月，差别不在写代码的速度，而在前面几步有没有想清楚。把边界、资质、数据结构定死，后面的开发就是体力活。