首先需要进行云环境初始化
云环境初始化操作流程可查看前一篇文章
/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});//将数据存进dataconsole.log(this.data.account);},getPwd:function(evt){this.setData({pwd:evt.detail.value});//将数据存进dataconsole.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})}}})}
