微信小程序組件生命周期與接口請求方法詳解
一、小程序組件生命周期
微信小程序組件的生命周期指的是組件在不同階段自動觸發的函數，開發者可以利用這些鉤子函數在特定時機執行相應操作。小程序組件的生命周期主要分為兩類：組件自身生命周期和組件所在頁面的生命周期。
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
通過合理利用組件生命周期和網絡請求API，可以構建出高效、可靠的小程序應用。建議在開發過程中遵循最佳實踐，如封裝請求方法、合理選擇生命周期鉤子等，以提高代碼質量和維護性。
