纵有疾风起
人生不言弃

借助小程序云开发实现小程序的登陆注册功能

视频讲解:https://edu.csdn.net/course/play/9531

小程序云开发讲解视频:https://edu.csdn.net/course/detail/9604

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

本节知识点

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

涉及到三个页面

  • 1,登陆页面

    借助小程序云开发实现小程序的登陆注册功能插图
    登陆页面
  • 2,注册页面

    借助小程序云开发实现小程序的登陆注册功能插图(1)
    注册页面
  • 3,登陆成功

    借助小程序云开发实现小程序的登陆注册功能插图(2)
    登陆成功

下面来看具体的代码实现

一,注册页面实现

  • 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.jslet 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.jsApp({ onLaunch: function() {  //云开发初始化  wx.cloud.init({    env: 'prod-8aa9a5',    traceUser: true   }) }})
借助小程序云开发实现小程序的登陆注册功能插图(3)
云开发id
  • 4,注册成功后,我们在云开发控制台的数据库里就可以看到注册信息了。

    借助小程序云开发实现小程序的登陆注册功能插图(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.jslet 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
    借助小程序云开发实现小程序的登陆注册功能插图(2)
    登陆成功

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

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

10天零基础入门小程序系列在线视频教程

文章转载于:https://www.jianshu.com/p/2bed402da3d4

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

未经允许不得转载:起风网 » 借助小程序云开发实现小程序的登陆注册功能

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活