微信小程序刷新webview页面问题
一、背景
我这边小程序的首页使用的是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
这样就能实现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();}
我觉得自己这个解决方案应该是有问题的。但是更好的方案一时也想不到。如果大家有更好的解决办法,请私信我。谢谢。
end
微信小程序刷新webview页面问题相关推荐
- 微信小程序更新webview页面的三种方法
场景 在小程序其它页面做了操作,数据发生改变,回到webview页面时需要更新webview里面的数据.由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法. 方法一 最常见 ...
- 微信小程序在web-view页面做分享,并且把分享的参数传递给小程序
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 本demo实现的功能,微信小程序给h5传参,h5给小程序传参 实现代码: <!--index.wxm ...
- 微信小程序刷新当前页面
//刷新当前页面. reloadThisPage() {let currentPages = getCurrentPages()let lastRoute = currentPages[current ...
- 微信小程序与webview H5交互(内嵌H5跳转原生页面)
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
- 微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付 小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付 目前的流程,外链发送订单请求拿到预支付 ...
- 微信小程序 非webview分享给好友及生成分享海报
微信小程序 非webview分享给好友及分享海报 UI展示 点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...
- 微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式 一.背景 众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- webview 个人小程序_微信小程序新增Webview它是什么东西?
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
最新文章
- NIPS 2017上演:Google大神们将带来哪些「精彩」?
- bigdecimal正确用法_BigDecimal用法详解
- PyTorch 官方教程发布,限时免费开放!
- java map clone_Java中HashMap的clone()方法: java.util.HashMap.clone() - Break易站
- C#异常Retry通用类
- 工厂 调用Unity Application Block 通过XML配置文件映射读取数据层方法
- 公司项目NODEJS实践0.1[ ubuntu,nodejs,nginx...]
- 红包小游戏php源码,H5抢红包 小游戏源码
- 5个必看的Docker视频
- 国标:PAAS应用程序管理要求
- 油猴插件(Tampermonkey)安装教程
- Neo4j的安装与配置
- VirtualBox安装虚拟机并为其装系统
- Web前端学习笔记01:Web标准_HTML_lang_字符集_HTML标签的语义化
- scp或者ssh报错“no matching host key type found. Their offer: ssh-rsa,ssh-dss“
- 塔防游戏c语言源代码,用Unity开发一款塔防游戏(一):攻击方设计
- Latex中的狄拉克算符
- 怎么制作有趣的GIF动态表情包
- 买房到底是贷款买房好还是全款买房好?
- python3 爬虫相关学习10:RE 库/ regex /regular experssion正则表达式学习