为小程序添加自动更新功能
|
admin
2025年1月10日 22:13
本文热度 214
|
《豆子碎片》小程序自动更新功能已经上线。当每次添加新文章时，不需要小程序重新升级就能更新文章列表内容的功能。上篇文章我有说到，每次添加新文章内容时，就需要升级小程序才能更新新添加的内容。小程序的设计如下，在WXML文件中，使用for循环读取文章列表，然后显示每篇文章的标题。当点击标题时，使用Navigate组件跳转到文章详情。而文章列表的数据是在JS文件中data对象中定义的文章数组，数组的每一项，都是一篇文章。当我们添加新的文章内容时，就需要更新JS文件中的文章数组，添加这篇新添加的文章。如果要让用户能够访问到新的文章，就需要升级小程序。否则线上的JS文件不会更新。如果我们把这些文章列表数据存储在Git服务器上，当小程序打开时，从Git服务器下载文章列表数据文件，然后赋值到页面文章列表中。我们通过修改Git服务器上的文章列表数据，那么拉取到的文章列表数据就是新的，这样是不是就可以不升级小程序就可以获取到最新的文章列表了？当我们这样调整之后，发现了一个新的问题，性能问题。首先，新文章不是每天都要发布的，所以小程序每次打开，都要从Git服务器下载文章列表数据文件，就有很多次的无用功，浪费了网络流量。对于Git服务器和小程序而说，这也不是最高效的，其次，因为网络请求是非常耗时的，所以打开小程序会感觉到卡顿，体验不好。我们可以优化一下，使用本地存储来存放下载到的文章列表数据文件。这样当用户每次打开小程序时，就不需要从Git服务器下载了。当用户是第一次打开豆子碎片小程序，由于本地没有文章列表数据，就需要从Git服务器下载，并同时存储到小程序本地。这样优化之后，可使小程序可以快速的被打开，并减少很多无用的网络请求，节省网络流量。 // 下载 data.json 文件 dlArtData: function () { const that = this; // 下载数据动画 wx.showLoading({ title: '数据加载中..', }) wx.downloadFile({ url: 'https://gitee.com/littletow/visit/raw/master/content/data.json', success(res) { // console.log(res) if (res.statusCode === 200) { // 下载成功后，会存储为临时文件，需要使用微信API读取文件内容。 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服务器更新了文章列表数据文件，我（小程序）如何得知这个情况？一个解决方案是，每天拉取一次，不管有没有实际更新，这样可以保证有新的文章加入时，小程序可以获取到新的文章内容。但是这不是最优解。我想到的另一个更好的方案是在Git服务器上存储版本Version文件，每次进入小程序都要查看Git上的Version文件，然后和本地记录的Version进行对比，如果Version有变更，那么重新拉取数据文件。本地就获得了更新的文章列表数据内容。这样做的好处是Version文件远远小于Data.json文件，下载会非常快，节省网络流量，提高小程序的体验。 // 下载 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读取文件内容。 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); // 下载文章数据 that.dlArtData(); } else { const localVersion = Number(artVer); // console.log('调试',localVersion,onlineVersion); // 和线上进行对比，需要升级则重新下载数据 if (localVersion < onlineVersion) { // 下载文章数据 that.dlArtData(); } } }, }) } } }) },
豆子碎片小程序可以使你快速搭建一个内容类小程序，你只需要编写自己擅长的领域知识即可。记得，常回来看看，我会不定期进行更新哟，说不定有新的更新对你有用呢！https://github.com/littletow/visit.githttps://gitee.com/littletow/visit.git
阅读原文：原文链接
该文章在 2025/1/11 18:20:47 编辑过
400 186 1886
