组件与 API

微信小程序教程 · 第 6 章 · 10 次浏览

小程序交互：点击、输入、滚动、上拉加载、下拉刷新。事件绑定的套路一致：bind事件名 + 处理函数。

常用事件

bindtap：点击
bindinput：输入（e.detail.value 取值）
bindchange：选择器/开关变化
bindscroll：滚动
catchtap：阻止冒泡

页面生命周期

onLoad（首次加载）、onShow（显示）、onReady（渲染完成）、onPullDownRefresh（下拉刷新）、onReachBottom（上拉触底）。

代码示例

Page({
  data: { list: [], page: 1, loading: false },

  onLoad() {
    this.fetchList();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.setData({ page: 1 });
    this.fetchList().finally(() => wx.stopPullDownRefresh());
  },

  // 上拉加载更多
  onReachBottom() {
    if (this.data.loading) return;
    this.setData({ page: this.data.page + 1 });
    this.fetchList();
  },

  fetchList() {
    this.setData({ loading: true });
    // 请求接口，追加到 list...
  },

  // 点击商品
  onTapItem(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({ url: `/pages/detail/detail?id=${id}` });
  }
})

📚 JavaScript 语法速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`let x = 1;`	声明变量（可重新赋值）
`const y = 2;`	声明常量（不可重新赋值）
`var 已过时`	旧式变量声明，建议用 let/const
`if (条件) { } else { }`	条件判断
`for (let i = 0; i < n; i++) { }`	循环
`while (条件) { }`	条件循环
`function fn(a, b) { return a + b; }`	函数声明
`const fn = (a) => a + 1;`	箭头函数
`array.push(x) / pop()`	数组尾部添加 / 删除
`array.map(fn) / filter(fn)`	数组映射 / 过滤
`obj.key / obj["key"]`	访问对象属性
`JSON.stringify(obj)`	对象转 JSON 字符串
`JSON.parse(str)`	JSON 字符串转对象
`document.getElementById("id")`	按 id 取元素
`document.querySelector("选择器")`	按选择器取第一个元素
`element.textContent`	读写元素文本
`element.innerHTML`	读写元素 HTML（慎用，防 XSS）
`element.addEventListener("click", fn)`	绑定事件
`console.log(x)`	控制台输出（调试）
`setTimeout(fn, 1000)`	延迟执行（毫秒）
`window.location.href`	当前页面地址（可赋值跳转）
`localStorage.setItem("k", v)`	本地存储写入
`localStorage.getItem("k")`	本地存储读取
`new Promise((resolve, reject) => {})`	Promise 异步处理
`async / await`	异步函数语法糖