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

---微信小程序 同时被 2 个专栏收录
70 篇文章 4 订阅
75 篇文章 43 订阅

WXRUI体验二维码

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

优缺点

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

1. 生命周期法刷新页面

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

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

当前页面刷新

场景:

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

  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()//再次加载,实现返回上一页页面刷新
	//正确方法
	//只执行获取地址的方法,来进行局部刷新
}

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

  1. 将需要重新加载或者初始化的变量和方法,放入一个初始化的方法中【initOrderList】;
  2. 页面加载或者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})
  }

注意:

  1. 不需要视图层渲染的数据,或者在重新加载的时间段不需要重新渲染的数据,直接使用【this.data.xxx = xxx】进行修改,不要调用 this.setData 方法消耗渲染性能!
  2. 最终不需要视图层渲染的数据,建议另建一个 data 对象保存,或者直接放在页面栈的 this 中,页面进入的时候,逻辑层和视图层通信,微信小程序的处理是将data中的全部数据打包,不会筛选那些页面不需要渲染,所以视图层不使用的数据,单独使用对象保存

3. 页面栈刷新数据

  1. 以获取上一页页面栈为例,通过 getCurrentPages 获取页面栈;
  2. 判断上一页面是否是【orderConfirm】,也就是确定跳转当前页面的来源;
  3. 此处是选择一个邮寄地址,注意不默认邮寄地址;
  4. 修改【orderConfirm】的【address】数据,及修改邮寄地址;
  5. 修改【isRefreshData】,及返回后页面不重新加载;
  6. 调用【getOrderPreviewInfo】,刷新订单预览的信息,修改地址后邮寄费等改变;
  7. 返回上一页【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. 全局数据刷新

  1. wxMiniStore管理全局数据;
  2. 定义全局的 store;
import { ProxyStore } from './store/proxyStore';
let store = new ProxyStore({
  state: {
    address: {},
    orderInfo: {}
  }
})
  1. app.js 中引入 store;
import store from './utils/store';
import axios from "./utils/request/axios";
App({
  store,
  axios
})
  1. 在修改页面全局变量;
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}})
}

注意:

  1. 返回修改,都要判断返回的是不是来源页面,比如此处,只有订单确认页面,才会执行这个返回,和返回刷新等操作;
  2. 此处全局数据修改必须调用方法获取数据后,才能设置全局的值!

总结

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

WXRUI体验二维码

WXRUI体验码

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

下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

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

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

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

微信小程序实例列表

前端笔记列表

游戏列表

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值