上一节给大家将来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