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