开发第一西安很难找

淩亂°似流年 2022-01-06 06:15 251阅读 0赞

### uni-app前端小白 ###

*  学习使用的第一个月
 *   *  直接上手第一个项目
     *  开始进入知识点回顾咯
     *  首先需要了解结构
     *  先从登录开始
     *  注册

# 学习使用的第一个月 #

你好！ 这是我第一次使用 uni-app开发项目

\#\#原先是做java开发的emmm…

1.  **uni-app** ，前端框架；
2.  官网内容很方便使用 **将代码片显示选择的高亮样式** 进行展示；
3.  还有手机端的页面展示效果，在文档中方便查找
4.  uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台
5.  …

## 直接上手第一个项目 ##

一款游戏平台，没有上市，但是功能基本都实现了 (⊙﹏⊙)

## 开始进入知识点回顾咯 ##

*首先在main.js中加入连接的服务器路径*

> Vue.prototype.baseUrl=“服务器ip”;

## 首先需要了解结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70]

首先了解官方文档，这样看内容才会更加的清晰明了啊

## 先从登录开始 ##

// 登录
    <template>
    	<view class="uni-all">
    		<view class="uni-back">
    			<view class="jian">
    				
    			</view>
    			<view class="image">
    				<image class="tu" src="../../static/login.png"></image>
    			</view>
    			<view class="input-cell">
    				<image src="../../static/icz.png"></image>
    				<text class="uni-text">账号</text>
    				<input v-model="phone" class="account" type="number" placeholder="请 输 入 手 机 号" maxlength="11" style="margin-left: 45upx;">
    			</view>
    
    			<view class="input-cell">
    				<image src="../../static/ics.png"></image>
    				<text class="uni-text">密 码</text>
    				<input v-model="password" class="password" type="password" placeholder="请 输 入 密 码" style="margin-left: 45upx;">
    				<image class="pwd" src="../../static/mmmy.png"></image>
    			</view>
    			<view class="comment" @tap="denglu">
    				登录
    			</view>
    			<view class="kuang">
    				<view class="wei">
    					<view class="zuo" @tap="zhuce">
    						快速注册
    					</view>
    					<view class="you" @tap="nonepwd">
    						忘记密码？
    					</view>
    				</view>
    			</view>
    
    			
    			<view class="provide">
    				<view class="qq" @tap="toqqlogin">
    					<image src="../../static/qqlogin.png"></image>
    				</view>
    				<view class="wx" @tap="towxlogin">
    					<image src="../../static/wxlogin.png"></image>
    				</view>
    			</view>
    
    			<view class="uni-wei">
    				<image src="../../static/bg.png"></image>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import { 
    		mapState,
    		mapMutations
    	} from 'vuex'
    
    	export default { 
    		data() { 
    			return {  //声明全局变量并赋值
    				"title": "登录/注册",
    				phone: '',
    				password: '',
    				positionTop: 0,
    				openid: "",
    				username: "",
    				avatar: '',
    				mobile: ''
    			}
    		},
    		methods: { 
    			initPosition() { 
    				/** * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。 * 反向使用 top 进行定位，可以避免此问题。 */
    				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
    			},
    			toqqlogin() { 
    				//首先获得服务商
    				uni.getProvider({ 
    					service: 'oauth', //授权登录
    					success: function(res) { 
    						// console.log(res.provider)
    						uni.login({ 
    							provider: 'qq',
    							success: function(loginRes) { 
    								console.log(JSON.stringify(loginRes));
    								// 获取用户信息
    								uni.getUserInfo({ 
    									provider: 'qq',
    									success: function(infoRes) { 
    										console.log('用户昵称为：' + infoRes.userInfo.nickName);
    										console.log('openid: ' + infoRes.userInfo.openId)
    										console.log('用户头像路径为：' + infoRes.userInfo.avatarUrl);
    
    										var that = this
    										that.openid = infoRes.userInfo.openId
    										that.username = infoRes.userInfo.nickName
    										that.avatar = infoRes.userInfo.avatarUrl
    
    										//登录接口
    										uni.request({ 
    											url: 'http://47.92.196.173:1111/api/user/qqLogin', //地址---需要修改
    											method: 'POST',
    											data: { 
    												"openid": that.openid,
    												"username": that.username,
    												"avatar": that.avatar,
    												"mobile": that.mobile
    											},
    											header: { 
    												'Content-type': 'application/x-www-form-urlencoded'
    											},
    											success: (ret) => { 
    												console.log("登录" + ret.data.data)
    												if (ret.data.code == 1) { 
    													uni.hideLoading();
    													uni.showToast({ 
    														title: '登录成功',
    														icon: 'none'
    													});
    													uni.switchTab({ 
    														url: '../index1-bt/index1-bt'
    													});
    													uni.setStorage({ 
    														key: 'user_info',
    														data: ret.data.data,
    														success: function() { 
    															that.user_info = ret.data.data
    														}
    													});
    												} else { 
    													uni.showToast({ 
    														title: ret.data.msg,
    														icon: 'none'
    													});
    												}
    											},
    											error: (e) => { 
    												uni.hideLoading();
    												uni.showToast({ 
    													title: ret.data.msg,
    													icon: 'none'
    												});
    											}
    										});
    									},
    								});
    							}
    						});
    					}
    				});
    			},
    			towxlogin() { 
    				//首先获得服务商
    				uni.getProvider({ 
    					service: 'oauth', //授权登录
    					success: function(res) { 
    						// console.log(res.provider)
    						uni.login({ 
    							provider: 'weixin',
    							success: function(loginRes) { 
    								console.log(JSON.stringify(loginRes));
    								// 获取用户信息
    								uni.getUserInfo({ 
    									provider: 'weixin',
    									success: function(infoRes) { 
    										console.log('用户昵称为：' + infoRes.userInfo.nickName);
    										console.log('openid: ' + infoRes.userInfo.openId)
    										console.log('用户头像路径为：' + infoRes.userInfo.avatarUrl);
    
    										var that = this
    										that.openid = infoRes.userInfo.openId
    										uni.request({ 
    											url: 'http://47.92.196.173:11112/api/user/qqLogin', //地址---需要修改
    											method: 'POST',
    											data: { 
    												"openid": that.openid
    											},
    											header: { 
    												'Content-type': 'application/x-www-form-urlencoded'
    											},
    											success: (ret) => { 
    												console.log("登录" + ret.data.data)
    												if (ret.data.code == 1) { 
    													uni.hideLoading();
    													uni.showToast({ 
    														title: '登录成功',
    														icon: 'none'
    													});
    													uni.switchTab({ 
    														url: '../index1-bt/index1-bt'
    													});
    													uni.setStorage({ 
    														key: 'user_info',
    														data: ret.data.data,
    														success: function() { 
    															that.user_info = ret.data.data
    														}
    													});
    												} else if (ret.data.code == 211) { 
    													uni.hideLoading();
    													uni.showToast({ 
    														title: '您还没有注册过账号！将为您跳转注册',
    														icon: 'none'
    													});
    													uni.switchTab({ 
    														url: '../register/register'
    													});
    												} else { 
    													uni.showToast({ 
    														title: ret.data.msg,
    														icon: 'none'
    													});
    												}
    											},
    											error: (e) => { 
    												uni.hideLoading();
    												uni.showToast({ 
    													title: ret.data.msg,
    													icon: 'none'
    												});
    											}
    										});
    									},
    								});
    							}
    						});
    					},
    				});
    			},
    			denglu() {  //登录接口
    				var that = this;
    				if (that.phone == '') { 
    					uni.showToast({ 
    						title: '请输入手机号',
    						icon: 'none'
    					});
    					return false;
    				} else if (that.password == '') { 
    					uni.showToast({ 
    						title: '请输入密码',
    						icon: 'none'
    					});
    					return false;
    				};
    				uni.request({ 
    					url: this.baseUrl + '/api/user/login', //地址---需要修改
    					method: 'POST',
    					data: { 
    						"account": that.phone,
    						"password": that.password,
    					},
    					header: { 
    						'Content-type': 'application/x-www-form-urlencoded'
    					},
    					success: (ret) => { 
    						console.log(ret);
    						if (ret.data.code == 1) {  //判断字段
    							uni.hideLoading();
    							uni.showToast({ 
    								title: '登录成功',
    								icon: 'none'
    							});
    							uni.switchTab({ 
    								url: '../index1-bt/index1-bt'
    							});
    							uni.setStorage({ 
    								key: 'user_info',
    								data: ret.data.data.userinfo,
    								success: function() { 
    									that.user_info = ret.data.data.userinfo
    								}
    							});
    							uni.setStorage({ 
    								key: 'code',
    								data: ret.data.code,
    							});
    						} else { 
    							uni.showToast({ 
    								title: ret.data.msg,
    								icon: 'none'
    							});
    						}
    					},
    					error: (e) => { 
    						uni.hideLoading();
    						uni.showToast({ 
    							title: e.response.data.msg,
    							icon: 'none'
    						});
    					}
    				});
    			},
    			zhuce() { 
    				uni.navigateTo({ 
    					url: '/pages/register/register'
    				});
    			},
    			nonepwd() { 
    				uni.navigateTo({ 
    					url: '../forgetPwd/forgetPwd'
    				});
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.uni-all { 
    		width: 100%;
    		display: flex;
    		flex-direction: column;
    	}
    
    	.uni-back { 
    		width: 100%;
    		height: 80%;
    		background: #f7f7f7;
    	}
    
    	.input-cell { 
    		display: flex;
    		align-items: center;
    		width: 600upx;
    		padding: 20upx;
    		margin-bottom: 20upx;
    		background: #fff;
    		border: 1upx #F5F5F5 solid;
    		margin-left: 50upx;
    		border-radius: 10upx;
    		justify-content: space-between;
    	}
    
    	.input-cell { 
    		image { 
    			width: 40upx;
    			height: 45upx;
    		}
    	}
    
    	.input-cell input { 
    		flex: 1;
    	}
    
    	.image { 
    		width: 100%;
    		margin: 3rem auto;
    		text-align: center;
    		color: #FFFFFF;
    		margin-top: 2rem;
    	}
    
    	.jian { 
    		width: 25upx;
    		height: 30upx;
    		margin-top: 90upx;
    		margin-left: 20upx;
    	}
    
    	.tu { 
    		width: 38%;
    		height: 70upx;
    		margin: 0 auto;
    	}
    
    	.input-cell .pwd { 
    		height: 25upx;
    		width: 45upx;
    	}
    
    	.uni-text { 
    		margin-left: 16upx;
    	}
    
    	.comment { 
    		background: #feda00;
    		height: 90upx;
    		width: 645upx;
    		margin: 0 auto;
    		text-align: center;
    		line-height: 100upx;
    		border-radius: 10upx;
    		box-shadow: #DDDDDD 2px 2px 2px 0px;
    	}
    
    	.kuang { 
    		width: 90%;
    		margin-left: 38upx;
    	}
    
    	.wei { 
    		height: 100upx;
    		align-items: center;
    		display: flex;
    		justify-content: space-between;
    	}
    
    	.wei .zuo { 
    		text-align: left;
    		color: #1971d2;
    	}
    
    	.wei .you { 
    		text-align: right;
    	}
    
    	.provide { 
    		height: 8rem;
    		display: flex;
    		justify-content: center;
    	}
    
    
    	.qq image { 
    		width: 70upx;
    		height: 70upx;
    		padding: 30upx;
    	}
    
    	.wx image { 
    		width: 80upx;
    		height: 80upx;
    		padding: 30upx;
    	}
    
    	.uni-wei { 
    		width: 100%;
    		height: 5rem;
    	}
    
    	.uni-wei image { 
    		width: 100%;
    		height: 360upx;
    	}
    </style>

当时第三方的登录，客户没有搞定appid,目前可能会出现调试错误  
由于第一次排版，看上去比较乱，，，

## 注册 ##

这里仅仅展示发送短信验证

<input v-model="captcha" class="text" type="text" placeholder="请 输 入 验 证 码">
    			<view class="btn" v-if="stop==true" @tap="getcaptcha">获取验证码</view>
    			<view style="margin-left: 1.5rem;" v-if="stop==false">{ { countdown}}秒</view>

发送短信验证的请求

uni.request({ 
    					url: this.baseUrl + '/api/sms/send', //发送短信验证
    					method: 'POST',
    					data: { 
    						"mobile": that.mobile
    					},
    					header: { 
    						'Content-type': 'application/x-www-form-urlencoded'
    					},
    					success: (ret) => { 
    						console.log(ret, '发送注册')
    						if (ret.data.code == 1) {  //判断字段
    							uni.hideLoading();
    							uni.showToast({ 
    								title: '发送成功',
    								icon: 'none'
    							});
    						} else { 
    							uni.showToast({ 
    								title: ret.data.msg,
    								icon: 'none'
    							})
    						}
    					},
    					error: (e) => { 
    						uni.hideLoading();
    					}
    				});
    				that.stop = false;
    				that.timer = setInterval(() => { 
    					that.countdown--
    					if (that.countdown <= 0) { 
    						clearInterval(that.timer)
    						that.countdown = 0
    						that.stop = true
    					}
    				}, 1000);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70]: /images/20211227/eefbd494c925473b9c397992983b950e.png