学习咸虾米壁纸项目

已于 2024-08-02 20:31:17 修改
阅读量750 收藏 6
点赞数 24
文章标签： javascript 开发语言 ecmascript
于 2024-08-02 20:30:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73638967/article/details/140502038
版权

学习咸虾米壁纸项目

灵活使用flex布局

.notice{
		width:690rpx;
		height:80rpx;
		line-height:80rpx;
		background-color: #f9f9f9;
		margin:0 auto;
		border-radius:80rpx;
		display:flex;
		.left{
			width:140rpx;
		}
		.center{
			flex:1
		}
		.right{
			width:70rpx;
		}
	}

在这里插入图片描述
这样实现了不使用定位和浮动，则使.left,.right,.center分成三部分

若想让文字呈现在一行中显示不全用省略号代替，则可使用
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

使两部分两端对齐是
    display:flex;
	justify-content: space-between;
	align-items: center;

在这里插入图片描述
做出如上布局效果图，可采用

.userLayout{
	.userInfo{
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
}

平均分配：

justify-content: space-around

在这里插入图片描述
实现上述壁纸信息和叉号的布局

<view class="popHeader">
				  <view></view>
			  	<view class="title">壁纸信息</view>
			    <view class="close">
				    <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
			    </view>
 </view>

.popHeader{
			display: flex;
            align-items: center;
			justify-content: space-between;
		}

一个组件显示不同的东西

     <view class="select">
			<common-title>
				<template #name>
					每日推荐
				</template>
			</common-title>
		     <view class="content">
				 <scroll-view scroll-x>
					 <view class="box" v-for="item in 8">
					 	<image src="../../common/images/preview_small.webp" mode="aspectFill"></image>
					 </view>
				 </scroll-view>
		     </view>
		</view>
		<view class="theme">
			<common-title>
				<template #name>
					专题精选
				</template>
			</common-title>
		</view>

在这里插入图片描述

网格布局

            display: grid;
			gap:15rpx;
			grid-template-columns: repeat(3,1fr);

想实现自适应网格布局

.layout{
 			width:80%;
			display: grid;
			gap:15rpx;
			grid-template-columns: repeat(auto-fill,min(260px,1fr);
}

B站布局

.layout .box1{
			grid-row:1/3;
			grid-column:1/3;
}

在这里插入图片描述

磨砂半透明效果

backdrop-filter: blur(20rpx);
background-color: rgba(0,0,0,0.2);

最小文字缩放

在页面开发中最小文字是12px，当文字需要再小的时候，则需要利用transform进行缩放

font-size: 22rpx;
transform: scale(0.8);
transform-origin: left top;

条件编译

若想实现在不同平台上展示不同的东西，则使用条件编译，比如想实现在小程序上展现联系客服，在不是小程序的平台上展示呼叫电话

<!-- #ifdef MP -->
<button open-type="contact">联系客服</button>
<!-- #endif -->
<!-- #ifndef MP -->
<button open-type="contact">拨打电话</button>
<!-- #endif -->

宽度随内容自适应

width:fit-content;

利用vue2写弹出层

<uni-popup ref="infoPopup">
		  <view class="infoPopup">
			  <view class="title">壁纸</view>
			  <view class="close">
				   <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
			  </view>
		  </view>
</uni-popup>

<script setup>
import {ref} from 'vue';
const infoPopup = ref(null);
//点击info弹窗
const clickInfo = ()=>{
	infoPopup.value.open();
}
</script>

布局标签

在这里插入图片描述

              .tabs{
						display: flex;
						flex-wrap: wrap;
						.tab{
							border:1px solid $brand-theme-color;
							color:$brand-theme-color;
							font-size:22rpx;
							padding:10rpx 30rpx;
							border-radius:40rpx;
							line-height:1em;
							margin: 0 10rpx 10rpx 0;
						}
					}

跟往常写法不同的是没有写宽高，而是直接进行padding

标题栏布局

在这里插入图片描述

	<view class="layout">
	    <view class="navbar">
	    	 <view class="statusBar" :style="{height:statusBarHeight + 'px'}">
	    	 </view>
			 <view class="titleBar" :style="{height:titleBarHeight + 'px'}">
			 	<view class="title">
			 		标题
			 	</view>
				<view class="search">
					<uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
                    <text class="text">搜索</text>
				</view>
			 </view>
	    </view>
		<view class="fill" :style="{height:statusBarHeight+titleBarHeight+'px'}">
			
		</view>
	</view>

.titleBar{
			display:flex;
			align-items: center;
		}

<script setup>
import {ref} from 'vue'
let SYSTEM_INFO = uni.getSystemInfoSync();
let statusBarHeight = ref(SYSTEM_INFO.statusBarHeight);
//获取胶囊按钮的状态
let {top,height} = uni.getMenuButtonBoundingClientRect();
let titleBarHeight = ref(height + (top - statusBarHeight.value)*2)
</script>

减少加载额外图片所产生的网络消耗

function readImgsFun(){
	readImgs.value.push(
	currentIndex.value<=0 ? classList.value.length-1 : currentIndex.value-1,
	currentIndex.value,
	currentIndex.value>=classList.value.length-1 ? 0 : currentIndex.value+1
	)
	//实现数组去重的快速办法
	readImgs.value = [...new Set(readImgs.value)]
}

下载图片到设备

// 下载保存到设备
	const clickDownload = async () => {
		// #ifdef H5
		uni.showModal({
			content: "请长按保存壁纸",
			showCancel::false
		})
		// #endif

		// #ifndef H5
		try {
			uni.showLoading({
				title: "下载中...",
				mask: true;
			})
			let {
				classid,
				_id: wallId
			} = currentInfo.value
			let res = await apiWriteDownload({
				classid,
				wallId
			})
			if (res.errCode != 0) throw res;
			uni.getImageInfo({
				src: currentInfo.value.picurl,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						// 非网络照片
						filePath: res.path,
						success: (res) => {
							console.log(res)
						},
						fail: err => {
							if (err.errMsg == 'saveImageToPhotoAlbum:fail cancel') {
								uni.showToast({
									title: '保存失败，请重新点击下载',
									icon: "none"
								})
								return;
							}
							uni.showModal({
								title: "提示",
								content: "需要授权保存相册",
								success: res => {
									if (res.confirm) {
										uni.openSetting({
											success: (setting) => {
												console.log(
													setting)
												if (setting
													.authSetting[
														'scope.writePhotosAlbum'
														]) {
													uni.showToast({
														title: "获取授权成功",
														icon: 'none'
													})
												} else {
													uni.showToast({
														title: "获取授权失败",
														icon: 'none'
													})
												}
											}
										})
									}
								}
							})
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				}
			})
		} catch (err) {
			console.log(err);
			uni.hideLoading();
		}
		// #endif
	}

关于setup函数和onLoad

由于setup函数比onLoad函数执行的快，所以在setup函数声明的，而在onLoad函数里面赋值的变量可能会报错
比如以下情况加解决办法，就是在父元素加上v-if，让 变量有值的时候再渲染该元素，就不会报错

<view class="content" v-if="currentInfo">
</view>

const currentInfo = ref(null);
onLoad((e) => {
		currentId.value = e.id;
		currentIndex.value = classList.value.findIndex(item => {
			return item._id == currentId.value
		})
		currentInfo.value = classList.value[currentIndex.value]
		// readImgs.value.push(currentIndex.value-1,currentIndex.value,currentIndex.value+1)
		readImgsFun();
		console.log('currentIndex', currentIndex.value)
	})

给对象数组的每个元素添加属性值

classList.value = res.data.map(item=>{
				return {
					...item,
					picurl: item.smallPicurl.replace("_small.webp", ".jpg")
				}
			})
橙柒1
关注
uniapp项目源码由咸虾米课程，可以用来开源自用共享
07-24
uniapp项目，点个关注后下载谢谢
uniapp项目-咸虾米壁纸商城5.0接口版本
08-14
接口版本，接口随时失效，可以去下载4.0版本，百分之百可以用的
uniapp零基础入门Vue3组合式API语法版本开发咸虾米壁纸项目实战
qq_18798149的博客
07-03 1410
今天给大家带来的是零基础入门uniapp，课程采用的是最新的Vue3组合式API版本，22年发布的uniappVue2版本获得了官方推荐，有很多同学等着我这个vue3版本的那，如果没有学过vue2版本也没关系，因为这门课程知识点更全更详细，项目案例也更完整。
青年帮新闻完整版（咸虾米）笔记
weixin_65474404的博客
02-18 908
作者名称998浏览data() {return {
vue3+uniapp咸虾米壁纸项目实战
weixin_65574176的博客
08-14 344
目前已完成的效果如下所示，因为要自己去申请域名才能实现网络图片下载的api，有需要的朋友可以去咸虾米老师的视频教程了解。目前已完成的效果如下图所示，限于篇幅原因，因为代码真的太多了，写多了自己都头大，懒得搬过来了，请各位移步仓库QAQ。PS:这个项目后期需要给配置域名，得自己去申请。如果使用腾讯云服务的话，应该就不用了。uni-app官网 (dcloud.net.cn)项目实战教程 哔哩哔哩搜索 咸虾米。
uniapp项目-咸虾米壁纸商城5.0【接口版本】
weixin_73355603的博客
08-14 972
💎在开发UniApp项目的过程中，我们面临了许多挑战，包括技术的选型、用户体验的优化、跨平台兼容性的保证等。我们团队凭借对技术的深刻理解和对创新的不懈追求，克服了这些困难，最终实现了项目的成功。💎💎在开发过程中，我深入挖掘需求，采用前沿的技术和设计理念，致力于打造一个既美观又实用的应用。我们相信，优秀的用户体验是产品成功的关键，因此我们不断优化交互设计，提升性能表现。💎💎最后，我想说的是，技术的发展永无止境，我们将继续努力，不断学习，不断进步，用我们的技术和热情，为世界带来更多可能。💎💎。
uniapp项目-咸虾米壁纸商城6.0【发布上线版本】
weixin_73355603的博客
08-15 1016
💎在开发UniApp项目的过程中，我们面临了许多挑战，包括技术的选型、用户体验的优化、跨平台兼容性的保证等。我们团队凭借对技术的深刻理解和对创新的不懈追求，克服了这些困难，最终实现了项目的成功。💎💎在开发过程中，我深入挖掘需求，采用前沿的技术和设计理念，致力于打造一个既美观又实用的应用。我们相信，优秀的用户体验是产品成功的关键，因此我们不断优化交互设计，提升性能表现。💎💎最后，我想说的是，技术的发展永无止境，我们将继续努力，不断学习，不断进步，用我们的技术和热情，为世界带来更多可能。💎💎。
【b站咸虾米】chapter1&2_uniapp介绍与uniapp基础_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握
qq_37581764的博客
01-11 2659
为什么要学习uniapp？1、一套代码可以打包到不同的应用平台；一套代码编到十几个平台，这不是梦想。眼见为实，扫描以下二维码，亲自体验最全面的跨平台效果！比较常用的平台如下2、方便入手，就是使用vue语法写小程序；3、丰富的生态环境，插件众多。开发工具：HBuilderX，uniapp使用HBuilderX，两者都是一家公司的，DCloud公司（国产团队）。主题：绿柔、雅蓝、酷黑。
【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握
qq_37581764的博客
01-18 811
组件的注册全局注册（需要挂载到vue里，适用于页面头部和底部十分公用的部分）和局部注册（写vue文件时局部注册用的较多）局部注册局部注册之前，在需要引用该组件的页面，导入你想使用的组件。页面引入组件方式2 通过uniapp的easycom。
基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目.zip
08-30
基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目.zip基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目.zip基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目.zip基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目...
学习Uni-app开发小程序Day3
qq_34080064的博客
05-06 818
例如上图所示，这里我才测试的时候发现，不能再这个页面添加tabbar的页面，不然跳转是不成功的，原因未知，希望后期可以将这个完善了。好了，今天学习到此为止，还是需要记录，复习几次，方便加深印象。在这里，是可以在这个组件中添加要跳转的页面，4、navigator，路由和页面跳转。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2809
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 852
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 431
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 866
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1290
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 351
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
uniapp 咸虾米
08-27
UniApp 是一个基于 Vue.js 的开发框架，可以用来开发跨平台的移动应用。它使用了一套统一的语法和组件库，可以将代码编译成多个不同平台的原生应用，包括 iOS、Android、H5 等。 咸虾米（XianXiaMi）是 UniApp 官方推荐的一款插件，它提供了一系列常用的功能模块和组件，可以帮助开发者更快速地构建应用。其中包括网络请求、数据缓存、图片预览、地图、分享等功能，以及一些常用的 UI 组件。 使用 UniApp 结合咸虾米插件，开发者可以更高效地开发出优质的跨平台移动应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值