微信小程序组件

微信小程序组件与API的结合使用

组件负责UI展示与交互，API提供功能支持，两者协同实现完整功能

一、组件触发API调用：用户交互驱动功能

组件通过绑定事件接收用户操作，在事件处理函数中调用API实现具体功能。

示例1：按钮点击调用弹窗API

WXML（组件与事件绑定）：

<!-- pages/index/index.wxml --> <button bindtap="showToast">点击显示提示</button>

JS（事件处理与API调用）：

// pages/index/index.js Page({ showToast() { // 调用微信弹窗API（wx.showToast） wx.showToast({ title: '按钮被点击了', icon: 'none', // 不显示图标 duration: 2000 // 提示持续2秒 }) } })

示例2：表单提交调用网络请求API

WXML（表单组件）：

<!-- pages/login/login.wxml --> <form bindsubmit="handleSubmit"> <input name="username" placeholder="请输入用户名" /> <input name="password" type="password" placeholder="请输入密码" /> <button form-type="submit">登录</button> </form>

JS（表单处理与多个API结合）：

// pages/login/login.js Page({ handleSubmit(e) { const { username, password } = e.detail.value; // 调用网络请求API（wx.request）提交表单 wx.request({ url: 'https://api.example.com/login', // 需配置合法域名 method: 'POST', data: { username, password }, success(res) { if (res.data.code === 0) { // 登录成功，调用本地存储API保存用户信息 wx.setStorageSync('userInfo', res.data.user); // 调用导航API跳转到首页 wx.navigateTo({ url: '/pages/home/home' }); } } }) } })

二、API数据驱动组件渲染：动态更新UI

API调用后返回的数据，通过this.setData更新到页面数据中，组件根据数据动态渲染UI。

示例：调用接口获取列表数据并渲染

WXML（列表渲染组件）：

<!-- pages/list/list.wxml --> <view class="container"> <view wx:for="{{newsList}}" wx:key="id" class="news-item"> <text>{{item.title}}</text> <image src="{{item.imgUrl}}" mode="widthFix"></image> </view> </view>

JS（API调用与数据更新）：

// pages/list/list.js Page({ data: { newsList: [] // 初始为空数组 }, onLoad() { // 页面加载时调用API获取数据 wx.request({ url: 'https://api.example.com/news', success: (res) => { // API返回数据后，更新页面数据 this.setData({ newsList: res.data.list // 假设接口返回{ list: [...] } }); } }); } })

三、自定义组件与API的结合：封装复用功能

自定义组件可以内置API调用逻辑，实现功能复用，提高开发效率。

示例：自定义头像组件（调用用户信息API）

1. 组件WXML（components/avatar/avatar.wxml）：

<image src="{{avatarUrl}}" mode="widthFix" bindtap="getUserInfo" ></image>

2. 组件JS（components/avatar/avatar.js）：

Component({ data: { avatarUrl: '/images/default-avatar.png' // 默认头像 }, methods: { getUserInfo() { // 调用获取用户信息API wx.getUserProfile({ desc: '用于展示头像', // 声明用途（必填） success: (res) => { // 更新组件内的头像地址 this.setData({ avatarUrl: res.userInfo.avatarUrl }); } }); } } })

3. 页面中使用组件：

<!-- pages/profile/profile.wxml --> <avatar></avatar>

4. 页面配置（pages/profile/profile.json）：

{ "usingComponents": { "avatar": "/components/avatar/avatar" } }

四、组件属性与API参数联动：动态配置API

通过组件的properties接收外部参数，动态配置API的参数，实现更灵活的功能。

示例：动态传入用户ID获取详情

1. 页面中使用组件时传入参数：

<!-- 页面中使用组件时传入userId --> <user-detail userId="{{currentUserId}}"></user-detail>

2. 组件JS逻辑：

// 自定义组件 user-detail.js Component({ properties: { userId: { type: String, value: '', observer: 'fetchUserDetail' // 监听userId变化，自动调用API } }, data: { userDetail: null }, methods: { fetchUserDetail(newUserId) { if (!newUserId) return; // 用组件属性newUserId作为API参数 wx.request({ url: `https://api.example.com/user/${newUserId}`, success: (res) => { this.setData({ userDetail: res.data }); } }); } } })

五、生命周期中结合API：初始化与清理

在页面或组件的生命周期函数中调用API，实现初始化数据加载和资源清理。

示例：页面加载时获取定位并渲染

// pages/map/map.js Page({ data: { location: '' }, onLoad() { // 页面加载时调用定位API wx.getLocation({ type: 'wgs84', success: (res) => { const { latitude, longitude } = res; this.setData({ location: `纬度：${latitude}，经度：${longitude}` }); } }); }, onUnload() { // 页面卸载时停止定位监听（如果有） wx.stopLocationUpdate(); } })

六、常见组合场景总结

组件场景	结合的API类型	示例功能
按钮点击	wx.showModal、wx.navigateTo	弹窗确认、页面跳转
表单提交	wx.request、wx.setStorage	提交数据、保存本地缓存
列表渲染	wx.request	加载并展示网络数据
图片/头像	wx.getUserProfile、wx.chooseImage	获取用户头像、选择本地图片
滚动加载	wx.request + onReachBottom	分页加载更多数据
下拉刷新	wx.request + onPullDownRefresh	刷新列表数据