学习Uni-app开发小程序Day26

这一章学习的内容细节较多，主要是分为：首次加载减少网络消耗、获取图片的详细信息、图片的评分和避免重复评分、将图片下载到本地并且获取设备的授权

加载图片减少网络消耗

这里突出这个功能，是根据老师视频上的描述，个人觉得很有必要。这里这个功能是在图片预览的时候，根据前面的设定，我们图片预览，是从缓存中拿到图片，然后在预览界面显示，但是存到缓存的图片是前面全部的图片，这当图片数量过大的时候，哪怕看一张图片就得把全部图片获取到，很耗费网络的，因此这里做了个判断，让打开一张图片，只用获取该图片的前一张后一张，这样每次都是只下载三张，避免全部下载了。

remimage：这是点击图片预览的数组，只记录图片列表的下标、
…new Set():这是将数组进行set，就是去除重复
这里还要考虑一个点，当是第一个和最后一个的时候，前面的后面会出现负数和超限的，因此这里使用冒泡排序法，当是第一个的时候，就让下载最后一个，当是最后一个的时候，就下载第一个

//当前的方法是把重复的代码放在一块，方便维护和减少代码量
	function remimageFn (){
		classInfo.value=classList.value[currentIndex.value];
		queryParams.classid=classInfo.value.classid;
		queryParams.wallId=classInfo.value._id;
		remimage.value.push(
		currentIndex.value<=0?classList.value.length-1:currentIndex.value-1,
		currentIndex.value,
		currentIndex.value>=classList.value.length-1?0:currentIndex.value+1)
		remimage.value=[...new Set(remimage.value)]
	}

这里把代码放在方法中，在使用的地方直接调用方法，我们只用在从上一页获取数据那里和滑动的时候调用该方法，
然后再html中，使用includes就可以了，这里是判断remimage里面是否有当前的下标

获取图片的详细信息

现在点击图片预览后，会得到当前图片的信息，那就根据接口，访问图片的详细信息，这里不写接口了，就写实现代码了

	classInfo.value=classList.value[currentIndex.value];

这是获取当前的图片的信息，在信息中就存在弹出框上需要现实的信息

图片的评分和避免重复评分

在点击评分后，可以给图片评分，一个ip评过后就不允许在修改了，这就需要进行判断了，这里老师给的思路是，在当前评分成功后，就评分添加到原缓存中，给添加一个字段，然后判断是否有这个字段，有这个字段就是已经评分过了，如果没有，那就可以评分了

// 评分弹窗
	const clickScore = () => {
		if(classInfo.value.userScore){
			isScore.value=true
			userScore.value=classInfo.value.userScore
		}
		scorePopup.value.open();
		
	}
	// 关闭评分弹窗
	const clickScoreClose = () => {
		isScore.value=false
		scorePopup.value.close();
	}
// 确认评分
	const submitScore = () => {
		console.log("评分了");
		uni.showLoading({
			title:"加载中...."
		})
		queryParams.userScore=userScore.value;
		postSetupScore();
		
	}
	//上传修改评分的网络访问
	const postSetupScore=async ()=>{
		let res=await apiSetupScore(queryParams)
		// classInfo.value.score=userScore;
		uni.hideLoading();
		if(res.errCode===0){
			uni.showToast({
				title:"评分成功",
				icon:"none"
			})
			//这里的思路是：当评分数据上传成功后，将评分数据作为一个新的字段，加到数据源中，然后把数据源更新到缓存中
			classList.value[currentIndex.value].userScore=userScore.value;
			uni.setStorageSync("storageClassList",classList.value)
			clickScoreClose();
		}
	}

然后在评分弹框中药设定评分组件和确定按钮，成功后不让在点击修改

将图片下载到本地并且获取设备的授权

下载图片，这只支持小程序，所以这里需要使用分类编译的，这里就直接上代码了，在点击下载按钮的时候，直接使用点击事件。

	const clickDownload=()=>{
		// #ifdef H5
			uni.showModal({
				content:"请长按下载图片",
				showCancel: false
			})
		// #endif
	
		// #ifndef H5
		//给个友好的提示
		uni.showLoading({
			title:"加载中...",
			mask: true
		})
		uni.getImageInfo({
			src:classInfo.value.picurl,
			success: (res) => {
				uni.saveImageToPhotosAlbum({
					filePath:res.path,
					success: (res) => {
						
					},
					fail: (err) => {
						if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
							uni.showToast({
								title: '保存失败，请重新点击下载',
								icon: "none"
							})
							return;
						}
						uni.showModal({
							title: '提示',
							content: '需要保存到手机相册授权',
							// showCancel: false,
							// cancelText: '',
							// confirmText: '',
							success: res => {
								if(res.confirm){
									console.log("确认授权了");
									uni.openSetting({
										success: (setting) => {
											if(setting.authSetting[scope.writePhotosAlbum]){
												uni.showToast({
													title:"获取授权成功",
													icon:'none'
												})
											}else{
												uni.showToast({
													title:"获取授权失败",
													icon:'none'
												})
											}
										}
									})
								}
							},
							fail: () => {},
							complete: () => {}
						});
					},
					complete: () => {
						uni.hideLoading()
					}
					
				})
			}
		})
			
		// #endif
	}

以上就是这一章节学习的内容，欢迎指正！！！