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

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

一、小程序组件生命周期

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

1. 组件自身生命周期

主要生命周期函数

生命周期执行顺序

1. 页面进入时：

   text

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

2. 页面跳转或退出时：

   text

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

3. 页面回退时：

   text

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

生命周期定义方式

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

javascript

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

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

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

定义示例：

javascript

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

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

1. 基本请求配置

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

服务器域名配置步骤：

1. 登录小程序管理后台

2. 进入「开发」-「开发设置」-「服务器域名」

3. 配置request合法域名

注意事项：

• 只支持HTTPS协议

• 不能使用IP地址或localhost（开发时可临时关闭校验）

• 域名必须经过ICP备案

• 一个月内最多可修改5次4

基本请求示例

javascript

wx.request({
  url: 'https://example.com/api', // 必须为HTTPS
  method: '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. 开发环境跳过域名校验

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

1. 点击右上角「详情」

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. 注意事项

1. 并发限制：

   • wx.request、wx.uploadFile、wx.downloadFile最大并发限制为10个

   • wx.connectSocket最大并发限制为5个2

2. 后台运行：

   • 小程序进入后台5秒内未完成的请求会被中断2

3. 数据编码：

   • 建议服务器返回UTF-8编码数据

   • 小程序会自动过滤BOM头2

4. 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();
        });
      }
    }
  }
});

四、常见问题解决方案

1. 请求失败排查步骤：

   • 检查域名是否配置正确

   • 确认域名已HTTPS且ICP备案

   • 开发环境可临时关闭域名校验

   • 检查网络连接是否正常

   • 查看服务器日志定位问题46

2. 组件生命周期不触发：

   • 确保使用Component构造器

   • 检查基础库版本是否支持

   • 确认组件在页面节点树中17

3. 数据更新不及时：

   • 在pageLifetimes.show中刷新数据

   • 使用事件总线或全局状态管理通知更新59

4. 跨域问题：

   • 小程序不存在浏览器跨域问题

   • 只需配置合法域名即可68

通过合理利用组件生命周期和网络请求API，可以构建出高效、可靠的小程序应用。建议在开发过程中遵循最佳实践，如封装请求方法、合理选择生命周期钩子等，以提高代码质量和维护性。