Vue3+uniapp wallpaper项目开发日志

一

1.1 轮播区域设计

重点：

垂直居中样式设计

1
2
3

display: flex;
align-items: center;
justify-content: center;

单行不换行，显示省略号 … 样式设计

1
2
3

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

scss使用父元素名称 & 表示符

swiper {
			width: 750rpx;
			height: 340rpx;
			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}

1.2滑动区域设计

重点：

1.Grid网格布局

1
2
3

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

2.圆角与图像覆盖的解决

1 2	border-radius; overflow:hidden

3.磨砂效果

1 2	background: rgba(250,129,90,0.7); backdrop-filter: blur(20rpx);

4.组件Props传递不同属性分别展示”一般”和”更多内容”的项目设计

<view class="themeItem">
		<navigator url="/pages/classlist/classlist" class="box" v-if="!isMore">
			<image class="pic" src="../../common/images/classify1.jpg" mode="aspectFill"></image>
			<view class="mask">明星美女</view>
			<view class="tab">3天前更新</view>
		</navigator>
		
		<navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">
			<image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
				<view class="text">更多</view>
			</view>			
		</navigator>
	</view>

<script setup>
defineProps({
	isMore:{
		type:Boolean,
		default:false
	}
})
</script>

1.3底部导航tarBar设计

page.json配置好tarBar路径和图像

代码实现

"tabBar": {
		"color": "#9799a5",
		"selectedColor": "#28B389",
		"list": [{
			"text": "推荐",
			"pagePath": "pages/index/index",
			"iconPath": "static/images/tabBar/home.png",
			"selectedIconPath": "static/images/tabBar/home-h.png"
		}, {
			"text": "分类",
			"pagePath": "pages/classify/classify",
			"iconPath": "static/images/tabBar/classify.png",
			"selectedIconPath": "static/images/tabBar/classify-h.png"
		}, {
			"text": "我的",
			"pagePath": "pages/user/user",
			"iconPath": "static/images/tabBar/user.png",
			"selectedIconPath": "static/images/tabBar/user-h.png"
		}]
	},

1.4个人主页布局设计

H5和小程序对拨打电话和联系客服的差异化编译

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

透明度按钮覆盖组件

因为联系客服api只能在按钮使用，所以调整按钮样式，形成透明的遮罩

button {
 	position: absolute;
	top: 0;
	left: 0;
	height: 100rpx;
	width: 100%;
	opacity: 0;
	}

渐变色背景设计

.pageBg{
	background: 
	linear-gradient(to bottom,transparent,#fff 400rpx),
	linear-gradient(to right,#beecd8 20%,#F4E2D8);
	min-height: 80vh;
}

起因:

h5和小程序组件样式的不一致

小程序的组件样式是被icon里面嵌套，所以需要使用deep来穿透到子组件中去改变它的内容

:deep() {
	.uni-icons {
		color: $brand-theme-color !important;
	}
}

Bug：

h5在导入样式文件后提示未引入样式表，小程序没有影响

1	@import "@/common/style/base-style.scss";

下策:在每个页面引入样式表，使h5兼容

1.5创建分类列表完成各界面跳转

跳转tarbar(也就是下方三个栏)需要配置参数

1.6预览界面设计

1.在设计预览图片数量的部件时，需要宽度由内容填充的属性

2.设计从底向上的弹出框时防止底部安全操作栏占据空间需要用到属性safe-area

区别：

1.7头部导航栏布局设计

1.获取系统状态栏高度

我们需要使用api来获取系统信息

1	const SYSTEM_INFO = uni.getSystemInfoSync();

2.抽离公共方法用条件编译对抖音小程序适配

system.js：

在需要用到的组件(这里是custom-nav-bar.vue)中导入即可

条件编译对头条小程序和非头条小程序进行了不同的marginLeft适配，因为头条小程序多一个图标组件

3.深层解构赋值

let {
		leftIcon: {
			left,
			width
		}
	} = tt.getCustomButtonBoundingClientRect();

得到组件按钮的左距离和宽度

二

2.1 调用网络接口在首页展示真实数据并渲染

Promise封装网络请求 ==> request.js

const BASE_URL = 'https://tea.qingnian8.com/api/bizhi';

export function request(config = {}) {
	let {
		url,
		data = {},
		method = "GET",
		header = {}
	} = config

	url = BASE_URL + url
	header['access-key'] = "xzj123456"

	return new Promise((resolve, reject) => {
		uni.request({
			url,
			data,
			method,
			header,
			success: res => {
				//成功情况
				if (res.data.errCode === 0) {
					resolve(res.data)
					//错误情况，400
				} else if (res.data.errCode === 400) {
					uni.showModal({
						title: "错误提示",
						content: res.data.errMsg,
						showCancel: false
					})
					reject(res.data)
				} else {
					uni.showToast({
						title: res.data.errMsg,
						icon: "none"
					})
					reject(res.data)
				}
			},
			fail: err => {
				reject(err)
			}
		})
	})
}

封装api简化请求数据操作 ==> apis.js

//导入封装好的promise网络请求
import {
	request
} from "@/utils/request.js"

//获取轮播图数据
export function apiGetBanner() {
	return request({
		url: "/homeBanner"
	})
}

//获取每日推荐数据
export function apiGetDayRandom() {
	return request({
		url: "/randomWall"
	})
}

//获取公告数据
export function apiGetNotice(data = {}) {
	return request({
		url: "/wallNewsList",
		data
	})
}

使用api获取数据

//获取轮播图数据
const getBanner = async () => {
	let res = await apiGetBanner();
	bannerList.value = res.data;

}
//获取每日推荐数据
const getDayRandom = async () => {
	let res = await apiGetDayRandom();
	randomList.value = res.data
}
//获取公告数据	
const getNotice = async () => {
	let res = await apiGetNotice({
		select: true
	});
	noticeList.value = res.data
}