小程序
小游戏
企业微信
微信支付
扫描小程序码分享
每次setdata,image都会重新去服务器拿数据,有没有什么机制可以缓存下来,直接缓存。目前图片加载缓慢,大佬们帮忙给个解决方案呗
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我的做法是把请求回来的图片下载到本地,然后用saveFile存储在本地,下次直接根据图片id去本地读取localpath, image控件就加载localpath,
谁有更好到办法也说说。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
/*
步骤:
1.用wx.downloadFile下载到临时文件
2.用wx.saveFile保存临时文件到长久文件
3.用wx.setStorage把长久文件路径和fileurl匹配存储,外部可直接使用fileurl获取到文件路径使用(可多次使用)
*/
function downloadFile(fileid,fileurl, callback){
console.log('downloadFile:'+fileurl);
wx.downloadFile({
url: fileurl,
success: function (res) {
console.log('下载完成');
console.log(res);
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveFile({
tempFilePath: res.tempFilePath,
var savedFilePath = res.savedFilePath;
wx.setStorageSync(fileid, savedFilePath)//保存
callback(fileid,fileurl,savedFilePath);
console.log('下载图片到本地,并返回本地路径:'+savedFilePath);
}
})
}else{
console.log('错误状态:'+res.statusCode);
/**
* 根据文件url去本地获取,如果本地没有先去下载回本地
* callback: 回调本地路径的文件或者图片,图片使用fileurl作为key保存在本地
function getLocalFile(fileid,fileurl,callback){
console.log('fileid:' + fileid + 'fileurl:' + fileurl );
var localfileurl = wx.getStorageSync(fileid);//获取本地是否有缓存
if(localfileurl){ //存在链接
wx.getSavedFileInfo({
filePath: localfileurl,
console.log('存在本地url:'+localfileurl);
callback(fileid,fileurl,localfileurl);
},
fail: function (res) {
wx.removeStorageSync(fileid); //不存在就删除文件
localfileurl = '';
console.log('本地缓存被清理,重新下载:' + localfileurl);
if (!localfileurl) {
downloadFile(fileid,fileurl, callback);
console.log('开始下载');
删除缓存文件
function removeSaveFile(){
wx.getSavedFileList({
if (res.fileList.length > 0) {
wx.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function (res) {
console.log(res)
module.exports.downloadFile = downloadFile;
module.exports.getLocalFile = getLocalFile;
module.exports.removeSaveFile = removeSaveFile;
把上面到代码保存到一个js文件,然后就可以使用, 代码写的不好,欢迎指正
最后没有采用这种方法,而是http直接缓存了
请问如何使用http缓存,image里的src要是不变的话,由于小程序的缓存机制,服务器图片变更了在小程序是无法更新的
加版本控制
downloadFile下载速度没直接在image组件src加地址加载快,而且还有并发限制。最致命的是这接口不经过http缓存而直接去请求服务器,如果这接口请求地址能在http缓存阶段拦截的话省很多事(个人猜测的),最主要还是搞不懂src加载后的图片存在哪
你好,你可以使用缓存进行数据的存取,这是相关的文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
wx.saveFile(OBJECT)
我的做法是把请求回来的图片下载到本地,然后用saveFile存储在本地,下次直接根据图片id去本地读取localpath, image控件就加载localpath,
谁有更好到办法也说说。
/*
步骤:
1.用wx.downloadFile下载到临时文件
2.用wx.saveFile保存临时文件到长久文件
3.用wx.setStorage把长久文件路径和fileurl匹配存储,外部可直接使用fileurl获取到文件路径使用(可多次使用)
*/
function downloadFile(fileid,fileurl, callback){
console.log('downloadFile:'+fileurl);
wx.downloadFile({
url: fileurl,
success: function (res) {
console.log('下载完成');
console.log(res);
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (res) {
var savedFilePath = res.savedFilePath;
wx.setStorageSync(fileid, savedFilePath)//保存
callback(fileid,fileurl,savedFilePath);
console.log('下载图片到本地,并返回本地路径:'+savedFilePath);
}
})
}else{
console.log('错误状态:'+res.statusCode);
}
}
})
}
/**
* 根据文件url去本地获取,如果本地没有先去下载回本地
* callback: 回调本地路径的文件或者图片,图片使用fileurl作为key保存在本地
*/
function getLocalFile(fileid,fileurl,callback){
console.log('fileid:' + fileid + 'fileurl:' + fileurl );
var localfileurl = wx.getStorageSync(fileid);//获取本地是否有缓存
if(localfileurl){ //存在链接
wx.getSavedFileInfo({
filePath: localfileurl,
success: function (res) {
console.log('存在本地url:'+localfileurl);
callback(fileid,fileurl,localfileurl);
},
fail: function (res) {
wx.removeStorageSync(fileid); //不存在就删除文件
localfileurl = '';
console.log('本地缓存被清理,重新下载:' + localfileurl);
if (!localfileurl) {
downloadFile(fileid,fileurl, callback);
}
}
})
}else{
console.log('开始下载');
downloadFile(fileid,fileurl, callback);
}
}
/*
删除缓存文件
*/
function removeSaveFile(){
wx.getSavedFileList({
success: function (res) {
if (res.fileList.length > 0) {
wx.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function (res) {
console.log(res)
}
})
}
}
})
}
module.exports.downloadFile = downloadFile;
module.exports.getLocalFile = getLocalFile;
module.exports.removeSaveFile = removeSaveFile;
把上面到代码保存到一个js文件,然后就可以使用, 代码写的不好,欢迎指正
最后没有采用这种方法,而是http直接缓存了
请问如何使用http缓存,image里的src要是不变的话,由于小程序的缓存机制,服务器图片变更了在小程序是无法更新的
加版本控制
downloadFile下载速度没直接在image组件src加地址加载快,而且还有并发限制。最致命的是这接口不经过http缓存而直接去请求服务器,如果这接口请求地址能在http缓存阶段拦截的话省很多事(个人猜测的),最主要还是搞不懂src加载后的图片存在哪
你好,你可以使用缓存进行数据的存取,这是相关的文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject
最后没有采用这种方法,而是http直接缓存了