有时候在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;
		}
	});
}


Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐