学习Uni-app开发小程序Day19

今天是要把分类和个人页面完成，这里涉及的技术都有：自定义组件的使用、tabBar的设置、条件编译

tabBar的设置

这个导航其实在前面已经说过了，这里只做一个简单的描述，

在page.json中，设置tabBar，tabBar下是需要设置list的，因为导航是最少两个，最多五个的，这是要放在数组中，使用对象的方式，设置按钮名称、默认图片、选择后的图片、路径地址

例如：

html 复制代码

"tabBar": {
		"color": "#9799a5",
		"selectedColor": "#28B389",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabBar/home.png",
				"selectedIconPath": "static/tabBar/home-h.png",
				"text": "推荐"
			},

自定义组件

我们要达到的效果，是和上一章节相同，有一个模块是一样的，这里只要直接引用就可以了，

html 复制代码

<template>
	<view class="classLayout">
		<view class="classify">
			<theme-item v-for="item in 10"></theme-item>
		</view>
		
	</view>
</template>

<script setup>
	
	
</script>

<style lang="scss" scoped>
.classify{
	padding: 30rpx;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15rpx;
}
</style>

个人页面

这个页面有前面写的，图片呈圆形，列表，列表下的边框，模糊阴影，扩展组件的使用

html 复制代码

<template>
	<view class="userLayout">
		<view class="userInfo">
			<view class="avatar">
				<image src="../../static/xxmLogo.png" mode="aspectFill"></image>
			</view>
			<view class="ip">
				192.168.1.1
			</view>
			<view class="address">
				来自于：陕西
			</view>
		</view>
		<view class="setion">
			<view class="list">
				<view class="row" >
					<view class="letf">
						<uni-icons type="cloud-upload-filled" size="20" color="#28B389"></uni-icons>
						<text class="text">我的下载</text>

					</view>
					<view class="rigth">
						<text class="text">0</text>
						<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
					</view>
				</view>
				
				<view class="row" >
					<view class="letf">
						<uni-icons type="star-filled" size="20" color="#28B389"></uni-icons>
						<text class="text">我的评分</text>
				
					</view>
					<view class="rigth">
						<text class="text">0</text>
						<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
					</view>
				</view>
				
				<view class="row" >
					<view class="letf">
						<uni-icons type="chatboxes-filled" size="20" color="#28B389"></uni-icons>
						<text class="text">联系客服</text>
					</view>
					<view class="rigth">
						<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					
					<!-- #ifndef MP -->
					<button @click="onClick">拨打电话</button>
					<!-- #endif -->
				</view>
				
			</view>
		</view>
		<view class="setion">
			<view class="list">
				<view class="row" >
					<view class="letf">
						<uni-icons type="notification-filled" size="20" color="#28B389"></uni-icons>
						<text class="text">订阅更新</text>
		
					</view>
					<view class="rigth">
						<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
					</view>
				</view>
				
				<view class="row" >
					<view class="letf">
						<uni-icons type="flag-filled" size="20" color="#28B389"></uni-icons>
						<text class="text">常见问题</text>
						
					</view>
					<view class="rigth">
						<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script setup>
	function onClick(){
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
		console.log("ddh");
	}
	
</script>

<style lang="scss" scoped>
.userLayout{
	.userInfo{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 50rpx 0;
		.avatar{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.ip{
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		.address{
			font-size: 28rpx;
			color: #aaa;
			
		}
	}
	.setion{
		width: 690rpx;
		margin: 50rpx 0;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		.list{
			.row{
				display: flex;
				justify-content: space-between;//这是让两端对齐
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				position: relative;
				border-bottom: 1rpx solid #eee;
				&:last-child{
					border-bottom: 0;
				}
				.letf{
					display: flex;
					align-items: center;
					.text{
						padding-left: 20rpx;
						color: #666;
					}
				}
				.rigth{
					display: flex;
					align-items: center;
					.text{
						font-size: 28rpx;
						color: #aaa;
					}
				}
				button{
					position: absolute;
					height: 100rpx;
					left: 0;
					top: 0;
					width: 100%;
					opacity: 0;//指定了一个元素的不透明度
					
				}
			}
		}
	}
}
</style>

这就是个人页面，这里添加一个效果图，大家就明白了

这里有个点需要特别说明下。在这个里面，有个功能是联系客服，这是在组件中，有个button的组件，组件中有个属性，是open-type="contact",这是系统给的直接联系客服的，这个客服是在微信公众平台上添加的人员，

但是在开发的时候，使用的是H5，这个功能是没有办法使用的，只能是在H5的时候，让拨打电话，在api中设备下有拨打电话的属性，

uni.makePhoneCall(OBJECT);根据文档是可以设置电话等属性。那如果让一个小程序可以适配两个平台呢，这里就使用了uni-app的条件编译，使用方法：

这里的意思是：#ifdef MP：只在所有小程序中使用

#ifndef MP：除了小程序，其他都使用这个

以上就是今天的内容，共勉！