上一节给大家将来post提交数据，如果没看的请移步下面
零基础学小程序004—-小程序post请求，提交数据到服务器，小程序下单，小程序用户注册功能
上一节虽然有提到小程序用户注册与登陆功能，但是篇幅有限，就没详细写。今天就来给大家详细讲解下小程序的注册与登陆功能实现。

• 不多说，先看效果图

  

  小程序登陆与注册实现.gif

实现功能点

• 1，输入内容的获取
• 2，注册功能
• 3，登陆功能
  下面就逐个功能点给大家讲解。

先说下登陆和注册的基本原理

登陆和注册，肯定需要我们获取输入的用户名和密码。然后把用户名和密码传到服务器后台，后台把用户名和密码存到数据库里，存入成功就返回注册成功的信息，
以后登陆时就可以直接查询用户是否存在，存在就比对密码，如果密码一致，就返回登陆成功的信息。

一，获取输入内容

先看下布局index.xml

<!--index.wxml--><input class='inputA' placeholder="请输入用户名" bindinput="inputName" /><input class='inputA' placeholder="请输入密码" password='true' bindinput="inputPassword" /><button wx:if="{{!isLogin}}" type='primary' bindtap='register'>注册</button><button wx:if="{{isLogin}}" type='primary' bindtap='login'>登陆</button>

注意点：

• bindinput=”inputName” 中的inputName对应index.js里的inputName（）函数，用来获取输入的用户名
• bindinput=”inputPassword” 中的inputPassword对应index.js里的inputPassword（）函数，用来获取输入的用户名
  下面贴出这两个函数

 //获取用户输入的值a inputName: function(e) {  inputName = e.detail.value; }, //获取用户输入的值b inputPassword: function(e) {  inputPassword = e.detail.value;  console.log("输入的密码：" + inputPassword); },

到这里我们就可以获取到输入的用户名和密码了。

二，对输入的用户名和密码做校验

注意校验用户名不能为空，密码不能为空，密码不能少于6位数。
校验代码如下：

 //检测输入值 checkInput: function() {  if (inputName == "" || inputName == null ||   inputName == undefined) {   this.showErrorToastUtils('请输入用户名');  } else if (inputPassword == "" || inputPassword == null || inputPassword == undefined) {   this.showErrorToastUtils('请输入密码');  } else if (inputPassword.length < 6) {   this.showErrorToastUtils('密码至少要6位');  }  return true; },

当用户名和密码都符合规则时，返回true。说明输入的用户名和密码合法。

三，注册功能的实现

注册就需要我们请求后台注册接口了。

 // 注册 register: function() {  var that = this;  var isrightful = that.checkInput();  if (isrightful) {   wx.request({    url: 'http://localhost:8080/user/testSave',    header: {     "Content-Type": "application/x-www-form-urlencoded"    },    method: "POST",    data: {     name: inputName,     password: inputPassword    },    success: function(res) {     console.log(res)     if (res.statusCode != 200) {      wx.showToast({ //这里提示失败原因       title: res.data.message,       icon: 'loading',       duration: 1500      })     } else {      wx.showToast({       title: '注册成功', //这里成功       icon: 'success',       duration: 1000      });      that.setData({       isLogin: true,      }      )     }    },    fail: function(res) {     console.log(res)     wx.showToast({      title: '请求失败',      icon: 'none',      duration: 1500     })    }   });  } },

注意点：
if (res.statusCode != 200) 这里我们判断后台返回的statusCode，只有statusCode等于200时，才说明我们注册成功，下面时注册成功后后台返回的信息

注册成功.png

四，登陆功能实现

登陆其实和注册都是把用户名和密码传到后台，只不过登陆时，先那用户名去数据库里查，看是否存在这个用户。
如果存在，就去比对我们传的密码和数据库里存的密码是否一样，如果一样就登陆成功，返回登陆信息。

登陆成功.png

下面贴出完整代码index.js

var inputName = "";var inputPassword = "";Page({ /**  * 页面的初始数据  * 初始化两个输入值  */ data: {  isLogin: false }, //获取用户输入的值a inputName: function(e) {  inputName = e.detail.value; }, //获取用户输入的值b inputPassword: function(e) {  inputPassword = e.detail.value;  console.log("输入的密码：" + inputPassword); }, // 注册 register: function() {  var that = this;  var isrightful = that.checkInput();  if (isrightful) {   wx.request({    url: 'http://localhost:8080/user/testSave',    header: {     "Content-Type": "application/x-www-form-urlencoded"    },    method: "POST",    data: {     name: inputName,     password: inputPassword    },    success: function(res) {     console.log(res)     if (res.statusCode != 200) {      wx.showToast({ //这里提示失败原因       title: res.data.message,       icon: 'loading',       duration: 1500      })     } else {      wx.showToast({       title: '注册成功', //这里成功       icon: 'success',       duration: 1000      });      that.setData({       isLogin: true,      }      )     }    },    fail: function(res) {     console.log(res)     wx.showToast({      title: '请求失败',      icon: 'none',      duration: 1500     })    }   });  } }, // 登陆 login: function() {  var that = this;  var isrightful = that.checkInput();  if (isrightful) {   wx.request({    url: 'http://localhost:8080/user/testLogin',    header: {     "Content-Type": "application/x-www-form-urlencoded"    },    method: "POST",    data: {     name: inputName,     password: inputPassword    },    success: function(res) {     console.log(res)     if (res.statusCode != 200) {      wx.showToast({ //这里提示失败原因       title: res.data.message,       icon: 'loading',       duration: 1500      })     } else {      wx.showToast({       title: '登陆成功', //这里成功       icon: 'success',       duration: 1000      });      that.setData({       isLogin: true,      }      )     }    },    fail: function(res) {     console.log(res)     wx.showToast({      title: '请求失败',      icon: 'none',      duration: 1500     })    }   });  } }, //检测输入值 checkInput: function() {  if (inputName == "" || inputName == null ||   inputName == undefined) {   this.showErrorToastUtils('请输入用户名');  } else if (inputPassword == "" || inputPassword == null || inputPassword == undefined) {   this.showErrorToastUtils('请输入密码');  } else if (inputPassword.length < 6) {   this.showErrorToastUtils('密码至少要6位');  }  return true; }, // 错误提示 showErrorToastUtils: function(e) {  wx.showModal({   title: '提示！',   confirmText: '朕知道了',   showCancel: false,   content: e,   success: function(res) {    if (res.confirm) {     console.log('用户点击确定')    }   }  }) },})

到此我们的小程序注册与登陆功能就实现了。
如果有问题可以加我微信2501902696（备注小程序）
想要源码也可以加我微信

扫描识别下面小程序码，学习更多零基础入门小程序的课程。

编程学习.jpg

原著是一个有趣的人,若有侵权,请通知删除