uniapp微信小程序中提前缓存文件方法(图片、GIF、视频、语音)
提前缓存文件、文件过大不能实时
·
有时候在uniapp中引入一些大文件时加载速度太慢导致用户体验度不高。
例如集五福的合成特效,为了保持清晰度一个十几M甚至几十M的视频,加载太慢导致用户需要等待很长时间才能出来这时有可以进行如下
一、添加加载中弹框,在视频未加载完成时显示
二、提前将文件缓存到本地,用的时候直接在本地读取(亲测!二三十M的文件不需要加载直接使用)代码如下:
//onLoad里面加入如下代码 我是放在首页了用户进去的时候就先把这些视频缓存好
//等到了要使用视频的页面时已经下好了直接可以用
uni.getStorage({
key: 'videoPath',
success: (res) => {
console.log('有了不用管')
},
fail: () => {
uni.downloadFile({
url: '文件链接',
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
// 下载成功,保存路径到本地存储
uni.setStorage({
key: 'videoPath',
data: downloadResult.tempFilePath,
success: () => {
console.log('视频路径已保存');
// 此时可以播放视频,因为下次打开时可以直接从本地读取
},
fail: () => {
console.log('保存视频路径失败');
}
});
} else {
console.log('下载视频失败,状态码:' + downloadResult.statusCode);
}
},
fail: () => {
console.log('下载视频失败');
}
});
}
});
//在需要使用的页面中引用
//video标签
<video :src="videoSrc"></video>
<buttom @click="loadingVideo" >加载视频</button>
//data 定义 `videoSrc` 参数
data() {
return {
videoSrc: '视频链接', //可以给个默认值避免下载文件出错时没有视频可播放
}
}
//methods中定义加载缓存方法. 注意 方法也可以放到onLoad等生命周期中,依据实际业务放
loadingVideo(){
//加载本地视频并存到参数汇总
uni.getStorage({
key: 'videoPath',
success: (res) => {
// 本地存在缓存的视频路径,可以直接使用
this.videoSrc = res.data;
}
});
}
更多推荐
所有评论(0)