《豆子碎片》小程序自動(dòng)更新功能已經(jīng)上線。當(dāng)每次添加新文章時(shí)，不需要小程序重新升級(jí)就能更新文章列表內(nèi)容的功能。上篇文章我有說(shuō)到，每次添加新文章內(nèi)容時(shí)，就需要升級(jí)小程序才能更新新添加的內(nèi)容。小程序的設(shè)計(jì)如下，在WXML文件中，使用for循環(huán)讀取文章列表，然后顯示每篇文章的標(biāo)題。當(dāng)點(diǎn)擊標(biāo)題時(shí)，使用Navigate組件跳轉(zhuǎn)到文章詳情。而文章列表的數(shù)據(jù)是在JS文件中data對(duì)象中定義的文章數(shù)組，數(shù)組的每一項(xiàng)，都是一篇文章。當(dāng)我們添加新的文章內(nèi)容時(shí)，就需要更新JS文件中的文章數(shù)組，添加這篇新添加的文章。如果要讓用戶能夠訪問(wèn)到新的文章，就需要升級(jí)小程序。否則線上的JS文件不會(huì)更新。如果我們把這些文章列表數(shù)據(jù)存儲(chǔ)在Git服務(wù)器上，當(dāng)小程序打開(kāi)時(shí)，從Git服務(wù)器下載文章列表數(shù)據(jù)文件，然后賦值到頁(yè)面文章列表中。我們通過(guò)修改Git服務(wù)器上的文章列表數(shù)據(jù)，那么拉取到的文章列表數(shù)據(jù)就是新的，這樣是不是就可以不升級(jí)小程序就可以獲取到最新的文章列表了？當(dāng)我們這樣調(diào)整之后，發(fā)現(xiàn)了一個(gè)新的問(wèn)題，性能問(wèn)題。首先，新文章不是每天都要發(fā)布的，所以小程序每次打開(kāi)，都要從Git服務(wù)器下載文章列表數(shù)據(jù)文件，就有很多次的無(wú)用功，浪費(fèi)了網(wǎng)絡(luò)流量。對(duì)于Git服務(wù)器和小程序而說(shuō)，這也不是最高效的，其次，因?yàn)榫W(wǎng)絡(luò)請(qǐng)求是非常耗時(shí)的，所以打開(kāi)小程序會(huì)感覺(jué)到卡頓，體驗(yàn)不好。我們可以優(yōu)化一下，使用本地存儲(chǔ)來(lái)存放下載到的文章列表數(shù)據(jù)文件。這樣當(dāng)用戶每次打開(kāi)小程序時(shí)，就不需要從Git服務(wù)器下載了。當(dāng)用戶是第一次打開(kāi)豆子碎片小程序，由于本地沒(méi)有文章列表數(shù)據(jù)，就需要從Git服務(wù)器下載，并同時(shí)存儲(chǔ)到小程序本地。這樣優(yōu)化之后，可使小程序可以快速的被打開(kāi)，并減少很多無(wú)用的網(wǎng)絡(luò)請(qǐng)求，節(jié)省網(wǎng)絡(luò)流量。 // 下載 data.json 文件 dlArtData: function () { const that = this; // 下載數(shù)據(jù)動(dòng)畫(huà) wx.showLoading({ title: '數(shù)據(jù)加載中..', }) wx.downloadFile({ url: 'https://gitee.com/littletow/visit/raw/master/content/data.json', success(res) { // console.log(res) if (res.statusCode === 200) { // 下載成功后，會(huì)存儲(chǔ)為臨時(shí)文件，需要使用微信API讀取文件內(nèi)容。 const tmpfile = res.tempFilePath; const fs = wx.getFileSystemManager() fs.readFile({ filePath: tmpfile, encoding: 'utf8', success(res) { // 取消動(dòng)畫(huà) wx.hideLoading({ success: (res) => {}, }) // console.log(res.data) // 記錄到本地緩存 wx.setStorageSync('artData', res.data); const dataList = utils.json2ObjArr(res.data); that.globalData.artData = dataList; }, }) } } }) },
這又帶來(lái)了一個(gè)新的問(wèn)題，如果在Git服務(wù)器更新了文章列表數(shù)據(jù)文件，我（小程序）如何得知這個(gè)情況？一個(gè)解決方案是，每天拉取一次，不管有沒(méi)有實(shí)際更新，這樣可以保證有新的文章加入時(shí)，小程序可以獲取到新的文章內(nèi)容。但是這不是最優(yōu)解。我想到的另一個(gè)更好的方案是在Git服務(wù)器上存儲(chǔ)版本Version文件，每次進(jìn)入小程序都要查看Git上的Version文件，然后和本地記錄的Version進(jìn)行對(duì)比，如果Version有變更，那么重新拉取數(shù)據(jù)文件。本地就獲得了更新的文章列表數(shù)據(jù)內(nèi)容。這樣做的好處是Version文件遠(yuǎn)遠(yuǎn)小于Data.json文件，下載會(huì)非?？?，節(jié)省網(wǎng)絡(luò)流量，提高小程序的體驗(yàn)。 // 下載 article version 文件 dlArtVersion: function () { const that = this; // 下載版本號(hào)加載動(dòng)畫(huà) wx.showLoading({ title: '版本檢測(cè)中..', }) wx.downloadFile({ url: 'https://gitee.com/littletow/visit/raw/master/content/VERSION', success(res) { // console.log(res) if (res.statusCode === 200) { // 下載成功后，會(huì)存儲(chǔ)為臨時(shí)文件，需要使用微信API讀取文件內(nèi)容。 const tmpfile = res.tempFilePath; const fs = wx.getFileSystemManager() fs.readFile({ filePath: tmpfile, encoding: 'utf8', success(res) { let now = Date.now(); wx.setStorageSync('chkVerTs', now); // 取消動(dòng)畫(huà) wx.hideLoading({ success: (res) => {}, }) // console.log(res.data) const onlineVersion = Number(res.data); // 查看本地版本號(hào) const artVer = wx.getStorageSync("artVer"); if (utils.isEmpty(artVer)) { // 記錄到本地緩存 wx.setStorageSync('artVer', res.data); // 下載文章數(shù)據(jù) that.dlArtData(); } else { const localVersion = Number(artVer); // console.log('調(diào)試',localVersion,onlineVersion); // 和線上進(jìn)行對(duì)比，需要升級(jí)則重新下載數(shù)據(jù) if (localVersion < onlineVersion) { // 下載文章數(shù)據(jù) that.dlArtData(); } } }, }) } } }) },
豆子碎片小程序可以使你快速搭建一個(gè)內(nèi)容類小程序，你只需要編寫(xiě)自己擅長(zhǎng)的領(lǐng)域知識(shí)即可。記得，常回來(lái)看看，我會(huì)不定期進(jìn)行更新喲，說(shuō)不定有新的更新對(duì)你有用呢！https://github.com/littletow/visit.githttps://gitee.com/littletow/visit.git
閱讀原文：原文鏈接
該文章在 2025/1/11 18:20:47 編輯過(guò)
400 186 1886
