一文詳解如何清除手機(jī)上小程序緩存
前言
原來(lái)真的有人,刪掉手機(jī)里所有的娛樂(lè)軟件,不管不顧任何東西,沒日沒夜的學(xué)習(xí),就只是為了回到原來(lái)那個(gè)眼里有光被賦予希望的自己。 你要堅(jiān)信每一個(gè)你想學(xué)習(xí)的念頭,都是未來(lái)在向你求救!
懶惰是一個(gè)特別奇怪的東西, 它使你以為安逸是休息,是福氣,它實(shí)際上給你帶來(lái)了是無(wú)聊,是倦怠,是消沉,它剝奪你對(duì)前途的希望,隔斷你和別人之間的友情,使你的心胸日益狹窄,對(duì)人生也越來(lái)越懷疑!
一、提出問(wèn)題:
當(dāng)小程序發(fā)布了新的版本后,用戶如果之前訪問(wèn)過(guò)該小程序,通過(guò)已打開的小程序進(jìn)入(未動(dòng)手刪除),則會(huì)發(fā)現(xiàn)小程序中修改后提交的內(nèi)容并沒有生效,這是什么原因造成的呢?
二、分析問(wèn)題:
- 我們微信小程序開發(fā)工具本地是可以正常顯示的,這就排除了代碼有誤的猜想;
- 新用戶(第一次訪問(wèn)該小程序的用戶)是可以正常訪問(wèn)的,這就排除了配置有誤的猜想;
- 那么看來(lái)肯定是跟緩存有關(guān)的,因?yàn)樯洗卧L問(wèn)過(guò)小程序有緩存的內(nèi)容,所以再次訪問(wèn)小程序時(shí)新修改的內(nèi)容并沒有生效。
三、解決問(wèn)題:
那么我們?cè)撊绾吻謇砭彺婺兀?/p>
首先想到了兩種方式:一種是手動(dòng)清理;另一種是自動(dòng)清理。
1.手動(dòng)清理:進(jìn)入微信首頁(yè) ,屏幕上下拉拖出小程序,找到自己使用的小程序選中不松手直接拖動(dòng)到下方提示的 “拖動(dòng)到此處刪除”。
注意:刪除掉之后再次點(diǎn)擊小程序進(jìn)入,可以發(fā)現(xiàn)此時(shí)小程序就是最新的版本了。
如果通過(guò)這種 方式還是沒有刪除的話,那就需要通過(guò)清理微信緩存的方式了。
方法如下:
總結(jié):這種方法是可以達(dá)到清除緩存的目的,但我們也發(fā)現(xiàn)了,你不能保證所有用戶都會(huì)按照這種方法來(lái)清理緩存,這種方式既不方便,也不利于客戶的體驗(yàn)。所以,我們需要通過(guò)一種方式去自動(dòng)清理緩存,只有這樣才能讓客戶獲得好的體驗(yàn)并做出好的產(chǎn)品。
2.自動(dòng)清理
首先,我們肯定是去小程序官網(wǎng)查閱相關(guān)的api,是否有提供的方法讓我們可以很好的解決這個(gè)問(wèn)題。
查看官網(wǎng)找到了一個(gè)方法 UpdateManager.onUpdateReady 是用來(lái)監(jiān)聽小程序有版本更新事件??蛻舳酥鲃?dòng)觸發(fā)下載(無(wú)需開發(fā)者觸發(fā)),下載成功后回調(diào)。可見官網(wǎng)地址:UpdateManager.
接著我們把官網(wǎng)提供的代碼測(cè)試下看看是否可行。
(1) 微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法
如同所示,小程序發(fā)布新的版本后,用戶如果之前訪問(wèn)過(guò)該小程序,通過(guò)已經(jīng)打開的小程序進(jìn)入(未手動(dòng)刪除),則會(huì)彈出這個(gè)提示,提醒用戶更新新的版本。用戶點(diǎn)擊確定就可以自動(dòng)重啟更新,點(diǎn)擊取消則關(guān)閉彈窗,不再更新。
const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 請(qǐng)求完新版本信息的回調(diào) console.log(res.hasUpdate) }) updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已經(jīng)準(zhǔn)備好,是否重啟應(yīng)用?', success(res) { if (res.confirm) { // 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟 updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新版本下載失敗 })
官方提供的demo中,只有最基本的更新提示,并沒有做異常處理。而且官方也說(shuō)了這個(gè)功能基礎(chǔ)庫(kù)1.9.90 開始支持,低版本需要做兼容處理,那么就需要對(duì)前端代碼進(jìn)行改進(jìn)了。另一方面,如果當(dāng)前版本更新有重大調(diào)整,一定需要用戶更新,那么可以在用戶點(diǎn)擊取消的回調(diào)函數(shù)中給出提示,并重新進(jìn)入版本提示流程。如下圖所示,在上邊的更新提示中,用戶點(diǎn)擊取消,則彈出下面提示彈框,用戶點(diǎn)擊確定,則更新版本,點(diǎn)擊取消,則重新調(diào)用上邊的更新提示??傊脩糁挥懈铝?,才能正常訪問(wèn)小程序。
//app.js App({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate:function(){ console.log(new Date()) var self=this // 獲取小程序更新機(jī)制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 檢查小程序是否有新版本發(fā)布 updateManager.onCheckForUpdate(function (res) { // 請(qǐng)求完新版本信息的回調(diào) if (res.hasUpdate) { //2. 小程序有新版本,則靜默下載新版本,做好更新準(zhǔn)備 updateManager.onUpdateReady(function () { console.log(new Date()) wx.showModal({ title: '更新提示', content: '新版本已經(jīng)準(zhǔn)備好,是否重啟應(yīng)用?', success: function (res) { if (res.confirm) { //3. 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟 updateManager.applyUpdate() } else if (res.cancel) { //如果需要強(qiáng)制更新,則給出二次彈窗,如果不需要,則這里的代碼都可以刪掉了 wx.showModal({ title: '溫馨提示~', content: '本次版本更新涉及到新的功能添加,舊版本無(wú)法正常訪問(wèn)的哦~', success: function (res) { self.autoUpdate() return; //第二次提示后,強(qiáng)制更新 if (res.confirm) { // 新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟 updateManager.applyUpdate() } else if (res.cancel) { //重新回到版本更新提示 self.autoUpdate() } } }) } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下載失敗 wx.showModal({ title: '已經(jīng)有新版本了喲~', content: '新版本已經(jīng)上線啦~,請(qǐng)您刪除當(dāng)前小程序,重新搜索打開喲~', }) }) } }) } else { // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦?,可以這樣子提示 wx.showModal({ title: '提示', content: '當(dāng)前微信版本過(guò)低,無(wú)法使用該功能,請(qǐng)升級(jí)到最新微信版本后重試。' }) } } })
(2) 更新版本的測(cè)試
微信開發(fā)工具上可以通過(guò) {編譯模式} 下的 {下次編譯模擬更新} 開關(guān)來(lái)調(diào)試;小程序開發(fā)版 / 體驗(yàn)版沒有 {版本} 的概念,所以無(wú)法在開發(fā)版 / 體驗(yàn)版上測(cè)試版本的更新情況,必須在部署后的正式版查看;
對(duì)于開發(fā)者工具,可以通過(guò)如下的方式驗(yàn)證測(cè)試:
點(diǎn)擊編譯模式設(shè)置下拉列表,然后點(diǎn)擊"添加編譯模式",在自定義編譯條件彈窗界面,點(diǎn)擊下次編譯時(shí)模擬更新,然后點(diǎn)擊確定,重新編譯就可以了。
需要注意:這種方式模擬更新一次之后就失效了,后邊再測(cè)試仍需要對(duì)這種編譯模式進(jìn)行重新設(shè)置才可以。
(3) 更新提示有延遲
我們?cè)陂_發(fā)者工具上測(cè)試驗(yàn)證的時(shí)候,更新提示彈窗在小程序界面加載出來(lái)五六秒之后才彈出來(lái),這是由于小程序在檢測(cè)到有新版本之后,調(diào)用 updateManager.onUpdateReady(function callback) 進(jìn)行版本更新監(jiān)聽,此時(shí)客戶端主動(dòng)觸發(fā)下載(無(wú)需開發(fā)者觸發(fā)),下載成功后回調(diào)。也就是說(shuō)我們上邊的更新提示彈窗是在小程序檢測(cè)到新版本并完成了新版本下載之后彈出的,所以就有了這幾秒的時(shí)間差。這樣的話就很有必要進(jìn)行再次改善,至少應(yīng)該在小程序編譯時(shí)檢測(cè)到有新版本就應(yīng)該先給出更新提示,至于新版本下載的準(zhǔn)備工作,可以在用戶點(diǎn)擊確認(rèn)按鈕之后進(jìn)行,所以對(duì)代碼進(jìn)行改造如下:
App({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate: function() { var self = this // 獲取小程序更新機(jī)制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 檢查小程序是否有新版本發(fā)布 updateManager.onCheckForUpdate(function(res) { // 請(qǐng)求完新版本信息的回調(diào) if (res.hasUpdate) { //檢測(cè)到新版本,需要更新,給出提示 wx.showModal({ title: '更新提示', content: '檢測(cè)到新版本,是否下載新版本并重啟小程序?', success: function(res) { if (res.confirm) { //2. 用戶確定下載更新小程序,小程序下載及更新靜默進(jìn)行 self.downLoadAndUpdate(updateManager) } else if (res.cancel) { //用戶點(diǎn)擊取消按鈕的處理,如果需要強(qiáng)制更新,則給出二次彈窗,如果不需要,則這里的代碼都可以刪掉了 wx.showModal({ title: '溫馨提示', content: '本次版本更新涉及到新的功能添加,舊版本無(wú)法正常訪問(wèn)的哦', showCancel:false,//隱藏取消按鈕 confirmText:"確定更新",//只保留確定更新按鈕 success: function(res) { if (res.confirm) { //下載新版本,并重新應(yīng)用 self.downLoadAndUpdate(updateManager) } } }) } } }) } }) } else { // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦颍梢赃@樣子提示 wx.showModal({ title: '提示', content: '當(dāng)前微信版本過(guò)低,無(wú)法使用該功能,請(qǐng)升級(jí)到最新微信版本后重試。' }) } }, /** * 下載小程序新版本并重啟應(yīng)用 */ downLoadAndUpdate: function (updateManager){ var self=this wx.showLoading(); //靜默下載更新小程序新版本 updateManager.onUpdateReady(function () { wx.hideLoading() //新的版本已經(jīng)下載好,調(diào)用 applyUpdate 應(yīng)用新版本并重啟 updateManager.applyUpdate() }) updateManager.onUpdateFailed(function () { // 新的版本下載失敗 wx.showModal({ title: '已經(jīng)有新版本了喲~', content: '新版本已經(jīng)上線啦~,請(qǐng)您刪除當(dāng)前小程序,重新搜索打開喲~', }) }) } })
如代碼所示,在檢測(cè)到小程序有新版本之后,就給出彈窗提示用戶下載新版本并重啟小程序,用戶點(diǎn)擊確定按鈕后進(jìn)行小程序新版本的下載和更新。也為了調(diào)用方便,將新版本下載及小程序的應(yīng)用單獨(dú)封裝起來(lái)。
這樣,小程序加載到彈出版本更新彈窗只需要耗費(fèi)調(diào)用新版本檢測(cè)API并返回結(jié)果的時(shí)間(開發(fā)者工具測(cè)試有2~3秒)。
總結(jié):
無(wú)論如何,使用小程序版本更新檢測(cè)功能都是需要一定時(shí)間的,如果在檢測(cè)這一兩秒中內(nèi)用戶進(jìn)行了操作,那么更新提示彈窗則會(huì)打斷用戶的操作。但畢竟不是頻繁的更新版本,所以這方面是可以接受的。下載新的版本包的時(shí)候建議loading,這樣用戶就知道是在下載,然后下載完成后自動(dòng)重啟,這樣整個(gè)流程就順暢的多。
整理的思維導(dǎo)圖如下:
其他注意事項(xiàng):
(1) 基礎(chǔ)庫(kù)最低版本設(shè)置:
微信開發(fā)者工具基礎(chǔ)庫(kù)設(shè)置:打開項(xiàng)目-工具欄右上角的詳情-本地設(shè)置-調(diào)試基礎(chǔ)庫(kù)選擇版本號(hào)。選擇占比最大的版本號(hào),然后點(diǎn)擊推送。
后臺(tái)基礎(chǔ)庫(kù)設(shè)置:打開小程序管理后臺(tái)-設(shè)置-基本設(shè)置-基礎(chǔ)庫(kù)最低版本設(shè)置,根據(jù)現(xiàn)有小程序的訪問(wèn)情況或者小程序官方提供的數(shù)據(jù),設(shè)置一個(gè)比較大眾化的基礎(chǔ)庫(kù)版本就好了,這樣就能盡量減少API兼容性判斷,也能促使用戶更新微信版本,以支持小程序正常運(yùn)行,體驗(yàn)小程序一些高級(jí)功能。
(2) 查看基礎(chǔ)庫(kù)版本:
wx.getSystemInfo({ success: function(res) { var version = res.SDKVersion; console.log(version); //如果要做版本比較 version = version.replace(/\./g, "") if(version<280){ //如果基礎(chǔ)庫(kù)版本低于2.8.0 ... } }, })
總結(jié)
到此這篇關(guān)于如何清除手機(jī)上小程序緩存的文章就介紹到這了,更多相關(guān)清除小程序緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解
這篇文章主要介紹了javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2016-11-11微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)
這篇文章主要是對(duì)JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹
這篇文章主要介紹了js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹,需要的朋友可以參考下2016-09-09JS實(shí)現(xiàn)點(diǎn)擊顏色塊切換指定區(qū)域背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊顏色塊切換指定區(qū)域背景顏色的方法,涉及javascript操作cookie及背景色的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示
這篇文章主要介紹了使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示的相關(guān)資料,需要的朋友可以參考下2017-01-01