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

一、背景

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

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

生命周期函数

onLoad: 页面加载
一个页面只会调用一次。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显示
每次打开页面都会调用一次。

onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、常用的刷新

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')
          }
        }
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

四、我碰到的问题

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

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

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

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

 onShow : function(){
    console.log('onShow start');
    this.onLoad();
    }
1
2
3
4

      我觉得自己这个解决方案应该是有问题的。但是更好的方案一时也想不到。如果大家有更好的解决办法，请私信我。谢谢。

end