精华内容
下载资源
问答
  • 微信小程序启动刷新

    2021-03-29 17:58:08
    最近写公司的一个微信小程序遇到了一个小问题,就是由于微信小程序自己的运行机制小程序不会主动被微信注销导致的小程序不会在你退出小程序界面后自动unload,从微信小程序官方文档上可以看到: (此图片来源于网络,...
  • 微信小程序----返回上一页刷新或当前页刷新

    万次阅读 多人点赞 2018-04-05 19:11:49
    ... 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; ... 3,页面自动刷新当前页面;... 三种实现js 刷新当前... 1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序

    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项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • 微信小程序下拉刷新

    2020-07-03 09:36:11
    微信小程序下拉刷新 //1:打开json文件添加 : "enablePullDownRefresh": true 2: //下拉刷新 onPullDownRefresh: function () { wx.showNavigationBarLoading() //在标题栏中显示加载 //...

    微信小程序下拉刷新

    		//1:打开json文件添加  :
    		  "enablePullDownRefresh": true
    		
    		2: //下拉刷新
    			  onPullDownRefresh: function () {
    			    wx.showNavigationBarLoading() //在标题栏中显示加载
    			    //模拟加载
    			    setTimeout(function () {
    			      // complete
    			      wx.hideNavigationBarLoading() //完成停止加载
    			      wx.stopPullDownRefresh() //停止下拉刷新
    			    }, 1500);
    			  }
    
    	//3: 如果不起作用检查js文件删除自动生成的onPullDownRefresh函数
    	  /**
    		   * 页面相关事件处理函数--监听用户下拉动作
    		   */
    		  onPullDownRefresh: function () {
    		
    		  },
    

    自己开发的出门必备小程序可以扫码体验交流交流

    在这里插入图片描述

    展开全文
  • 微信小程序下拉刷新问题  ​ ​ ​ ​ ​ ​ ​我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享...

    微信小程序下拉刷新问题

     ​ ​ ​ ​ ​ ​ ​我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡同里出来。

     ​ ​ ​ ​ ​ ​ ​大家在做微信小程序的下拉刷新的时候,估计都看到官网文档给的这个东西:
    微信下拉刷新API
    见到过了这两个API,想必大家也就见到这个onPullDownRefresh()函数:

    // 官网示例代码
    Page({
      onPullDownRefresh () {
        wx.stopPullDownRefresh()
      }
    })
    

    错误点:

    我当时在看到这个示例代码时,直接脑子一过:这么简单?

     ​ ​ ​ ​ ​ ​ ​然后我就直接去js文件里定义了一个叫onPullDownRefresh()的同名方法,写上我的逻辑代码,最后调用一下停止刷新wx.stopPullDownRefresh()

    看似完美的代码,却令我苦恼一上午,我写的代码就是不执行,函数命名和书写也没错,错在哪里呢?

     ​ ​ ​ ​ ​ ​ ​错就错在重复定义了onPullDownRefresh()函数,大家注意一下,这个函数在js文件中是自动生成的【自己手敲结构的除外】,所以不要犯重复定义的错误,直接在生成的函数里写就行了。
    Page生成的下拉刷新函数
     ​ ​ ​ ​ ​ ​ ​由于这个函数的生成的位置比较靠下,而我们写代码时一般都会在onLoad()和data{}这两个东西所在的区域来进行,所以很容易就会忽略这个问题。

     ​ ​ ​ ​ ​ ​ ​所以有下拉刷新有问题的朋友一定要先检查一下是不是重复定义了这个onPullDownRefresh()函数。


     ​ ​ ​ ​ ​ ​ 至于我一开始官网上讲的wx.stopPullDownRefresh()wx.stopPullDownRefresh()这两个函数怎么使用,有什么作用,这个官网上就说的很明显了,网上也有很多教程,在这里我就不赘述了。

    展开全文
  • 微信小程序如何刷新当前界面

    千次阅读 2020-11-18 12:03:37
    微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作。下面介绍一下...

    在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作。下面介绍一下微信小程序刷新当前界面的几种方法。

    方法一:this.onLoad()

    使用方法:在操作函数中调用this.onLoad()或that.onLoad()(有时候this的作用域不够的时候需要定义that = this)。

    适用场景:本次操作对页面onLoad函数所携带的各种参数没有影响。这时候我们在页面第一次执行onLoad函数的时候可以定义一个变量_options将onLoad函数的参数options存储到这个变量中,等操作函数执行完毕时,调用this.onLoad(_options),如果本次操作之后下一次该界面加载时onLoad函数的options变量发生了改变则使用该方法无效。

    方法二:this.onReady() 或者 this.onShow()(亲测有效)

    使用方法:在操作函数中调用this.onReady()函数。

    使用前提:本页面的数据操作需要在页面的onReady()或onShow()函数中完成。

    方法三:定义标志

    使用方法:在app.js中,定义一个全局变量Flag,默认值为false,进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话,先将它的值设置为false,再调用接口获取数据。代码如下:

    onShow: function(){
          if (app.globalData.Flag) {
                app.globalData.Flag = false;
                this.getData();//调用接口获取数据
          }  
    }
    

    这种方法虽然感觉有点复杂而且笨重,但是确实可以解决实际问题。

    展开全文
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小...
  • 最近在做一个小程序每次更新版本之后都需要删除小程序,再次扫码进入才可以看到新版本,接下来吾爱编程为大家介绍一下微信小程序版本自动更新的方法,有需要的小伙伴可以参考一下:1、启动机制:(1)、热启动:小程序...
  • 微信小程序上拉刷新下拉加载

    万次阅读 2019-06-25 10:22:32
    data: '', method: 'GET', dataType: 'json', success:(res)=> { console.log(res.data.data) this.setData({ goods: res.data.data }) } }) }, 类似于翻页,没刷新一次,显示的数组换一次内容,并且替换goods /** ...
  • 微信小程序页面刷新实例

    千次阅读 2019-06-09 21:15:08
    小程序提供了getCurrentPages()函数获取页面栈。 在Onshow()函数里写如下代码 if (getCurrentPages().length != 0) { //刷新当前页面的数据 getCurrentPages()[getCurrentPages().length - 1].onLoad() } ...
  • onPullDownRefresh: function() { this.myRecordingA(1,answerUrl);...//myRecordingA 为自己定义的函数,作为刷新时请求服务器的方法 // wx.stopPullDownRefresh(); 为停止当前页面下拉刷新 在下拉函...
  • 解决微信小程序刷新的问题

    千次阅读 2018-08-08 15:48:40
     话不多说,最近在公司做关于微信小程序的项目,由于小程序没有自带的刷新功能,所以每次业务请求后都要想办法自己刷新页面。这里总结了两种方法:  1.在onShow事件里通过调用 that.onReady() 和 that.onLoad() ...
  • 在app.json中配置全局下拉刷新: "window": { "enablePullDownRefresh": false } 在页面json文件中配置: "enablePullDownRefresh": true ...触发后不能自动回弹,需要调用结束下拉方法: onPullDo...
  • 微信小程序自动更新

    千次阅读 2018-10-13 10:59:12
    微信小程序项目发布上线后,如何进行自动更新版本呢? 在主页面加载的onload加入以下代码: //检查是否存在新版本 wx.getUpdateManager().onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console....
  • 作者的话:我发现这个方法有副作用,就是别的应用也可能...微信开发者工具支持刷新和重建的快捷键,所以我们可以发送一段 apple script 脚本来达到刷新/重建项目的效果,从而免去手工切换再使用快捷键的麻烦。例如:  
  • 微信小程序刷新webview页面问题

    万次阅读 2018-03-09 17:41:47
    一、背景     ...我这边小程序的首页使用的是web-view...二、微信小程序的生命周期函数 生命周期函数 onLoad: 页面加载 一个页面只会调用一次。 接收页面参数可以获取wx.navi...
  • 在下拉函数里加上这句wx.stopPullDownRefresh(); /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { var that = this; // console.log(111) ... wx....
  • 参考:微信小程序开发文档->框架>逻辑层->注册页面 实现原理: 1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。 2...
  • 微信小程序刷新页面

    千次阅读 2019-03-04 16:58:37
    平时作小程序开发时候会遇到一些刷新页面的问题,下面就一起来看一下。
  • 小牛商城 微信小程序版 开发6个小时,中途被微信ide搞懵逼了。 截图 总结 彻底没有dom的概念,整体框架规范与格式与vue几乎一个轮子 使用时间长了,得杀掉IDE重启下。猜测是修改app.json导致什么事件重复监听导致...
  • 最近在做一个小程序项目,需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新,这段话确实禁止了下拉刷新,无论是安卓手机端还是苹果端,但是在苹果端却出现了一...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 各位大牛,请问微信小程序页面我删除了数据,怎样自动刷新该页面
  • 微信小程序 刷新页面

    万次阅读 2018-09-05 15:45:28
    刷新页面,其实就是刷新页面上的数据。一般页面数据加载函数都写在 onLoad 或者 onShow 的回调函数中。所以我们只要获取当前页面,完后手动调用这两个函数即可 let pages = getCurrentPages() //获取页面数组 let ...
  • 微信小程序万能下拉刷新组件前言思路实现步骤定义组件具体实现js代码实现布局实现样式使用页面json配置页面布局js实现动态宽高度,充满屏幕应用 前言 微信小程序(后面统称小程序)在page中已经自带下拉刷新功能,只...
  • 微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识 一、基本目录介绍 1.微信小程序 app.js ------ 小程序逻辑 app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息) app.wxss ---- ...
  • 微信小程序采集模块实例,是一个新闻文章内容截取采集处理程序,类似于新闻采集的客户端,好比今日头条一样。利用微信小程序开发工具,截获搜狗搜索GET请求包有关微信平台热门新闻与关键词的数据生成的新闻列表浏览...
  • 下拉刷新看似简单,但实现时遇到了一个问题,始终无法实现效果,故记录在此。 下拉刷新代码实现 在页面的.json配置文件中加入enablePullDownRefresh,以启用页面的下拉刷新功能,见官网配置项 ...
  • wx-mina-custom-tabbar 微信小程序自定义tabbar,包含可左右滚动。
  • 第一个微信小程序demo 项目简介  这个demo有8个页面:欢迎页、登录注册页、场馆首页、场馆详情页、课程首页、个人中心、我的订单、我的收藏。场馆首页中的场馆列表加载更多出的数据是请求的接口数据,场馆详情页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,949
精华内容 5,979
关键字:

微信小程序自动刷新

微信小程序 订阅