uniapp实战项目 （仿知识星球App) - - 利用computed监听用户操作

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

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

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

---

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

一、今日实战目标

• 监听用户操作
• 完成星球创建页面

---

二、实战步骤

1. 先看设计图

• 强烈建议：做之前一定要先看透设计图，做页面之前得知道这个页面会用到什么组件，有什么功能，怎么做能更方便后期维护等等，这些都应该想清楚了再做。
  
• 首先需要自定义导航栏，如果忘了的可以点击前往自定义导航栏文章
• 然后我们需要做的是监听用户logo的上次和名称的输入，有一个内容用户没有完善的，我们都不应该让用户可以前往下一步

关键代码如下：

// 自定义顶部导航栏
<u-navbar :placeholder="true" leftIconColor="#fff">
			<view class="u-nav-slot both-center" slot="left" @click="back()">
				<view class="cancel">
					取消创建
				</view>
			</view>
			<view class="u-nav-slot n-right" slot="right">
				<view class="next op" v-if="ok" @click="go()">
					下一步
				</view>
				<view class="next opacity" v-else>
					下一步
				</view>
			</view>
</u-navbar>

//监听logo和名称的填充，起了个比较随意的名字“ok”
computed:{
		ok(){
			if(this.name.length != 0 && this.logo.length != 0) return true
		}
},
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="newgroup ">
		<u-navbar :placeholder="true" leftIconColor="#fff">
			<view class="u-nav-slot both-center" slot="left" @click="back()">
				<view class="cancel">
					取消创建
				</view>
			</view>
			<view class="u-nav-slot n-right" slot="right">
				<view class="next op" v-if="ok" @click="go()">
					下一步
				</view>
				<view class="next opacity" v-else>
					下一步
				</view>
			</view>
		</u-navbar>

		<view class="relative both-center col">
			<image v-show="logo_list.length==0" class="upload" src="../../static/bigupload.jpg" mode="aspectFill" @click="uploadlogo()"></image>
			<image v-show="logo_list.length>0" class="upload" :src="logo_list" mode="aspectFill"></image>
			
			
			<input v-model="name" class="input" type="text" placeholder="输入星球名称">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				
				logo: '',
				logo_list: [],
			}
		},
		computed:{
			ok(){
				if(this.name.length != 0 && this.logo.length != 0) return true
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			go(){
				uni.navigateTo({
					url:'../groupSet/groupSet?name='+ this.name +'&logo='+ this.logo
				})
			},
			uploadlogo() {
				let _this = this
				const userinfo = uni.getStorageSync('userInfo')
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0])
						_this.logo_list = tempFilePaths[0]
						uni.uploadFile({
							url: 'https://center.XX.com/center/group/icon', //上传图片
							// 本地测试专用 url:'http://192.168.1.8:4001/group/icon',  
							filePath: tempFilePaths[0],
							name: 'groupicon',
							header:{
								"Authorization": userinfo.token
							},
							success: (res) => {
								let _this = this
								let group =  JSON.parse(res.data) 
								_this.logo = group.imageID

								console.log(_this.logo);
								uni.showToast({
									title:"上传成功",
									icon:"success"
								})
							}
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	.cancel {
		font-family: PingFangSC-Regular;
		font-size: 17px;
		font-weight: normal;
		line-height: 22px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.5);
	}

	.next {
		color: #fff;
		background: #17B99A;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 1px;
		padding: 4px 12px;
		border-radius: 20px;
		
	}
	
	.opacity{
		opacity: .5;
	}

	.relative {
		width: 100%;
		height: auto;
	}

	.upload {
		margin-top: 40px;
		width: 200px;
		height: 200px;
		border-radius: 15px;
		background: #fff;
		box-shadow: 0 15px 30px rgb(56 66 104 / 6%);
	}

	/* input */
	input {
		width:calc(100vw - 60px);
		margin-top: 50px;
		height: 60px;
		border: 2px solid #eeebf1;
		background: #fafafa;
		border-radius: 20px;
		text-align: center;

		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: bold;
		line-height: 20px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.8);
	}
	.n-right{
		/* #ifdef MP-WEIXIN */
			transform: translateX(-100px);
		/* #endif */
	}
</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

---

总结

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

• 温馨提示：

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