学习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:除了小程序,其他都使用这个

以上就是今天的内容,共勉!

相关推荐
dsywws8 分钟前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然04029 分钟前
Ethernet 系列(8)-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒15 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
丁总学Java18 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
cuisidong19972 小时前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录2 小时前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车