当前位置：首页 > news >正文

小程序组件的生命周期，以及在小程序中进行接口请求的方法设置

news 2025/7/30 6:14:16

微信小程序组件生命周期与接口请求方法详解

一、小程序组件生命周期

微信小程序组件的生命周期指的是组件在不同阶段自动触发的函数，开发者可以利用这些钩子函数在特定时机执行相应操作。小程序组件的生命周期主要分为两类：组件自身生命周期和组件所在页面的生命周期。

1. 组件自身生命周期

主要生命周期函数

生命周期函数	触发时机	说明
`created`	组件实例刚被创建时	此时不能调用`setData`，适合添加自定义属性字段
`attached`	组件进入页面节点树时	`this.data`已初始化，适合大多数初始化工作
`ready`	组件视图层布局完成后	可以获取节点信息
`moved`	组件被移动到节点树另一位置时	较少使用
`detached`	组件从页面节点树移除时	适合做清理工作
`error`	组件方法抛出错误时	错误处理

生命周期执行顺序

页面进入时：

text

子组件 ———————— created
子组件 ———————— attached
页面 ———————— onLoad
子组件 ———————— pageLifetimes —————— show
页面 ———————— onShow
子组件 ———————— ready
页面 ———————— onReady

页面跳转或退出时：

text

子组件 ———————— pageLifetimes —————— hide
页面 ———————— onHide

页面回退时：

text

子组件 ———————— pageLifetimes —————— show
页面 ———————— onShow
```:cite[5]

生命周期定义方式

推荐在lifetimes字段内声明生命周期函数（优先级最高）：

javascript

Component({lifetimes: {created() {console.log('组件实例刚被创建');},attached() {console.log('组件进入页面节点树');// 适合在此处发起数据请求},detached() {console.log('组件从页面节点树移除');}}
});

2. 组件所在页面的生命周期

组件可以监听所在页面的状态变化，通过pageLifetimes定义：

生命周期函数	触发时机	说明
`show`	页面被展示时	如从后台切回前台
`hide`	页面被隐藏时	如切后台或跳转页面
`resize`	页面尺寸变化时	接收尺寸参数
`routeDone`	页面路由完成时	-

定义示例：

javascript

Component({pageLifetimes: {show() {console.log('页面展示');// 可以在此刷新数据},hide() {console.log('页面隐藏');},resize(size) {console.log('页面尺寸变化', size);}}
});

二、小程序接口请求方法设置

1. 基本请求配置

小程序网络请求使用wx.requestAPI，必须配置HTTPS域名248。

服务器域名配置步骤：

登录小程序管理后台
进入「开发」-「开发设置」-「服务器域名」
配置request合法域名

注意事项：

只支持HTTPS协议
不能使用IP地址或localhost（开发时可临时关闭校验）
域名必须经过ICP备案
一个月内最多可修改5次4

基本请求示例

javascript

wx.request({url: 'https://example.com/api', // 必须为HTTPSmethod: 'GET', // 或POST、PUT等data: { // 请求参数key1: 'value1',key2: 'value2'},header: { // 请求头'content-type': 'application/json'},success(res) {console.log('请求成功', res.data);},fail(err) {console.error('请求失败', err);},complete() {console.log('请求完成');}
});

2. 开发环境跳过域名校验

在开发者工具中可临时开启：

点击右上角「详情」
勾选「不校验合法域名、web-view域名、TLS版本及HTTPS证书」

注意：仅限开发调试使用，正式环境必须配置合法域名48

3. 请求封装示例

建议对请求进行统一封装，便于管理和维护：

javascript

// utils/http.js
const request = (options) => {return new Promise((resolve, reject) => {wx.request({url: `https://yourdomain.com${options.url}`,method: options.method || 'GET',data: options.data || {},header: {'content-type': 'application/json','Authorization': wx.getStorageSync('token') || ''...options.header},success(res) {if (res.statusCode === 200) {resolve(res.data);} else {reject(res.data);}},fail(err) {reject(err);}});});
};// GET请求封装
const get = (url, data = {}, options = {}) => {return request({url,data,method: 'GET',...options});
};// POST请求封装
const post = (url, data = {}, options = {}) => {return request({url,data,method: 'POST',...options});
};export default {request,get,post
};

4. 组件中发起请求的最佳实践

在组件的attached或页面生命周期的show中发起请求：

javascript

Component({lifetimes: {attached() {this.loadData();}},pageLifetimes: {show() {// 页面显示时刷新数据this.loadData();}},methods: {async loadData() {try {const res = await get('/api/data');this.setData({ list: res.data });} catch (err) {console.error('加载数据失败', err);}}}
});

5. 注意事项

并发限制：
- wx.request、wx.uploadFile、wx.downloadFile最大并发限制为10个
- wx.connectSocket最大并发限制为5个2
后台运行：
- 小程序进入后台5秒内未完成的请求会被中断2
数据编码：
- 建议服务器返回UTF-8编码数据
- 小程序会自动过滤BOM头2
GET与POST区别：
- GET参数在URL中，有长度限制
- POST参数在请求体中，适合大数据量传输8

三、综合应用示例

组件生命周期与请求结合示例

javascript

// components/my-component.js
Component({lifetimes: {created() {// 初始化非响应式数据this.timer = null;},attached() {// 组件挂载时加载数据this.fetchData();// 启动轮询this.timer = setInterval(() => {this.fetchData();}, 60000);},detached() {// 组件卸载时清除定时器clearInterval(this.timer);}},pageLifetimes: {show() {// 页面显示时立即刷新数据this.fetchData();},hide() {// 页面隐藏时暂停轮询clearInterval(this.timer);}},methods: {async fetchData() {wx.showLoading({ title: '加载中...' });try {const res = await post('/api/list', {page: this.data.currentPage});this.setData({ list: res.data.list,total: res.data.total});} catch (err) {wx.showToast({title: '加载失败',icon: 'error'});} finally {wx.hideLoading();}},onReachBottom() {// 上拉加载更多if (this.data.list.length < this.data.total) {this.setData({currentPage: this.data.currentPage + 1}, () => {this.fetchData();});}}}
});

四、常见问题解决方案

请求失败排查步骤：
- 检查域名是否配置正确
- 确认域名已HTTPS且ICP备案
- 开发环境可临时关闭域名校验
- 检查网络连接是否正常
- 查看服务器日志定位问题46
组件生命周期不触发：
- 确保使用Component构造器
- 检查基础库版本是否支持
- 确认组件在页面节点树中17
数据更新不及时：
- 在pageLifetimes.show中刷新数据
- 使用事件总线或全局状态管理通知更新59
跨域问题：
- 小程序不存在浏览器跨域问题
- 只需配置合法域名即可68