专栏首页小程序云开发入门借助云开发实现小程序的登陆注册功能

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

我们在开发小程序时,难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。

老规矩,先看效果图

通过上图可以看到我们主要实现了以下功能

  • 1,账号密码登陆
  • 2,账号密码注册
  • 3,退出登陆

下面我们就来看下具体实现

一,原理讲解

因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验。所以我们必须要有数据库。如果用传统的数据库来做,比较麻烦,所以我们今天就借助小程序云开发数据库来做。

二,编写一个云开发的小程序

云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》 编写云开发的时候有几点注意的事项给大家说下

  • 1,要先注册小程序获取appid,因为只有appid你才可以使用云开发
  • 2,记得在app.js里初始化云开发环境id,如下图

三,设置用户存储用户的数据库(集合)

在云开发管理后台,点击数据库,然后点击 + 号,添加user集合(数据表),如下图

四,编写注册代码

代码其实很简单,我这里把对应的代码给大家贴出来。

  • 1,注册页面的wxml文件
  • 2,注册页面的js文件
Page({
  data: {
    name: '',
    zhanghao: '',
    mima: ''
  },
  //获取用户名
  getName(event) {
    console.log('获取输入的用户名', event.detail.value)
    this.setData({
      name: event.detail.value
    })
  },
  //获取用户账号
  getZhangHao(event) {
    console.log('获取输入的账号', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })
  },
  // 获取密码
  getMiMa(event) {
    console.log('获取输入的密码', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },

  //注册
  zhuce() {
    let name = this.data.name
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log("点击了注册")
    console.log("name", name)
    console.log("zhanghao", zhanghao)
    console.log("mima", mima)
    //校验用户名
    if (name.length < 2) {
      wx.showToast({
        icon: 'none',
        title: '用户名至少2位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '用户名最多10位',
      })
      return
    }
    //校验账号
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    //校验密码
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '密码至少4位',
      })
      return
    }
    //注册功能的实现
    wx.cloud.database().collection('user').add({
      data: {
        name: name,
        zhanghao: zhanghao,
        mima: mima
      },
      success(res) {
        console.log('注册成功', res)
        wx.showToast({
          title: '注册成功',
        })
        wx.navigateTo({
          url: '../login/login',
        })
      },
      fail(res) {
        console.log('注册失败', res)
      }
    })
  }
})
  • 3,注册页面的wxss(样式)页面很简单

我这只做下简单的样式美化,主要还是来实现功能的。

五,编写登陆页面的代码

  • 1,登陆页面的wxml文件
  • 2,登陆页的js(逻辑编写)页
Page({
  data: {
    zhanghao: '',
    mima: ''
  },
  //获取输入的账号
  getZhanghao(event) {
    //console.log('账号', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })

  },
  //获取输入的密码
  getMima(event) {
    // console.log('密码', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },
  //点击登陆
  login() {
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log('账号', zhanghao, '密码', mima)
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }


    //登陆
    wx.cloud.database().collection('user').where({
      zhanghao: zhanghao
    }).get({
      success(res) {
        console.log("获取数据成功", res)
        let user = res.data[0]
        console.log("user", user)
        if (mima == user.mima) {
          console.log('登陆成功')
          wx.showToast({
            title: '登陆成功',
          })
          // wx.navigateTo({
          //   url: '../home/home?name=' + user.name,
          // })
          wx.navigateTo({
            url: '/pages/me/me',
          })
          //保存用户登陆状态
          wx.setStorageSync('user', user)
        } else {
          console.log('登陆失败')
          wx.showToast({
            icon: 'none',
            title: '账号或密码不正确',
          })
        }
      },
      fail(res) {
        console.log("获取数据失败", res)
      }
    })

  }
})
  • 3,样式比较简单

六,编写个人中心登陆和未登陆状态的展示,含退出登陆功能

  • 1,wxml文件如下
  • 2,js文件如下,退出登陆和保存登陆状态也在里面
Page({
  data: {
    loginOK: false
  },
  //去登陆页
  denglu() {
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  //去注册页
  zhuce() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  onShow() {
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  },

  //退出登陆
  tuichu() {
    wx.setStorageSync('user', null)
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  }

})
  • 3,个人中心登陆成功的状态如下

到这里我们就完整的实现了小程序的登陆注册功能了,虽然比较简单,没有做密码加密等一些复杂的操作,但是我们基本的登陆注册原理就是这样实现的,你只有先把最基础的登陆注册功能实现,学习后面复杂的登陆注册,验证码登陆等一系列知识,才会游刃有余。

我把这节登陆注册功能的实现录制了一套课程出来,感兴趣的同学可以去看下,支持下石头哥。 https://edu.csdn.net/course/play/26948/348188

本文分享自微信公众号 - 编程小石头(bianchengxuexi),作者:编程小石头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》

    编程小石头
  • 小程序里页面跳转的两种方式

    •1,借助navigator组件•2,借助wx.自带方法,在点击的时候做页面跳转 如下图所示的几个wx.方法

    编程小石头
  • 2行代码实现小程序直接分享到微信朋友圈功能

    或许你都想象不到,小程序分享到朋友圈真是太简单了。只需要下面这几行代码,并且这几行代码是小程序页面的默认配置。

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

    云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》

    编程小石头
  • ES6 小结(前端开发js技术进阶提升总结)

    es6中有很多特性,使javascript语法更加丰满,总结一波常用的es6知识点。

    用户1272076
  • 3、backbone中的model实例[验证部分更新1.0.0]

    关于backbone,最基础的一个东西就是model,这个东西就像是后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该是和后端的model有...

    the5fire
  • Clean Code之JavaScript代码示例

    作为一个开发者,如果你关心代码质量,除了需要认真测试代码能否正确执行以外,还要注重代码的整洁(clean code)。一个专业的开发者会从将来自己或则他人方便维...

    Fundebug
  • 大数据技术之_32_大数据面试题_01_Hive 基本面试 + Hive 数据分析面试 + Flume + Kafka 面试

    一、Hive 基本面试1、什么是 metastore2、metastore 安装方式有什么区别3、什么是 Managed Table 跟 External Ta...

    黑泽君
  • JAR项目部署

    nohup java -jar ruoyi.jar --server.port=9090 >/dev/null &

    麋鹿大哥
  • (六)日志生成

    1)代码参数说明 // 参数一:控制发送每条的延时时间,默认是0 Long delay = args.length > 0 ? Long.parseLong...

    wolf

扫码关注云+社区

领取腾讯云代金券