WXRUI體驗二維碼
如果文章對你有幫助的話，請打開微信掃一下二維碼，點擊一下廣告，支持一下作者！謝謝！
聲明
bug： 在onShow中執行this.onLoad()，會導致頁面第一次加載的時候數組加載兩次！
造成原因：頁面加載先執行onLoad，再執行的onShow，就會出現在onLoad加載一次數據，在onShow中執行this.onLoad()在加載一次數據。
解決辦法：將不需要刷新的數據放在onLoad中執行，將需要刷新的數據放在onShow中執行！
感謝：感謝editplusx的指正！
HTML實現當前頁面刷新
首先我們都知道在HTML頁面我們要實現當前頁面刷新一般會怎么解決呢？
1，reload()方法刷新當前頁面；
2，replace() 方法刷新當前頁面；
3，頁面自動刷新當前頁面；
三種實現js 刷新當前頁面的方法用法
微信小程序----返回上一頁刷新或當前頁刷新
1，在實現效果之前，需要知道微信小程序的頁面生命周期，不是很清楚的可以看微信小程序----頁面生命周期；
2，可以知道微信小程序的頁面是由onLoad（頁面加載）、onReady（頁面初次渲染完成）、onShow（頁面顯示）、onHide（頁面隱藏）、onUnload（頁面卸載）五個周期構成；
3，知道了頁面的生命周期，如何實現返回刷新和當前頁刷新呢？又在什么場景需要頁面刷新效果呢？
當前頁面刷新
場景：
在這個電商充斥着生活各個角落的時代，都知道在購物過程會給用戶生成訂單，如果用戶不滿意或者收貨等就需要去修改訂單狀態，在開發過程中，當用戶修改訂單成功后，后台一般會返回提示是否修改成功，而不會返回這個訂單的詳細情況。那么我們如何使前端頁面更新這個訂單的狀態呢？一般有兩種方法實現：1，人為的修改前端的數據；2，再次請求數據（也就是頁面刷新）。
為實現取消訂單刷新效果：
————————————————
實現取消訂單刷新效果：
在這里實現需要實現的就是當前頁面刷新，在講場景的時候都說了，實現的方式是再次請求數據進行更新，如何再次請求數據？就是周期函數的onLoad，將頁面重新加載，但是需要注意的是必須對相關data變量進行初始化。
更新訂單狀態函數的代碼：
//更新訂單狀態函數
updateOrder(orderID, orderState, title){
//獲取用戶保存在本地的個人信息
let account = wx.getStorageSync('accountInfo');
//請求服務器接口更新訂單狀態
app.globalMethod.REQUEST({
url: urlList.updateOrderStateUrl,
data: {
accountID: account.accountID,
passWord: account.passWord,
orderID: orderID,
orderState: orderState,
token: ''
},
success: res => {
// console.log(res)
//如果更新成功
if(res.data.state == '1'){
//提示用戶訂單狀態修改成功
wx.showToast({title: '您已' + title,success: res => {
//在提示的成功函數中初始化當前加載訂單頁為第一頁，清空訂單列表數據
this.setData({ currentPage: 1,orderList: []});
//用onLoad周期方法重新加載，實現當前頁面的刷新
this.onLoad()
}})
}
}
})
}
返回上一頁刷新
場景：
電商購買物品時填寫地址，然后返回購買頁面，更新填寫的新地址。
為實現返回刷新效果：
實現返回刷新效果：
1，通過頁面的生命周期，可以知道在微信小程序中，實現返回上一頁的時候其實是直接將隱藏的頁面再顯示出來，所以不存在頁面的再次加載，但是如果業務需求再次加載，在么實現？
2， 通過上邊的邏輯可以看出過程是： A頁面 —》 B頁面（改變A頁面的數據）（在A跳轉B的過場實現是A頁面隱藏B頁面渲染） —》返回A頁面（更新A頁面數據）（返回過程是隱藏B頁面顯示A頁面）
3，通過上邊的流程，可以看出是在A頁面的顯示函數中執行加載函數（onShow(){this.onLoad()}）
————————————————
更新收貨地址的代碼：
onShow() { //返回顯示頁面狀態函數
//錯誤處理
//this.onLoad()//再次加載，實現返回上一頁頁面刷新
//正確方法
//只執行獲取地址的方法，來進行局部刷新
}
總結
微信小程序要實現頁面刷新，簡單的說就是在不同的地方執行onLoad周期函數。不過需要注意在刷新時是否需要初始化變量，這個必須注意。
版權聲明：本文為CSDN博主「Rattenking」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_38082783/article/details/79828386