微信小程序开发实战：跑通第一个可交互页面

很多人学微信小程序，一上来就啃官方文档：WXML、WXSS、JS、JSON、生命周期、组件、API、云开发……看了一周，还没做出一个能点的按钮。

其实小程序开发的核心就四件事：

配置 → 页面 → 数据 → 事件。

先用 20 行核心代码跑通一个能显示、能点击、能更新的页面，再逐步加列表、网络请求和云开发，才是最高效的路径。

一、微信小程序开发的公式

小程序 = app.json（全局配置）+ 页面（WXML + WXSS + JS + JSON）+ 数据绑定 + 事件系统 + API。

• app.json：定义页面路径、窗口样式、底部导航；
• WXML：写结构，类似 HTML；
• WXSS：写样式，类似 CSS，单位用 rpx；
• JS：写逻辑，用 Page() 注册页面；
• 数据绑定：{{ }} 把数据渲染到视图；
• 事件：bindtap 等把用户操作传回逻辑层；
• API：wx.request、wx.login、wx.cloud 等调用原生能力。

跑通“数据 → 视图 → 事件 → 数据”的闭环，小程序就入门了。

二、最小代码：20 行跑通数据绑定与事件

假设你已经用微信开发者工具创建了一个空白项目。核心代码就下面这些。

<view class="container">
  <text class="title">{{msg}}</text>
  <button bindtap="changeMsg">点我改变文字</button>
</view>

index.js

Page({
  data: {
    msg: 'Hello 小程序'
  },
  changeMsg() {
    this.setData({
      msg: '你点击了按钮！'
    })
  }
})

index.wxss

.container { padding: 40rpx; text-align: center; }
.title { font-size: 36rpx; color: #333; }
button { margin-top: 40rpx; }

index.json

{
  "navigationBarTitleText": "第一个小程序"
}

保存后，模拟器里就会出现文字和按钮。点击按钮，文字立刻变成“你点击了按钮！”。

这段代码只做三件事：定义数据、渲染视图、响应事件。 这就是微信小程序最核心的闭环。

三、实战工作流

1. 创建项目：微信开发者工具 → 新建小程序 → 选择空白模板。
2. 配置页面：在 app.json 的 pages 数组里注册页面路径。
3. 写结构：用 WXML 搭骨架，view、text、button、image 最常用。
4. 写样式：用 WXSS，尺寸用 rpx，750rpx = 屏幕宽度。
5. 写逻辑：用 Page() 注册页面，data 存状态，setData 更新视图。
6. 绑事件：bindtap、bindinput、bindchange 等。
7. 调 API：wx.request 请求后端，wx.login 获取登录态。
8. 加云开发：不想搭服务器，直接用 wx.cloud 数据库和云函数。
9. 预览发布：真机预览 → 上传代码 → 提交审核 → 发布。

一条命令不用记，开发者工具里点“预览”和“上传”即可。

四、少量代码的关键：先跑通，再抽象

• 先用原生小程序，别一上来就 Taro、Uni-app；
• 先用 setData 管状态，别一上来就 Redux/MobX；
• 先用单页面，别一上来就分包、插件、自定义组件；
• 先用云开发，别一上来就买服务器、配域名、搞 HTTPS；
• 先写死数据，再换成 wx.request 拉真实接口。

框架和工具会变，数据驱动视图的闭环不会变。

五、常见坑

• 忘记注册页面：app.json 里没写路径，页面打不开。
• setData 频率过高：频繁调用导致卡顿，尽量合并更新。
• 直接修改 data：this.data.msg = 'x' 不会触发渲染，必须用 setData。
• 单位用 px：不同屏幕适配差，优先用 rpx。
• 域名未配置：wx.request 请求的域名必须在小程序后台配置白名单。
• 授权时机不对：一进页面就弹授权，用户反感，应在需要时再请求。
• 忽略生命周期：onLoad、onShow、onUnload 用错，数据不刷新。
• 包体积超标：主包超过 2MB 无法上传，图片放 CDN 或分包。
• 审核被拒：类目不对、功能不完整、诱导分享都会被打回。