小程序 | 如何清除手机上小程序缓存
原来真的有人,删掉手机里所有的娱乐软件,不管不顾任何东西,没日没夜的学习,就只是为了回到原来那个眼里有光被赋予希望的自己。 你要坚信每一个你想学习的念头,都是未来在向你求救!
懒惰是一个特别奇怪的东西, 它使你以为安逸是休息,是福气,它实际上给你带来了是无聊,是倦怠,是消沉,它剥夺你对前途的希望,隔断你和别人之间的友情,使你的心胸日益狭窄,对人生也越来越怀疑!
一、提出问题:
当小程序发布了新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未动手删除),则会发现小程序中修改后提交的内容并没有生效,这是什么原因造成的呢?
二、分析问题:
- 我们微信小程序开发工具本地是可以正常显示的,这就排除了代码有误的猜想;
- 新用户(第一次访问该小程序的用户)是可以正常访问的,这就排除了配置有误的猜想;
- 那么看来肯定是跟缓存有关的,因为上次访问过小程序有缓存的内容,所以再次访问小程序时新修改的内容并没有生效。
三、解决问题:
那么我们该如何清理缓存呢?
首先想到了两种方式:一种是手动清理;另一种是自动清理。
手动清理:进入微信首页 ,屏幕上下拉拖出小程序,找到自己使用的小程序选中不松手直接拖动到下方提示的 “拖动到此处删除”。
注意:删除掉之后再次点击小程序进入,可以发现此时小程序就是最新的版本了。
如果通过这种 方式还是没有删除的话,那就需要通过清理微信缓存的方式了。
方法如下:
总结:这种方法是可以达到清除缓存的目的,但我们也发现了,你不能保证所有用户都会按照这种方法来清理缓存,这种方式既不方便,也不利于客户的体验。所以,我们需要通过一种方式去自动清理缓存,只有这样才能让客户获得好的体验并做出好的产品。自动清理
首先,我们肯定是去小程序官网查阅相关的api,是否有提供的方法让我们可以很好的解决这个问题。
查看官网找到了一个方法 UpdateManager.onUpdateReady 是用来监听小程序有版本更新事件。客户端主动触发下载(无需开发者触发),下载成功后回调。可见官网地址:UpdateManager.
接着我们把官网提供的代码测试下看看是否可行。
(1) 微信小程序发布新版本时自动提示用户更新的方法
如同所示,小程序发布新的版本后,用户如果之前访问过该小程序,通过已经打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本。用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新。
const updateManager = wx.getUpdateManager()updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log(res.hasUpdate)
})updateManager.onUpdateReady(function () {wx.showModal({title: '更新提示',content: '新版本已经准备好,是否重启应用?',success(res) {if (res.confirm) {// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()}}})
})updateManager.onUpdateFailed(function () {// 新版本下载失败
})
官方提供的demo中,只有最基本的更新提示,并没有做异常处理。而且官方也说了这个功能基础库1.9.90 开始支持,低版本需要做兼容处理,那么就需要对前端代码进行改进了。另一方面,如果当前版本更新有重大调整,一定需要用户更新,那么可以在用户点击取消的回调函数中给出提示,并重新进入版本提示流程。如下图所示,在上边的更新提示中,用户点击取消,则弹出下面提示弹框,用户点击确定,则更新版本,点击取消,则重新调用上边的更新提示。总之,用户只有更新了,才能正常访问小程序。
//app.jsApp({onLaunch: function(options) {this.autoUpdate()},autoUpdate:function(){console.log(new Date())var self=this// 获取小程序更新机制兼容if (wx.canIUse('getUpdateManager')) {const updateManager = wx.getUpdateManager()//1. 检查小程序是否有新版本发布updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调if (res.hasUpdate) {//2. 小程序有新版本,则静默下载新版本,做好更新准备updateManager.onUpdateReady(function () {console.log(new Date())wx.showModal({title: '更新提示',content: '新版本已经准备好,是否重启应用?',success: function (res) {if (res.confirm) {//3. 新的版本已经下载好,调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()} else if (res.cancel) {//如果需要强制更新,则给出二次弹窗,如果不需要,则这里的代码都可以删掉了wx.showModal({title: '温馨提示~',content: '本次版本更新涉及到新的功能添加,旧版本无法正常访问的哦~',success: function (res) { self.autoUpdate()return; //第二次提示后,强制更新 if (res.confirm) {// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()} else if (res.cancel) {//重新回到版本更新提示self.autoUpdate()}}})}}})})updateManager.onUpdateFailed(function () {// 新的版本下载失败wx.showModal({title: '已经有新版本了哟~',content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',})})}})} else {// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示wx.showModal({title: '提示',content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'})}}
})
(2) 更新版本的测试
- 微信开发工具上可以通过 {编译模式} 下的 {下次编译模拟更新} 开关来调试;
- 小程序开发版 / 体验版没有 {版本} 的概念,所以无法在开发版 / 体验版上测试版本的更新情况,必须在部署后的正式版查看;
对于开发者工具,可以通过如下的方式验证测试:
点击编译模式设置下拉列表,然后点击"添加编译模式",在自定义编译条件弹窗界面,点击下次编译时模拟更新,然后点击确定,重新编译就可以了。
需要注意:这种方式模拟更新一次之后就失效了,后边再测试仍需要对这种编译模式进行重新设置才可以。
(3) 更新提示有延迟
我们在开发者工具上测试验证的时候,更新提示弹窗在小程序界面加载出来五六秒之后才弹出来,这是由于小程序在检测到有新版本之后,调用 updateManager.onUpdateReady(function callback) 进行版本更新监听,此时客户端主动触发下载(无需开发者触发),下载成功后回调。也就是说我们上边的更新提示弹窗是在小程序检测到新版本并完成了新版本下载之后弹出的,所以就有了这几秒的时间差。这样的话就很有必要进行再次改善,至少应该在小程序编译时检测到有新版本就应该先给出更新提示,至于新版本下载的准备工作,可以在用户点击确认按钮之后进行,所以对代码进行改造如下:
App({onLaunch: function(options) {this.autoUpdate()},autoUpdate: function() {var self = this// 获取小程序更新机制兼容if (wx.canIUse('getUpdateManager')) {const updateManager = wx.getUpdateManager()//1. 检查小程序是否有新版本发布updateManager.onCheckForUpdate(function(res) {// 请求完新版本信息的回调if (res.hasUpdate) {//检测到新版本,需要更新,给出提示wx.showModal({title: '更新提示',content: '检测到新版本,是否下载新版本并重启小程序?',success: function(res) {if (res.confirm) {//2. 用户确定下载更新小程序,小程序下载及更新静默进行self.downLoadAndUpdate(updateManager)} else if (res.cancel) {//用户点击取消按钮的处理,如果需要强制更新,则给出二次弹窗,如果不需要,则这里的代码都可以删掉了wx.showModal({title: '温馨提示',content: '本次版本更新涉及到新的功能添加,旧版本无法正常访问的哦',showCancel:false,//隐藏取消按钮confirmText:"确定更新",//只保留确定更新按钮success: function(res) {if (res.confirm) {//下载新版本,并重新应用self.downLoadAndUpdate(updateManager)}}})}}})}})} else {// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示wx.showModal({title: '提示',content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'})}},/*** 下载小程序新版本并重启应用*/downLoadAndUpdate: function (updateManager){var self=thiswx.showLoading();//静默下载更新小程序新版本updateManager.onUpdateReady(function () {wx.hideLoading()//新的版本已经下载好,调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()})updateManager.onUpdateFailed(function () {// 新的版本下载失败wx.showModal({title: '已经有新版本了哟~',content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',})})}
})
如代码所示,在检测到小程序有新版本之后,就给出弹窗提示用户下载新版本并重启小程序,用户点击确定按钮后进行小程序新版本的下载和更新。也为了调用方便,将新版本下载及小程序的应用单独封装起来。
这样,小程序加载到弹出版本更新弹窗只需要耗费调用新版本检测API并返回结果的时间(开发者工具测试有2~3秒)。
总结:
- 无论如何,使用小程序版本更新检测功能都是需要一定时间的,如果在检测这一两秒中内用户进行了操作,那么更新提示弹窗则会打断用户的操作。但毕竟不是频繁的更新版本,所以这方面是可以接受的。
- 下载新的版本包的时候建议loading,这样用户就知道是在下载,然后下载完成后自动重启,这样整个流程就顺畅的多。
整理的思维导图如下:
其他注意事项:
(1) 基础库最低版本设置:
微信开发者工具基础库设置:打开项目-工具栏右上角的详情-本地设置-调试基础库选择版本号。选择占比最大的版本号,然后点击推送。
后台基础库设置:打开小程序管理后台-设置-基本设置-基础库最低版本设置,根据现有小程序的访问情况或者小程序官方提供的数据,设置一个比较大众化的基础库版本就好了,这样就能尽量减少API兼容性判断,也能促使用户更新微信版本,以支持小程序正常运行,体验小程序一些高级功能。
(2) 查看基础库版本:
wx.getSystemInfo({success: function(res) {var version = res.SDKVersion;console.log(version);//如果要做版本比较version = version.replace(/\./g, "")if(version<280){ //如果基础库版本低于2.8.0...}},
})
小程序 | 如何清除手机上小程序缓存相关推荐
- 页面文件太小无法完成操作_手机上也能轻松完成文件压缩操作,无需软件,可惜知道的人才10%...
现在很多人都会在手机下载各种图片等等的文件,但是有不少文件的体积是非常大的,而当有些转发上传的平台对文件的大小是有一定的限制的,很多小伙伴也只能打开电脑再进行压缩.但其实想要压缩文件,在手机上我们也是 ...
- python程序-怎么用手机编写Python程序?
有时候,就是不想正襟危坐的坐在电脑前面,想要在手机上轻量级的写点代码. 或者用 iPad 外接一个键盘,侯爵老师一度迷恋这种工作方式,据说可以拥有更加专注的沉浸式编程体验. /> 今天就来介绍 ...
- 树莓派Java程序运行_树莓派上Java程序作为linux服务并开机自动启动
http://www.iigrowing.cn/shu_mei_pai_shang_java_cheng_xu_zuo_wei_linux_fu_wu_bing_kai_ji_zi_dong_qi_d ...
- 怎样清除手机上的微信小程序的缓存?
最佳方法:打开微信 "我"-"通用"-"存储空间"-"清除"缓存!!! 方法一:在开发版或体验版中清缓存 打开开发版或体 ...
- 清除手机微信小程序的缓存
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 步骤: 1.进入开发版小程序或者体验版小程序,点击右上角打开调试 2.重新进入小程序,发现绿色的按钮(vCon ...
- 「喜迎华诞」手把手教你用微信小程序给头像带上小旗帜
文章目录 一.文章前言 二.实现原理 三.开发步骤 四.完整代码 五.国庆临近,祝祖国永远繁荣昌盛! 一.文章前言 2022年是新中国成立73周年,在这个举国欢庆的日子里,让我们给头像上加上小红旗,迎 ...
- grasshopper_如何使用Google的Grasshopper编码应用程序来学习手机上的编码基础知识...
grasshopper 什么是蚱hopper? (What is Grasshopper?) Grasshopper is an interactive education app for learn ...
- 计算机应用程序无响应,电脑上应用程序很容易未响应,怎么办?
回答: 1.开始菜单→运行→输入msconfig回车 在里边的启动栏里把可疑的.dll前面的勾去掉就行了. 2.开始→运行→msconfig→启动→把加载项可疑xx.dll的勾去掉→ 重启电脑一般就可 ...
- 不同主体公众号跳转小程序_公众号和小程序的区别
其实公众号和小程序都是微信的衍生功能,同时微信的产品.但是它们的功能不同.公众号更倾向于引流,主要是通过持续的输出有价值的文案视频图片来吸引大量的粉丝(顾客),并且培育粉丝最终获得收益.(在这里特别提 ...
- 程序员选手机那些事儿
程序员选手机那些事儿 程序员购买手机其实一直都是一件非常为难其的一件事情,特别是开发 APP 的程序员选手机就更是头疼了.其实我个人觉得程序员选手机也是有些程序员不是人系列的感觉,很多认为程序员就必须 ...
最新文章
- java异常处理好习惯
- Tiny210编译和烧写u-boot步骤
- Clipboard.js复制粘贴到剪贴板
- MAC使用homeBrew安装Redis
- 最好用最方便的sqlite管理工具
- spring mvc请求的时候是如何找到正确的Controller
- Java 常用类 -Math
- java pgp加密_GPG(pgp)加解密中文完整教程
- 陶哲轩实分析(上)8.2及习题-Analysis I 8.2
- Web前端--HTML+CSS+JavaScript酷炫游戏动漫网页设计
- php-opencv身份证识别,python opencv实现证件照换底功能
- Redhat7.5升级openssh到8.2p1
- 第一阶段(admin02-day01)磁盘分区,挂载,交换分区
- Web自动化测试02
- 70行代码撸一个桌面自动翻译神器
- 测试学习-119-使用Excel做好看的报告图
- R语言初体验(新手常见问题)
- phpcms mysql设置,PhpCms数据库管理设置教程 如何设置PhpCms数据库
- qq联合登陆失败 错误码100044
- 精美UI强大娱乐功能组合微信小程序源码
热门文章
- 欢迎大家访问吐槽人网 http://www.tucaoman.com/
- 整篇文章翻译软件对接谷歌等各大翻译平台
- 整理了20个最全的设计师学习网站,推荐收藏!
- 解决myeclipse html页面乱码问题
- Springboot+Mybatis查询三级类目demo
- 【产品人卫朋】华为IPD流程体系:集成产品开发框架
- 好书推荐|《CSS新世界》,前端人员必备宝书!
- python 更新pip报错 解决方法大全
- Excel文件内容比对 -- Java Apache Poi
- 内点法外点法matlab代码,分享:惩罚函数法(内点法、外点法)求解约束优化问题最优值...