uniapp实战项目 （仿知识星球App) - - 封装组件

实战项目名称：仿知识星球App
技术栈：前端 => uni-app （ 后端：Node.js + Mysql + Apollo + Graphql ）
已实现功能：微信登录，创建星球，内容管理，星球管理
项目git地址：请点击访问

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

• 文章会先按照 ① uni-app端 、 ② Node.js后端 、③ 微信小程序、④ 利用宝塔面板部署项目；先后顺序更新文章。

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 封装项目中可复用组件

---

二、实战步骤

1.根据设计图，先确定哪些内容是用动态数据

• 如上图所示，icon图标、菜单名称和数量是动态的，我们可以通过动态数据去实现各不同的菜单栏,还有就是这个菜单跳转的地址也是动态的

2. 编写组件

代码如下，附注释：

<template>
	<view class="setting-bar" v-if="info">
	// @click="go(info) 是跳转指定页面
		<view class="space-between hor-center" @click="go(info)">
			<view class="row hor-center">
				<image class="icon" :src="info.icon" mode=""></image>
				<view class="menu">
					{{info.title}}
				</view>
			</view>
			<view class="row">
			// 当showNumber为true的时候显示数量，这里默认是1，还没接api，接了之后可以实现动态化
				<view v-if="info.showNumber" class="label">
					1
				</view>
				<image class="arrow" src="../../static/svg/arrowR.svg" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "setting-bar",
		data() {
			return {

			};
		},
		// 接受父组件传来的数据
		props: {
			info: Object
		},
		methods: {
			send() {
				this.$emit("send")
			},
			// 根据父组件传来的数据，跳转指定页面
			go(e) {
				if (e.id === 4) {
				// 直接退出登录
					this.$store.commit("logout")
				}
				uni.navigateTo({
					url: e.page
				})
			}
		}
	}
</script>

<style scoped>
	.setting-bar {
		width: 100%;
		height: 56px;
		background: #fff;
		padding: 16px 20px 16px 28px;
	}
	.setting-bar:active{
		background: #f9f9f9;
	}
	/* .setting-bar:hover{
		background: #f5f5f5;
	} */

	.icon {
		width: 28px;
		height: 28px;
		border-radius: 6px;
		/* background: #F3F7F8; */
	}

	.menu {
		font-family: PingFangSC-Regular;
		font-size: 15px;
		font-weight: normal;
		line-height: 20px;
		margin-left: 10px;
		letter-spacing: 1px;
		color: rgba(0, 0, 0, 0.8);
	}

	.label {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.5);
		margin-right: 8px;
	}

	.arrow {
		width: 20px;
		height: 20px;
	}
</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

3. 在我的页面使用该组件

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// 引用组件
	import Bar from '@/components/setting-bar/setting-bar.vue'
	import LoginPopup from '@/components/login-popup/login-popup.vue'
	export default {
		components: {
			Bar,
			LoginPopup
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				show:false,
				// 先用假数据
				list: [{
					id: 0,
					icon: '../../static/svg/mine.svg',
					title: '个人资料',
					page: '',
					showNumber: false
				}, {
					id: 1,
					icon: '../../static/svg/group.svg',
					title: '我的社群',
					page: '',
					showNumber: true
				}],
				list2: [{
					id: 2,
					icon: '../../static/svg/joined.svg',
					title: '我的参与',
					page: '',
					showNumber: true
				}, {
					id: 3,
					icon: '../../static/svg/set.svg',
					title: '设置',
					page: '',
					showNumber: false
				}, {
					id: 4,
					icon: '../../static/svg/change.svg',
					title: '切换账号',
					page: '../login/login',
					showNumber: false
				}, {
					id: 5,
					icon: '../../static/svg/kefu.svg',
					title: '帮助与客服',
					page: '../../login/login',
					showNumber: false
				}]
			}
		},
		methods: {
			login() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			showlogin(){
				this.show = true
			},
			close(){
				this.show = false
			}
		}
	}
</script>
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

---

总结

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

• 温馨提示：

1. 项目仅用于个人实战，设计图和架构是自己基于知识星球APP进行设计的，算得上是入门级的uni-app，后期会更新一个企业级uniapp项目。
2. 我是在空闲中写写博客，并没有很规范，欢迎在评论区留下你的建议与意见。
3. git项目拷贝下来的代码有不懂的，可以截图私信给我，看到会回复你，希望可以帮助到你了解和开发uniapp。