4
收藏
评论

小程序登陆注册功能的简单实现(有图有源码)

小程序登陆注册功能的简单实现(有图有源码)

有了云开发我们不仅可以方便的获取到用户的openid,还可以通过云开发的数据库来存储用户信息,进而实现小程序用户的登陆与注册功能。

本节知识点

  • 1,云开发的使用
  • 2,云函数的使用
  • 3,云数据库的使用
  • 4,用户登陆
  • 5,用户注册

涉及到三个页面

  • 1,登陆页面
  • 2,注册页面
  • 3,登陆成功

下面来看具体的代码实现

一,注册页面实现

  • 1,register.wxml
<!--pages/register/register.wxml-->
<input class='input' placeholder='请输入用户名' bindinput='inputName'></input>
<input class='input' placeholder='请输入密码' bindinput='inputPassword'></input>
<input class='input' placeholder='请输入电话' bindinput='inputPhone'></input>
<input class='input' placeholder='请输入地址' bindinput='inputAddress'></input>
<button class='button' type='primary' bindtap='register'>注册</button>
  • 2,register.js
    需要注意的是我们注册时需要使用到云开发数据库,在使用云开发数据库之前还需要初始化云开发,代码里都有注释
// pages/register/register.js
let app = getApp();
// 获取数据库引用
const db = wx.cloud.database();
const userListDB = db.collection('userlist');

let name = null;
let password = null;
let phone = null;
let address = null;
Page({
 /**
  * 页面的初始数据
  */
 data: {

 },
 //输入用户名
 inputName(evnet) {
  name = evnet.detail.value;
 },
 //输入密码
 inputPassword(evnet) {
  password = evnet.detail.value;
 },
 //输入手机号
 inputPhone(evnet) {
  phone = evnet.detail.value;
 },
 //输入地址
 inputAddress(evnet) {
  address = evnet.detail.value;
 },
 //注册
 register() {
  let that = this;
  if (!app.checkNamePassword(name, password)) {
   return;
  }
  if (!app.checkPhoneAddress(phone, address)) {
   return;
  }
  //查询用户是否已经注册
  userListDB.where({
   _openid: app.globalData.openid // 填入当前用户 openid
  }).get({
   success: function(res) {
    let userInfos = res.data;
    console.log(res.data)
    if (userInfos && userInfos.length > 0) {
     let user = userInfos[0];
     if (user && user.name) {
      wx.showModal({
       title: '提示',
       content: '您已注册,确定要更新账号密码吗?',
       success: function(res) {
        if (res.confirm) {
         console.log('用户点击确定')
         that.saveuserinfo();
        }
       }
      })
     }
    } else {
     that.saveuserinfo();
    }
   }
  })
 },
 saveuserinfo() {
  let that = this;
  userListDB.doc('_openid').set({
   data: {
    name: name,
    password: password,
    phone: phone,
    address: address
   }
  }).then(res => {
   app.showTips('注册成功');
  })
 },
})
  • 3,在app.js里初始化云开发
    下面的prod-8aa9a5就是我们云开发的环境id
//app.js
App({
 onLaunch: function() {
  //云开发初始化
  wx.cloud.init({
    env: 'prod-8aa9a5',
    traceUser: true
   })
 }
})

  • 4,注册成功后,我们在云开发控制台的数据库里就可以看到注册信息了。

二,注册成功后,就要实现登陆功能了

我们这里的登陆功能需要用到第一步注册时的用户名和密码,也就是上图数据库里的name和password字段

  • 1,登陆页面实现代码 login.wxml
<!--pages/login/login.wxml-->
<input class='input' placeholder='请输入用户名' bindinput='inputName'></input>
<input class='input' placeholder='请输入密码' bindinput='inputPassword'></input>
<button class='button' type='primary' bindtap='login'>登陆</button>
<button class='button' type='primary' bindtap='register'>去注册</button>
  • 2,登陆功能实现
// pages/login/login.js
let app = getApp();
// 获取数据库引用
const db = wx.cloud.database();
const userListDB = db.collection('userlist');

let name = null;
let password = null;
Page({

 data: {
 },

 //输入用户名
 inputName(evnet) {
  console.log(evnet.detail.value)
  name = evnet.detail.value;
 },
 //输入密码
 inputPassword(evnet) {
  password = evnet.detail.value;
 },
 //登陆
 login() {
  let that = this;
  if (!app.checkNamePassword(name, password)) {
   return;
  }
  //登陆获取用户信息
  userListDB.where({
   _openid: app.globalData.openid
  }).get({
   success: function(res) {
    let userInfos = res.data;
    console.log(res.data)
    if (userInfos && userInfos.length > 0) {
     let user = userInfos[0];
     if (user.name !== name) {
      app.showTips('用户名不匹配');
     } else if (user.password !== password) {
      app.showTips('密码不匹配');
     } else {
      app.showTips('登陆成功');
      let jsonStr=JSON.stringify(user);
      wx.navigateTo({
       url: '../index/index?jsonStr=' + jsonStr,
      })
     }
    } else {
     app.showTips('用户不存在');
    }
   }
  })
 },
 register() {
  wx.navigateTo({
   url: '../register/register',
  })
 },
})
  • 3,登陆成功后显示用户信息
    电话号码是胡乱填的,想联系我可以__加我微信2501902696__

这样就可以实现小程序的登陆与注册了。

想要完整源码或者有小程序相关的问题,可以加我微信2501902696(备注小程序)

最后一次编辑于  02-21  (未经腾讯允许,不得转载)
复制链接赞 4收藏投诉评论

3 个评论

  • 邱石
    邱石
    02-21

    借助云开发实现简单的登录注册,很容易的

    02-21
    赞同
    回复
  • Zzx
    Zzx
    02-21

    这篇我在csdn看过……不过貌似就是作者原创的

    02-21
    赞同
    回复 1
    • 邱石
      邱石
      03-05

      哈哈,我自己从csdn迁移过来的

      03-05
      回复