学习Uni-app开发小程序Day19

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

tabBar的设置

这个导航其实在前面已经说过了，这里只做一个简单的描述，
在page.json中，设置tabBar，tabBar下是需要设置list的，因为导航是最少两个，最多五个的，这是要放在数组中，使用对象的方式，设置按钮名称、默认图片、选择后的图片、路径地址
例如：

"tabBar": {
		"color": "#9799a5",
		"selectedColor": "#28B389",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabBar/home.png",
				"selectedIconPath": "static/tabBar/home-h.png",
				"text": "推荐"
			},
1
2
3
4
5
6
7
8
9
10

自定义组件

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

个人页面

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

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

这里有个点需要特别说明下。在这个里面，有个功能是联系客服，这是在组件中，有个button的组件，组件中有个属性，是open-type=“contact”,这是系统给的直接联系客服的，这个客服是在微信公众平台上添加的人员，
但是在开发的时候，使用的是H5，这个功能是没有办法使用的，只能是在H5的时候，让拨打电话，在api中设备下有拨打电话的属性，
uni.makePhoneCall(OBJECT);根据文档是可以设置电话等属性。那如果让一个小程序可以适配两个平台呢，这里就使用了uni-app的条件编译，使用方法：
这里的意思是：#ifdef MP：只在所有小程序中使用
#ifndef MP：除了小程序，其他都使用这个
以上就是今天的内容，共勉！