从零上手：我的小程序制作实战笔记

上周帮朋友的烘焙工作室做了个预约小程序，从注册账号到提交审核一共花了四天，中间踩了几个不大不小的坑。这篇就把整个流程按我实际操作的顺序写下来，给同样想自己动手做小程序的人一个可参照的路线。文中不涉及花哨的框架，用微信原生写法，够用、好调试。

一、动手前先想清楚三件事

很多人一上来就打开开发者工具建项目，结果做到一半发现方向不对。我建议先花半小时把下面三点写下来：

• 核心功能只有一个：比如烘焙店小程序，核心就是“选商品—选时间—提交预约”，其他都是附属。
• 数据从哪来：是自己写个后端，还是先用云开发。个人项目我强烈推荐云开发，省掉服务器和备案的麻烦。
• 要不要支付：涉及支付就必须是企业主体，个人主体的小程序做不了微信支付，这一点在注册前就要确认。

二、注册与拿到 AppID

打开微信公众平台，选择“小程序”注册。邮箱不能和已有公众号、小程序重复，一个邮箱只能注册一个。注册完成后进入后台，在“开发管理—开发设置”里能看到 AppID，这个后面建项目要用。

如果只是本地练手，可以先点“测试号”，不用走完整注册流程，但测试号不能真机预览部分能力，也不能发布，所以正式做还是老老实实注册。

三、项目结构与第一个页面

下载微信开发者工具，新建项目时填入 AppID，选择不使用云服务（后面需要再开也行）。默认生成的目录里，最关键的是这四个文件：

• app.json：全局配置，页面路径、窗口样式、tabBar 都在这里。
• app.js：全局逻辑，比如登录态。
• app.wxss：全局样式。
• pages/：每个页面一个文件夹，含 js、json、wxml、wxss 四件套。

先在 app.json 里登记页面，没登记的页面打不开：

{
  "pages": [
    "pages/index/index",
    "pages/booking/booking"
  ],
  "window": {
    "navigationBarTitleText": "烘焙预约"
  }
}

页面里的数据绑定靠 {{ }}，事件用 bindtap。一个最简单的商品列表长这样：

<view class="list">
  <view class="item" wx:for="{{goods}}" wx:key="id" bindtap="choose" data-id="{{item.id}}">
    <text>{{item.name}}</text>
    <text>￥{{item.price}}</text>
  </view>
</view>

对应的 js 里用 setData 更新视图。注意 setData 是异步的，别指望调用完立刻读到新值，需要的话放在回调里处理。

四、云开发省掉后端

烘焙店那个项目我用了云开发。在开发者工具里点“云开发”开通，得到一个环境 ID，然后初始化：

// app.js
App({
  onLaunch() {
    wx.cloud.init({ env: 'your-env-id', traceUser: true })
  }
})

接着在云开发控制台建一个集合 orders，前端直接写库：

const db = wx.cloud.database()
db.collection('orders').add({
  data: {
    goodsId: this.data.selectedId,
    time: this.data.pickTime,
    createdAt: db.serverDate()
  }
}).then(() => {
  wx.showToast({ title: '预约成功' })
})

权限设置里把 orders 设为“仅创建者可读写”，普通用户就读不到别人的订单了。管理端要看全部数据，写个云函数用管理员权限查，比在前端硬扛安全得多。

五、真机调试与提交审核

开发者工具里点“预览”生成二维码，用手机微信扫一下就能真机跑。这一步一定要做，模拟器和真机在样式、键盘弹起、授权弹窗上差别不小。我那次就是模拟器里按钮好好的，真机上被底部安全区挡住了一半，加了 padding-bottom: env(safe-area-inset-bottom) 才解决。

确认没问题后，在工具里点“上传”，填版本号和备注。然后回到公众平台后台，在“版本管理”里提交审核。审核前检查几项：

1. 类目选对，服务内容要和类目匹配，否则容易被驳回。
2. 页面里不要出现“测试”“demo”字样。
3. 涉及用户信息的，要有隐私协议弹窗。
4. 功能要完整可点，别留死链。

审核一般一到两天，通过后点“发布”才真正上线。上线后可以在后台看访问数据，也可以接上“数据助手”看留存。

六、几个过来人的提醒

• 别急着上框架。原生写法足够撑起大多数中小项目，出问题也好查。
• 图片一律走 CDN 或云存储，别塞进代码包，主包有 2MB 限制。
• 把常用请求封装一层，统一处理 loading 和错误提示，后面改起来省事。
• 先跑通最小闭环再堆功能，我见过太多人卡在“想做完美”上，最后连一个能提交的版本都没有。

小程序这件事，门槛比想象中低，难的是把一个小需求做完整。按上面的顺序走一遍，你手里就会有一个能提交审核的成品，剩下的就是迭代了。