微信小程序> 微信小程序刷新webview页面问题

微信小程序刷新webview页面问题

浏览量:8046 时间: 来源:焕想-不怎么回复博客

一、背景

      我这边小程序的首页使用的是web-view组件。相当于直接引入了url,访问写好的h5页面即可。比着原生的小程序页面来说,方便了不少,但是刷新是个问题。这里记录一下刷新的方法。

二、微信小程序的生命周期函数

生命周期函数

onLoad: 页面加载一个页面只会调用一次。接收页面参数可以获取wx.navigateTo和wx.redirectTo及navigator/中的 query。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。onHide: 页面隐藏当navigateTo或底部tab切换时调用。onUnload: 页面卸载当redirectTo或navigateBack的时候调用。

三、常用的刷新

1、如果是用原生的小程序页面

如果是用原生写的,那么刷新就很简单了, 
请参考微信官方文档 
我这边是相当于在对应的page页面,比如是index页面的.json文件中,直接写上个:

 "enablePullDownRefresh": true
  • 1

这样就能实现index页面的下拉刷新了

2、onShow方法刷新页面

根据我们对于生命周期函数的理解,我们可以在页面上使用onShow()方法,达到每次跳转到该页面的时候,都加载一下页面。

类似于:

onShow : function(){    console.log('onShow start');    var that = this;    if (app.globalData.token && app.globalData.token != '') {      console.log('my token is:');      console.log(app.globalData.token);      that.setData({        url: 'https://xxxxxx?token=' + app.globalData.token      })      console.log(1);    } else {        app.tokenCallback = token = {          console.log('tokenCallBack');          if (token != '') {            that.setData({              url: 'https://xxxxxx?token=' + token            })          } else {            console.log('token still null')          }        }      }  }

这部分函数的意思就是每次加载页面,都重新给url赋值。

四、我碰到的问题

1、由于博主用的是web-view加载页面。直接在onLoad()里面给url赋值的。所以每次点击到首页,并不能实现刷新页面的效果。这就很绝望了。

2、onShow()方法是没毛病的,每次都能顺利执行。但是由于小程序自己的缓存机制问题。就算已经重新给url赋值还是没用。

3、最终解决方案:在onShow()方法里面调用onLoad()方法。

没错,就是这么简单粗暴,你不是不能自己刷新吗,那我就让你重新加载一次页面,。

 onShow : function(){    console.log('onShow start');    this.onLoad();    }
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎