精华内容
下载资源
问答
  • 小程序刷新重置当前页面

    万次阅读 2018-08-21 15:20:27
    小程序开发过程中遇到提交表单,当表单提交完成后重置当前页面,因此需要用到刷新当前页面,关键代码如下: if (getCurrentPages().length != 0) { //刷新当前页面的数据 getCurrentPages()[getCurrentPages()...

    在小程序开发过程中遇到提交表单,当表单提交完成后重置当前页面,因此需要用到刷新当前页面,关键代码如下:

    if (getCurrentPages().length != 0) {
                //刷新当前页面的数据
                getCurrentPages()[getCurrentPages().length - 1].onLoad()
              }

    首先判断当前页面加载的所有页面的数组,数组中最后一个就是当前页面,然后onload当前页面。

    展开全文
  • 微信小程序----返回上一页刷新或当前页刷新

    万次阅读 多人点赞 2018-04-05 19:11:49
    HTML实现当前页面刷新 首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢? 1,reload()方法刷新当前页面... 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项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • uniapp小程序当前页面刷新

    千次阅读 2021-02-01 16:37:58
    最近用uniapp开发小程序就遇到了个神坑,当前项目需求是点击投票之后在重新请求获取接口最新数据,刷新当前页面, 然而我用了微信原生方法,在点击投票后调用this.onload()钩子函数,发现报错 this.onload not is ...

    最近用uniapp开发小程序就遇到了个神坑,当前项目需求是点击投票之后在重新请求获取接口最新数据,刷新当前页面,

    在这里插入图片描述
    然而我用了微信原生方法,在点击投票后调用this.onload()钩子函数,发现报错 this.onload not is functions ,刚开始我要以为是this指向问题,后来发现,uniapp在编译打包成小程序代码后,onload是不兼容的,所以就无法调用onload
    在这里插入图片描述
    于是我仔细分析后,想出了一个办法 ,
    1,先在data定义一个变量 作为函数名
    data(){
    return{
    fun:new Function()
    }
    }
    2,在onload中 用刚才的变量嵌套所有请求的函数
    在这里插入图片描述
    3,在onload最后调用这个函数 初始化所有数据, 如果需要保存参数,也需要在data中定义一个变量接收options的路由参数

    4在点击投票后直接用this.fun()调用封装在onload里面的fun函数

    在这里插入图片描述
    再次点击投票后 ,接口和页面都重新加载 数据也重新渲染
    在这里插入图片描述

    如果想实现下拉刷新 方法一样 。

    展开全文
  • 每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面小程序中新增/减少页面,都需要对 pages 数组进行修改。 所以只需要将app.json的pages对应的子页面放在第一个位置就行. ...

    官方文档给出:


    pages

    接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

    所以只需要将app.json的pages对应的子页面放在第一个位置就行.




    这样无论怎么刷新页面,都会停在当前的子页面.

    展开全文
  • 首先微信小程序前端是数据驱动,在单个页面时更新数据必会刷新页面,所以想要实现此功能那就要在上一个或多个页面更改此页面的数据,在回到此页面时,其实页面已重新渲染完了 //假设要更改的数组为goods[1,2,3,4,...
  • canvas绘制出页面 将canvas转化成图片,获取到临时路径 用临时路径将图片保存至相册 组件及API canvas ( 画布 ) 官方文档链接 wx.canvasToTempFilePath ( 将canvas转换为临时文件路径 ) 官方文档链接 wx....
  • 微信小程序没有将view,image,text等标签直接生成图片的api。但是有将canvas直接生成图片的api 将canvas标签生成图片的api---------------------wx.canvasToTempFilePath view,image,text等标签,都可以在canvas里...
  • 效果展示: 代码地址:https://github.com/Yana5417/Share/  
  • 小程序复制和保存页面为图片

    千次阅读 2019-08-24 12:19:26
    保存页面为图片 // HTML ;height:{{canvasH}}px;' bindlongpress='savePic'> <cover-image src="{{imgurl}}m_jilu.png"></cover-image> wx.getSystemInfo({ success: function (res) { var canvasW = res...
  • 在用户保存数据后刷新主页面A(详细信息展示页面的前一页面)。 A页面点击某一项跳转到B页面,B页面返回时提示保存并刷新。 B页面onUnload事件如下: ```javascript onUnload: function () { var _this=this;//...
  • //获取当前页面的页面栈 var page=getCurrentPages(); //获取上一个页面的页面栈 var lastPage=page[page.length-2]; //调用onload事件 lastPage.onLoad(); wx.navigateBack({ delta:1 }) 写在wx.request({})...
  • 之前分享了一篇 uniApp实现微信分享页面/二维码功能
  • 微信小程序截屏保存图片

    万次阅读 2019-09-23 09:56:37
    小程序的分享功能中,截屏是一个比较常见的需求。而截屏不只是截取当前页面,还要将二维码放进去以方便用户长按识别。从营销方面来看,这样可以说是一举两得了。要实现的效果如下: 实话说,一开始收到这个需求...
  • 前言 下面这段警告提示,虽然不是报错,但...在小程序目录里找到project.config.json,找到setting配置对象,将checkSiteMap设置为false,最后保存重启开发者工具即可。 "setting": { "checkSiteMap": true, } ...
  • 在微信小程序中,我们可以分为两种不同的页面,一种是带底部导航栏,也就是 tabBar 的页面,一种是不带导航栏的普通页面。当我们在 普通页面 -> tabBar 页面 时,就需要用到如下方法: wx.switchTab({ url: '...
  • 我们知道,一个页面的跳转,首先需要为组件绑定事件,以触发事件从而执行页面跳转代码。而事件又分为冒泡事件和非冒泡事件,以下为冒泡事件,其他组件事件无特殊申明都是非冒泡事件: 类型 触发事件 ...
  • 微信小程序纯前端生成海报并保存本地

    万次阅读 热门讨论 2018-04-15 22:42:03
    公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研 因为小程序的打包限制,不可能将所有的图片都放在代码目录里面。...
  • 在修改二级页面后直接返回一级页面,并且二级页面的数据跟一级页面有一定的关联性,这个时候返回就应该改变一级页面的数据,要想实现这个功能,有以下几个思路一、在二级页面修改成功后,把修改的内容保存到缓存或者...
  • 大家都知道,微信小程序保存图片等都需要获取相对应的权限才可以进行接下来的操作可行,那么如果我们一开始就拒绝了授权,再次想要保存的时候也还是要打开权限才行,所以我们来认识两个跟小程序授权相关的api。...
  • 如何在微信小程序页面间传递数据?

    万次阅读 多人点赞 2018-05-26 15:36:57
    我们在之前发布过小程序页面传值方法的 ,说明了在小程序开发中,两种常见的页面之间传值方法。 本期,「知晓程序」为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有关页面间数据传递的更多方法。 ...
  • 微信小程序页面打开数量限制

    千次阅读 2019-02-18 17:56:43
    无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的。当点击页面的回退按钮就是把当前页面关闭。 这个过程中会涉及到一个问题,就是打开页面的数量。在某些设计下,比如一个商品...
  • 小程序销毁页面的方法

    千次阅读 2020-06-23 21:57:24
    小程序销毁页面的方法 阐述: 在使用页面跳转的时候,往往是需要销毁上一个页面的,那么就需要用到生命周期函数onUnload了。 一、具体使用方法如下: 1.1,注意以下几点: 要想触发销毁页面onUnload生命周期执行...
  • 先看看手机上的效果 js实现的代码: ... current: app.globalData.URL + res.data.data.imageUrl, // 当前显示图片的http链接 urls: [app.globalData.URL + res.data.data.imageUrl] // 需要预览的图片ht
  • 微信小程序向本地保存

    千次阅读 2019-05-30 01:37:43
    动态设置当前页面的标题。 wx.setNavigationBarTitle({ title: '当前页面' }) wx.getSetting({ success(res) { console.log(res) if (!res.authSetting['scope.writePhotosAlbum']) { wx.openSetting({ ...
  • 本demo实现的功能,微信小程序给h5传参,h5给小程序传参 实现代码: <!--index.wxml --> <web-view src="https://xxx.xxx.cn/test1.html?user=12" bindmessage="bindGetMsg"/>...
  •  使用小程序的“自定义编译”功能,既可设置当前页面为首屏打开页面: https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#自定义编译 转载于:...
  • 小程序指定页面二维码生成

    万次阅读 2019-07-22 15:15:42
    小程序生成指定页面二维码 小程序生成海报分享传播,需要生成分享页面的二维码,用户扫描这个二维码即可进入分享的这个小程序页面,对于分享者更具有指向性; Java后台代码 二维码获取详细接口信息可参照官方文档 ...
  • 主要是用到这个api wx.previewImage({ current: , // 当前显示图片的http链接 ...页面.wxml &lt;image src="{{invoice.viewPath}}" data-url='{{invoice.viewPath}}' bindtap='showBigImg'&g...
  • 小程序生成图片保存到系统相册

    千次阅读 2018-08-11 15:01:54
     content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'  })  return;  }  // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope  wx....
  • 在微信小程序页面生成图片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 234,531
精华内容 93,812
关键字:

保存当前页面小程序