从零搭建你的第一个微信小程序

这篇教程面向已经会一点 JavaScript、但还没有完整做过一个小程序的同学。我们会从环境准备开始，做一个带列表页、详情页和云端数据的小 Demo，把小程序开发中最常用的几个环节串起来。

一、准备开发环境

开发微信小程序需要三样东西：

• 一个已注册的小程序 AppID（个人主体也能注册，测试阶段也可以先用测试号）
• 微信开发者工具（官方提供，Windows / macOS 都有）
• Node.js 环境（如果你打算用云开发或 npm 包）

安装好开发者工具后，新建项目时选择「小程序」，填入 AppID，模板选「不使用云服务」或「云开发」都可以。建议第一次先选普通模板，把基础结构跑通。

二、理解小程序的目录结构

新建项目后，你会看到这样的核心文件：

├── app.js        // 全局逻辑，注册小程序
├── app.json      // 全局配置：页面路径、窗口样式、tabBar
├── app.wxss      // 全局样式
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── detail/
└── project.config.json

每个页面由四个文件组成，分别对应逻辑、配置、结构和样式。页面必须在 app.json 的 pages 数组里注册，否则无法访问。

三、写第一个列表页

先准备一份本地假数据，在 index.js 中定义：

Page({
  data: {
    list: []
  },
  onLoad() {
    this.setData({
      list: [
        { id: 1, title: '小程序开发入门', desc: '认识目录结构与生命周期' },
        { id: 2, title: '数据绑定与事件', desc: 'setData 的正确用法' },
        { id: 3, title: '云开发初体验', desc: '不写后端也能存数据' }
      ]
    })
  },
  goDetail(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({ url: `/pages/detail/detail?id=${id}` })
  }
})

对应的 index.wxml 用 wx:for 渲染列表，并通过 data-id 把参数带到事件里：

<view class="list">
  <view
    class="item"
    wx:for="{{list}}"
    wx:key="id"
    data-id="{{item.id}}"
    bindtap="goDetail"
  >
    <view class="title">{{item.title}}</view>
    <view class="desc">{{item.desc}}</view>
  </view>
</view>

这里有两个新手常忽略的点：wx:key 要写稳定且唯一的值，能提升列表更新性能；事件传参不能直接写函数调用，必须通过 dataset 传递。

四、详情页接收参数

详情页在 onLoad 的 options 中拿到 URL 参数，再根据 id 查数据：

Page({
  data: { detail: null },
  onLoad(options) {
    const id = Number(options.id)
    const all = getApp().globalData.list || []
    const detail = all.find(item => item.id === id)
    this.setData({ detail })
  }
})

实际项目中数据一般来自接口或云数据库，思路是一样的：先拿参数，再请求，最后 setData。

五、用云开发省掉后端

如果只是做个人项目或 MVP，云开发是很划算的选择。开通后在云函数或页面里直接操作数据库：

const db = wx.cloud.database()

db.collection('articles')
  .orderBy('createTime', 'desc')
  .limit(20)
  .get()
  .then(res => {
    this.setData({ list: res.data })
  })

云开发包含数据库、存储和云函数，省去了服务器部署和域名备案的环节，对独立开发者非常友好。需要注意的是，集合的权限要在控制台里配置好，默认权限只允许创建者读写。

六、调试与上线

开发阶段多用开发者工具的「调试器」看 AppData 面板，能直观看到 setData 之后的数据变化。真机预览可以扫码在手机上验证交互和样式。

上线流程大致是：

1. 在 app.json 中确认页面路径和 tabBar 配置无误
2. 补齐小程序名称、头像、类目等基础信息
3. 在开发者工具中点击「上传」，填写版本号和备注
4. 登录微信公众平台，提交审核，通过后发布

审核阶段常见问题是类目与实际功能不符、页面存在无法访问的空白页，提交前自己完整走一遍主流程即可。

七、下一步可以练什么

• 把列表数据换成云数据库，并加上下拉刷新和分页加载
• 给详情页加上收藏功能，练习本地缓存 wx.setStorageSync
• 抽离公共组件，比如卡片、空状态、加载骨架
• 接入登录，用 wx.login 换取 openid 做用户体系

小程序开发的整体门槛不高，真正的差距在于对数据流、性能和审核规范的理解。把上面这个 Demo 完整做一遍，再逐步替换成真实数据，基本就能独立完成一个可上线的小程序了。