微信小程序通过云开发模式实现注册和登录功能

首先需要进行云环境初始化

云环境初始化操作流程可查看前一篇文章

https://blog.csdn.net/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})}}})}

微信小程序通过云开发模式实现注册和登录功能相关推荐

对微信小程序的云开发模式的简单理解
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【微信小程序】云开发篇（一）——申请小程序
[微信小程序]云开发篇(一)--申请小程序 [微信小程序]云开发篇(二)--初始化云开发(微信开发者工具) [微信小程序]云开发篇(三)--代码管理 [微信小程序]云开发篇(四)--开通云开发 [微信 ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
微信小程序用云开发实现多人聊天2020/05/21
微信小程序用云开发实现多人聊天室微信小程序用云开发实现多人聊天2020/05/21 效果图片 js wxml wxss 微信小程序用云开发实现多人聊天2020/05/21 用微信云开发实现聊天室无 ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
小程序云开发服务器太慢,为什么微信小程序的云开发响应这么慢？
为什么微信小程序的云开发响应这么慢?Why is the response of WeChat applet cloud development so slow?为什么微信小程序的云开发响应这么慢? ...

微信小程序通过云开发模式实现注册和登录功能

`<form>`表单绑定事件进行处理

几个`<input>`输入框和`<button>`按钮分别绑定事件进行处理

微信小程序通过云开发模式实现注册和登录功能相关推荐

最新文章

热门文章

微信小程序通过云开发模式实现注册和登录功能

<form>表单绑定事件进行处理

几个<input>输入框和<button>按钮分别绑定事件进行处理

微信小程序通过云开发模式实现注册和登录功能相关推荐

最新文章

热门文章

`<form>`表单绑定事件进行处理

几个`<input>`输入框和`<button>`按钮分别绑定事件进行处理