首先需要进行云环境初始化
💬相关
云环境初始化操作流程可查看前一篇文章《对微信小程序的云开发模式的简单理解》
https://blog.csdn/weixin_42077074/article/details/113482034
随后,要通过云开发模式实现注册或登录功能有两种方法
<form>
表单绑定事件进行处理- 几个
<input>
输入框和<button>
按钮分别绑定事件进行处理
笔者用第一种方法实现了注册功能,第二种方法实现了注册和登录功能
<form>
表单绑定事件进行处理
- WXML 部分
在 WXML 里添加一个<form>
组件并绑定一个事件handlerSubmit
,但需要注意的是,<form>
组件只会提交所有被name
属性修饰的表单域
<form bindsubmit="handlerSubmit">
<!--账号-->
<label class="loginLab">账号</label>
<input class="inputText" placeholder="请输入账号" name="account" />
<!--密码-->
<label class="loginLab">密码</label>
<input class="inputText" password="true" placeholder="请输入密码" name="pwd" />
<!--按钮-->
<button class="regBtn" type="primary" form-type="submit">注册</button>
</form>
- JavaScript部分
表单会将数据放在事件evt
内部
handlerSubmit:function(evt)
{
console.log(evt)
}
通过evt.detail.value
获取用户名和密码,获取数据库引用和集合引用,最后将通过集合将数据存储至数据库
handlerSubmit:function(evt)
{
console.log(evt);
//获取用户名和密码
let account = evt.detail.value.account;
let pwd = evt.detail.value.pwd;
const db = wx.cloud.database();//获取数据库引用
const userCollection = db.collection("user");//获取集合(collection)的引用
//通过集合向数据库添加数据
userCollection.add({
data:{
account:account,
pwd:pwd
}
})
}
添加数据成功的界面如下
几个<input>
输入框和<button>
按钮分别绑定事件进行处理
- WXML 部分
在分别给<input>
和<button>
分别用bindchange
和bindtap
绑定不同的事件getAccount
、getPwd
、reg
、login
<!--账号-->
<label class="loginLab">账号</label>
<input class="inputText" placeholder="请输入账号" name="account" bindchange="getAccount" />
<!--密码-->
<label class="loginLab">密码</label>
<input class="inputText" password="true" placeholder="请输入密码" name="pwd" bindchange="getPwd" />
<!--按钮-->
<button class="regBtn" type="primary" bindtap="reg" form-type="submit">注册</button>
<button class="loginBtn" type="primary" bindtap="login" form-type="submit">登录</button>
- JavaScript部分
给Page
中的data
添加属性account
和pwd
,并设置初始值为null
data: {
account:null,
pwd:null,
}
在事件getAccount
和getPwd
中,通过this.setData
将从<input>
获取的数据存进data
getAccount:function(evt)
{
this.setData({account:evt.detail.value});//将数据存进data
console.log(this.data.account);
},
getPwd:function(evt)
{
this.setData({pwd:evt.detail.value});//将数据存进data
console.log(this.data.pwd);
}
通过遍历数据库对象集合一一比对数据,判断账户是否存在,登陆密码是否正确,并给出消息提示
reg:function(evt)//注册函数
{
const db = wx.cloud.database();
const userCollection = db.collection("user");
let flag = false //表示账户是否存在,false为初始值
userCollection.get({
success: (res) => {
let user = res.data; //获取到的对象数组数据
console.log(user);
for (let i = 0; i < user.length; i++) { //遍历数据库对象集合
if (this.data.account === user[i].account) { //账户已存在
flag = true;
break;
}
}
if (flag === true) { //账户已存在
wx.showToast({
title: '账号已注册!',
icon: 'error',
duration: 2500
})
}
else { //账户未注册
userCollection.add({
data:{
account:this.data.account,
pwd:this.data.pwd
}
})
wx.showToast({ //显示注册成功信息
title: '注册成功!',
icon: 'success',
duration: 2500
})
wx.switchTab({ //注册成功后跳转页面
url: "/index/index"
})
}
}
})
}
login:function(evt)//登录函数
{
const db = wx.cloud.database();
const userCollection = db.collection("user");
let flag = false //表示账户是否存在,false为初始值
userCollection.get({
success: (res) => {
let user = res.data;
console.log(user);
for (let i = 0; i < user.length; i++) { //遍历数据库对象集合
if (this.data.account === user[i].account) { //账户已存在
if (this.data.pwd !== user[i].pwd) { //判断密码正确与否
wx.showToast({ //显示密码错误信息
title: '密码错误!!',
icon: 'error',
duration: 2500
});
i=-1; //密码错误则重头开始遍历数据库对象集合
} else {
wx.showToast({ //显示登录成功信息
title: '登陆成功!!',
icon: 'success',
duration: 2500
})
flag=true;
wx.switchTab({ //登录成功后跳转页面
url: "/index/index",
})
break;
}
}
};
if(flag==false)//遍历完数据后发现没有该账户
{
wx.showToast({
title: '该用户不存在',
icon: 'error',
duration: 2500
})
}
}
})
}
更多推荐
微信小程序通过云开发模式实现注册和登录功能
发布评论