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

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

声明

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博客，欢迎交流！

微信小程序专栏

前端笔记专栏

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

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

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

微信小程序实例列表

前端笔记列表

游戏列表

posted @ 2018-04-05 19:12 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏