微信小程序基础：从 Web 过渡到小程序

先看文件对应关系#

一个页面通常由同名的四个文件组成：

pages/tasks/
├── tasks.wxml
├── tasks.wxss
├── tasks.js
└── tasks.json

WXML 与数据绑定#

<view class="task-card">
  <text>{{task.title}}</text>
  <button bindtap="toggleTask" data-id="{{task.id}}">
    {{task.completed ? "取消完成" : "标记完成"}}
  </button>
</view>

WXML 声明界面结构，双花括号把 JavaScript 数据显示出来。不要在模板里塞复杂业务计算，先在逻辑层准备好数据。

条件与列表#

<view wx:if="{{loading}}">加载中…</view>
<view wx:elif="{{error}}">{{error}}</view>
<block wx:else>
  <view wx:for="{{tasks}}" wx:key="id">{{item.title}}</view>
  <view wx:if="{{tasks.length === 0}}">还没有任务</view>
</block>

列表需要稳定且唯一的 key，不能随意使用会变化的索引。

WXSS 与 rpx#

WXSS 与 CSS 相似，并增加适配小程序的能力。rpx 会根据屏幕宽度换算，适合部分尺寸，但字体、触控范围和布局仍要在真实设备测试。

.task-card {
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  background: #ffffff;
}

不要把所有尺寸都机械换成 rpx；长文本、系统字体、横屏和不同设备仍可能影响布局。

Page、data 与 setData#

Page({
  data: {
    tasks: [],
    loading: true
  },

  async onLoad() {
    await this.loadTasks();
  },

  toggleTask(event) {
    const id = event.currentTarget.dataset.id;
    // 更新业务数据后，用 setData 更新界面所需字段
  }
});

data 是用于渲染的数据；更新页面使用 setData。不要频繁传递巨大对象，否则会增加逻辑层与渲染层通信成本。

生命周期#

• App：应用级启动、显示、隐藏；
• Page：页面加载、显示、就绪、隐藏、卸载；
• Component：组件创建、挂载、移除。

onLoad 适合读取页面参数和初始化一次；onShow 可能多次执行，适合页面每次出现都要刷新但需避免重复请求。

事件#

bind 绑定事件并允许冒泡，catch 会阻止继续冒泡。通过 currentTarget 读取绑定事件的元素，通过 target 读取最初触发的元素。初学时优先使用 currentTarget，避免点到子元素后数据丢失。

组件化#

当一组 WXML、WXSS 和逻辑在多个页面重复使用，提取自定义组件。属性负责传入数据，事件负责通知父级，组件不要偷偷修改页面的全局状态。

常见错误#

• 把浏览器 DOM API 直接用于小程序；
• 直接修改 this.data 后期待界面刷新；
• onShow 每次都重复绑定或重复创建数据；
• wx:for 不写稳定 key；
• 一次 setData 传入过多数据；
• 只在开发者工具测试，不在真机测试；
• 把 AppSecret 写在小程序代码中。

动手练习#

使用开发者工具创建任务清单：展示列表、空状态、新增、完成和删除；提取任务卡组件；在模拟器与至少一台真机测试。

完成标准#

• 能解释 WXML、WXSS、JS、JSON 各自职责。
• 能使用数据绑定、条件、列表和事件。
• 能区分 onLoad 与 onShow。
• 能正确使用 setData。
• 知道小程序代码不能保存 AppSecret。