小程序之注册页面，登录，与头像修改（一）————注册

最新推荐文章于 2024-06-04 17:36:25 发布

ikun_promax

最新推荐文章于 2024-06-04 17:36:25 发布

阅读量1.1k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/m0_74020066/article/details/130044359

版权

下面的三个页面的实现中，有些页面是没有写wxss的，毕竟，每个人对不同的页面设计会有不同的想法，下面主要是讲功能的实现

我们先上一个图吧，讲一讲整体的架构

一、注册页面

首先来说一注册页面

废话不多说，先上代码，然后进行讲解

1.1 代码

register.wxml


用户名：<input class="input" bindinput="getName" placeholder="用户名两位以上，必填"></input>

手机号：<input class="input" bindinput="getphoneNumber" placeholder="手机号可用于登录，必填"></input>
输入您的密码
<input class="input" bindinput="getMiMa" placeholder="由数字、字母两种字符组成，长度在8-15位之间"></input>

<view wx:if="{{showMsg}}">用户名/手机号/密码格式不正确</view>
<view wx:if="{{isregister}}" >该账号已经注册，你无需再次注册</view>
<button bindtap="zhuce" type="primary">立即注册</button>

register.js

Page({
	data: {
		name: '',
		phoneNumber: '',
		mima: '',
		showMsg: false,
		isregister: false
	},
	//获取用户名
	getName(e) {
		// console.log("获取用户名", e.detail.value)
		//赋值
		this.setData({
			name: e.detail.value
		})

	},
	// 获取手机号
	getphoneNumber(e) {
		// console.log("获取账号", e.detail.value)
		//赋值
		this.setData({
			phoneNumber: e.detail.value
		})

	},
	// 获取密码
	getMiMa(e) {
		// console.log("获取密码", e.detail.value)
		//赋值
		this.setData({
			mima: e.detail.value
		})

	},

	//注册
	zhuce() {
		let username = this.data.name
		let phoneNumber = this.data.phoneNumber
		let usermima = this.data.mima
		//  1.判断用户名
		const usernameRegex = /^[\u4E00-\u9FA5]{2,4}$/;
		//  2.判断手机号
		const phoneRegex = /^(13[0-9]|14[0-9]|15[0-35-89]|16[7]|17[0-9]|18[0-9]|19[8,9])\d{8}$/;
		//  3.判断密码
		const pwdRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/;

		if (!usernameRegex.test(username) || !phoneRegex.test(phoneNumber) || !pwdRegex.test(usermima)) {
			this.setData({
				showMsg: true
			})
			return
		} else {
			this.setData({
				showMsg: false
			})
		}

		// 【判断用户是否已经注册（手机号为判断依据）】
		wx.cloud.database().collection('Usersinfo').where({
			phoneNumber: phoneNumber
		}).get().then(res => {
			// console.log(res.data)
			if (res.data[0]) { //匹配成功，证明已经注册
				this.setData({
					isregister: true
				})
				return
			} else { //匹配失败，证明还未注册
				this.setData({
					isregister: false
				})
			}
			//【注册功能的实现】
			wx.cloud.database().collection('Usersinfo').add({
					data: {
						user_name: this.data.name,
						phoneNumber: this.data.phoneNumber,
            user_mima: usermima,
            Tou_xiang:'cloud://cloud1-2gvp18gj9b5e0832.636c-cloud1-2gvp18gj9b5e0832-1317352321/HeadImg/1.png'        
					}
				}).then(res => {
					console.log('注册成功', res)
					wx.showModal({
						title: '注册成功',
						content: '是否去登录？',
						showCancel: 'true',
						cancelText: '取消',
						confirmText: '确定',
						success: function (res) {
							if (res.confirm) { //用户点击确定后的执行的函数
								wx.navigateBack({
									delta: 1
								})
							}
						}
					})
				})
				.catch(err => {
					// console.error('注册失败',err)
					wx.showToast({
						title: '系统繁忙，请稍后再试',
						icon: "error"
					})
				})
		})
	},
	onLoad: function (options) {

	},
})

1.2 讲解

首先，在注册页面的一开始，定义三个输入框：

（当然，这里的密码输入框，可以换成pwd的形式，就是不显示输入的内容，你还可以添加一个再一次输入密码的框之类的，在这里，我没有添加上去。。）

分别用bindinput给这三个框绑定三个触发事件getName、 getphoneNumber、 getMiMa

运行后是这亚子的：

接着，在注册的js页面写这三个事件的函数：

在data里面定义三个数据，后在函数中获取刚才wxml页面手动输入的数据，并将他们进行赋值给定义的三个数据

好，接下来，往下看

（注册wxml）

弄一个button按钮，绑定注册函数，上面的两个view先不用管他们，后面再讲

（注册js）

	//注册
	zhuce() {
		let username = this.data.name
		let phoneNumber = this.data.phoneNumber
		let usermima = this.data.mima
		//  1.判断用户名
		const usernameRegex = /^[\u4E00-\u9FA5]{2,4}$/;
		//  2.判断手机号
		const phoneRegex = /^(13[0-9]|14[0-9]|15[0-35-89]|16[7]|17[0-9]|18[0-9]|19[8,9])\d{8}$/;
		//  3.判断密码
		const pwdRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/;

		if (!usernameRegex.test(username) || !phoneRegex.test(phoneNumber) || !pwdRegex.test(usermima)) {
			this.setData({
				showMsg: true
			})
			return
		} else {
			this.setData({
				showMsg: false
			})
		}

		// 【判断用户是否已经注册（手机号为判断依据）】
		wx.cloud.database().collection('Usersinfo').where({
			phoneNumber: phoneNumber
		}).get().then(res => {
			// console.log(res.data)
			if (res.data[0]) { //匹配成功，证明已经注册
				this.setData({
					isregister: true
				})
				return
			} else { //匹配失败，证明还未注册
				this.setData({
					isregister: false
				})
			}
			//【注册功能的实现】
			wx.cloud.database().collection('Usersinfo').add({
					data: {
						user_name: this.data.name,
						phoneNumber: this.data.phoneNumber,
            user_mima: usermima,
            Tou_xiang:'cloud://cloud1-2gvp18gj9b5e0832.636c-cloud1-2gvp18gj9b5e0832-1317352321/HeadImg/1.png'        
					}
				}).then(res => {
					console.log('注册成功', res)
					wx.showModal({
						title: '注册成功',
						content: '是否去登录？',
						showCancel: 'true',
						cancelText: '取消',
						confirmText: '确定',
						success: function (res) {
							if (res.confirm) { //用户点击确定后的执行的函数
								wx.navigateBack({
									delta: 1
								})
							}
						}
					})
				})
				.catch(err => {
					// console.error('注册失败',err)
					wx.showToast({
						title: '系统繁忙，请稍后再试',
						icon: "error"
					})
				})
		})
	},

代码从上往下的讲解如下：

1. 先定义三个变量，获取到用户名，手机号，密码

2.利用正则表达式对这三个变量进行判断，制定规范，如注册的手机号不对的话，则不允许注册

3.接下开来一个if语句，判断条件是“如果输入数据不符合规范”怎么怎么样

我们在不服和时对在data的数据进行修改showMsg赋值为true，这样就可以解释提及的两个view的用法了，在 wx:if="{{showMsg}}的值为true时候，显示view里面的内容

后面在条件符合的情况下，将其重新赋值为false

4.判断后进行判断用户是否已经注册（判断条件用手机号，这样限制每个手机号只能注册一次，为什么不用姓名呢，是因为考虑到有人重名的原因）

匹配是否已经注册，若已经注册使用return，跳出（结束）这个函数

这里的赋值用法，是和上面第三点类似的

5.匹配到不成功，这说明没有注册，所以我们就可以来是实现注册的功能了

调用云数据库，把第一步的数据写入数据库内，而Tou_xinag：存进去的时事先在云储存中上传的图片的FileID（此图片用于用户的初始化头像）

数据上传成功后，显示信息提示窗口，询问是否去登录，点击“确定”后，使用wx.navigateBack()返回上一级的页面。。