「微信小程序功能属性大全」最全组件、样式、事件与API解析！

要实现微信小程序的各种功能，了解各组件的常用属性至关重要。以下是对常用组件及其属性的详细介绍：

---

1. WXML 组件常用属性

通用属性

• id：组件的唯一标识符。
• class：组件的样式类，用于应用对应的样式规则。
• hidden：布尔值，控制组件的显示或隐藏。
• data-*：自定义数据属性，可在组件中存储自定义数据。

<view> 相关属性

• hover-class：指定组件在被点击时的样式类。
• hover-start-time：按下后多久出现点击态，单位毫秒。
• hover-stay-time：松开后点击态保留时间，单位毫秒。

<text> 相关属性

• selectable：布尔值，是否可选中。
• space：控制空格的处理，如 ensp、emsp、nbsp。
• decode：布尔值，是否解码显示。

<image> 相关属性

• src：图片资源地址。
• mode：图片裁剪、缩放的模式，如 aspectFit、aspectFill 等。
• lazy-load：布尔值，是否开启懒加载。

<button> 相关属性

• size：按钮的大小，可选值为 default、mini。
• type：按钮的样式类型，如 primary、default、warn。
• plain：布尔值，是否为镂空按钮。
• disabled：布尔值，是否禁用。

<input> 相关属性

• value：输入框的初始内容。
• type：输入框的类型，如 text、number、idcard、digit。
• password：布尔值，是否是密码类型。
• placeholder：输入框为空时的占位符。
• disabled：布尔值，是否禁用。

---

2. WXSS 样式常用属性

• 布局属性： display、flex-direction、justify-content、align-items。
• 尺寸属性： width、height、padding、margin。
• 定位属性： position、top、right、bottom、left。
• 文本属性： font-size、color、text-align、line-height。
• 背景属性： background-color、background-image、background-size。

---

3. 事件绑定常用属性

• bindtap：绑定点击事件。
• bindinput：绑定输入事件。
• bindchange：绑定变化事件。
• catchtap：捕获点击事件，阻止冒泡。
• catchtouchmove：捕获触摸移动事件，阻止页面滚动。

---

4. JavaScript API 常用属性

• 网络请求：

  • wx.request：发起 HTTPS 网络请求。

    wx.request({
      url: 'https://example.com/api',
      method: 'GET',
      success(res) {
        console.log(res.data);
      }
    });
    

• 页面跳转：

  • wx.navigateTo：保留当前页面，跳转到应用内的某个页面。

    wx.navigateTo({
      url: '/pages/detail/detail?id=123'
    });
    

• 提示框：

  • wx.showToast：显示消息提示框。

    wx.showToast({
      title: '成功',
      icon: 'success'
    });
    

• 本地存储：

  • wx.setStorageSync：同步设置本地缓存。

    wx.setStorageSync('key', 'value');
    const value = wx.getStorageSync('key');
    

• 用户登录：

  • wx.login：调用接口获取登录凭证（code）。

    wx.login({
      success(res) {
        console.log(res.code);
      }
    });