微信小程序----返回上一页刷新或当前页刷新

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，知道了页面的生命周期，如何实现返回刷新和当前页刷新呢？又在什么场景需要页面刷新效果呢？

实现方法

使用生命周期，【onLoad/onShow】重新调用，简单粗暴，能实现效果；
将会更新数据的方法集中到一个 init 方法中，其他时候需要刷新【重载】，直接调用这个方法，实现局部重载；
使用页面栈【getCurrentPages】，获取加载页面的方法和参数，调用对应局部重载的方法；
全局变量的重载，微信小程序----全局状态管理 (便于全局埋点等操作)。

优缺点

直接使用生命周期，简单粗暴，但是全页面重载，用户体验和资源占用比较明显，不建议使用；
初始化重载页面方法建议使用，这样加载当前页面数据比较方便，如果需要多接口刷新，直接调用，方便快捷，逻辑清晰，建议当前页面刷新使用；
页面栈返回刷新，配合页面初始化重载方便，建议返回刷新使用；
全局变量管理，由于this.setData的限制，所以尽量选择有限制的框架，不然性能消耗很严重，得不偿失；
页面和返回刷新，建议开发中使用二三配合使用，如果使用方法四，建议使用wxMiniStore!!!

由于此篇博客比较久远，代码实例，只有第一种方法，有需要后期补上！

1. 生命周期法刷新页面

 this.onLoad(this.options)；// 或者this.onShow()；

注意：如果刷新页面有上一个页面传入的参数时，需要将【this.options】传给 onLoad！

当前页面刷新

场景：

在这个电商充斥着生活各个角落的时代，都知道在购物过程会给用户生成订单，如果用户不满意或者收货等就需要去修改订单状态，在开发过程中，当用户修改订单成功后，后台一般会返回提示是否修改成功，而不会返回这个订单的详细情况。那么我们如何使前端页面更新这个订单的状态呢？一般有两种方法实现：

人为的修改前端的数据；

再次请求数据（也就是页面刷新）。
为实现取消订单刷新效果：

实现取消订单刷新效果：

在这里实现需要实现的就是当前页面刷新，在讲场景的时候都说了，实现的方式是再次请求数据进行更新，如何再次请求数据？就是周期函数的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()}})}}})}

返回上一页刷新

场景：

电商购买物品时填写地址，然后返回购买页面，更新填写的新地址。
为实现返回刷新效果：

实现返回刷新效果：

通过页面的生命周期，可以知道在微信小程序中，实现返回上一页的时候其实是直接将隐藏的页面再显示出来，所以不存在页面的再次加载，但是如果业务需求再次加载，在么实现？

通过上边的逻辑可以看出过程是： A页面 —》 B页面（改变A页面的数据）（在A跳转B的过场实现是A页面隐藏B页面渲染） —》返回A页面（更新A页面数据）（返回过程是隐藏B页面显示A页面）

通过上边的流程，可以看出是在A页面的显示函数中执行加载函数（onShow(){this.onLoad()}）

更新收货地址的代码：

onShow() { //返回显示页面状态函数//错误处理//this.onLoad()//再次加载，实现返回上一页页面刷新//正确方法//只执行获取地址的方法，来进行局部刷新
}

2. 页面初始化方法刷新数据

将需要重新加载或者初始化的变量和方法，放入一个初始化的方法中【initOrderList】；
页面加载或者navbar切换【getCurrentValue】等，需要重新加载的时候直接调用初始化方法【initOrderList】！

  // 当前选择订单状态getCurrentValue({detail}){let value = detail.status;this.setData({value})this.initOrderList();},// 初始化订单列表initOrderList(){this.data.list = [];this.data.curPage = 1;this.data.total = 1000;this.getOrderList();wx.pageScrollTo({scrollTop: 0})}

注意：

不需要视图层渲染的数据，或者在重新加载的时间段不需要重新渲染的数据，直接使用【this.data.xxx = xxx】进行修改，不要调用 this.setData 方法消耗渲染性能！

最终不需要视图层渲染的数据，建议另建一个 data 对象保存，或者直接放在页面栈的 this 中，页面进入的时候，逻辑层和视图层通信，微信小程序的处理是将data中的全部数据打包，不会筛选那些页面不需要渲染，所以视图层不使用的数据，单独使用对象保存！

3. 页面栈刷新数据

以获取上一页页面栈为例，通过 getCurrentPages 获取页面栈；
判断上一页面是否是【orderConfirm】，也就是确定跳转当前页面的来源；
此处是选择一个邮寄地址，注意不默认邮寄地址；
修改【orderConfirm】的【address】数据，及修改邮寄地址；
修改【isRefreshData】，及返回后页面不重新加载；
调用【getOrderPreviewInfo】，刷新订单预览的信息，修改地址后邮寄费等改变；
返回上一页【navigateBack】！

 // 获取页面栈中的上一页const _getPrevPage = () => {let pages = getCurrentPages();let len = pages.length;return pages && pages.length && pages[len - 2];}// 判断页面栈上一页是否是订单预览界面hasPrevPageOrderConfirm(page){return page && page.route && page.route.indexOf('orderConfirm') > -1;}let prevPage = _getPrevPage();if(this.hasPrevPageOrderConfirm(prevPage)){prevPage.setData({address});prevPage.data.isRefreshData = false;prevPage.getOrderPreviewInfo();this.$route({type: 'navigateBack', params: {delta: 1}})}

注意：此处刷新最好和方法二配合使用，这样调用方法，逻辑处理等比较集中处理！

4. 全局数据刷新

wxMiniStore管理全局数据；
定义全局的 store;

import { ProxyStore } from './store/proxyStore';
let store = new ProxyStore({state: {address: {},orderInfo: {}}
})

app.js 中引入 store;

import store from './utils/store';
import axios from "./utils/request/axios";
App({store,axios
})

在修改页面全局变量；

const { store , axios } = getApp();
let prevPage = _getPrevPage();
if(this.hasPrevPageOrderConfirm(prevPage)){prevPage.getOrderPreviewInfo().then(orderInfo => {store.setState({address,orderInfo})},console.log)this.$route({type: 'navigateBack', params: {delta: 1}})
}

注意：

返回修改，都要判断返回的是不是来源页面，比如此处，只有订单确认页面，才会执行这个返回，和返回刷新等操作；

此处全局数据修改必须调用方法获取数据后，才能设置全局的值！

总结

微信小程序要实现页面刷新，简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量，这个必须注意。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----返回上一页刷新或当前页刷新相关推荐

微信小程序返回上一页并刷新
微信小程序返回上一页并刷新前提:使用Taro和react 函数组件(使用类组件的应该同理) useDidShow,可以在每一次进入该页面时,都能刷新页面.这样使用Taro.navigateTo跳转到 ...
微信小程序返回上一页的各种方法
微信小程序返回上一页的各种方法 1. navigator 这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是该方法不能跳转tabbar页面,保留当前页面,在wxml使用 <na ...
微信小程序返回上一页各种方法
返回上一页,一共有4中方法,每种方法都有不一样细节一.方法罗列函数说明 navigator 保留当前页面,在wxml使用 wx.navigateTo 保留当前页面,在js使用 wx.redire ...
微信小程序返回上一页并携带参数
从A页面进入B页面再从B页面携带参数返回到A页面 B页面要带到A页面的参数 // 返回上一页携带参数let pages = getCurrentPages();let prevPage = pages ...
微信小程序返回上一页没有上一页的情况下返回首页
goback: function (e) {let pages = getCurrentPages();if (pages.length > 1) {wx.navigateBack({//返回d ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序获取上一页路由获取从哪个页面跳转进来的
微信小程序获取上一页路由获取从哪个页面跳转进来的 var pages = getCurrentPages(); let prevpage = pages[pages.length - 2];//上一 ...
后退一步小程序_微信小程序返回上一级页面的实现代码
微信小程序返回上一级页面 wx.navigateBack({ delta: 1 //返回上一级页面}) html: 保存 js: //提交 submit(){ let data = this.data ...
微信小程序返回上一级页面并传值刷新
1 说明在很多业务场景之下,需要返回上一级页面,并进行刷新,在微信小程序中的wx.navigateBack 方法中,返回上一页是不会刷新的.如果上一页的页面加载是在onLoad方法中触发的话,那么 ...

微信小程序----返回上一页刷新或当前页刷新

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

声明

HTML实现当前页面刷新

微信小程序----返回上一页刷新或当前页刷新

实现方法

优缺点

由于此篇博客比较久远，代码实例，只有第一种方法，有需要后期补上！

1. 生命周期法刷新页面

当前页面刷新

返回上一页刷新

2. 页面初始化方法刷新数据

3. 页面栈刷新数据

4. 全局数据刷新

总结

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

下载

微信小程序----返回上一页刷新或当前页刷新相关推荐

最新文章

热门文章