您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

小程序登陆注册功能的实现

来源:网络整理 浏览:322次 时间:2020-05-29

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

老规矩,先看效果图

通过上图可以看到我们主要实现了以下功能
  • 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.namelet zhanghao = this.data.zhanghaolet mima = this.data.mimaconsole.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.zhanghaolet mima = this.data.mimaconsole.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://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png)#### 到这里我们就完整的实现了小程序的登陆注册功能了,虽然比较简单,没有做密码加密等一些复杂的操作,但是我们基本的登陆注册原理就是这样实现的,你只有先把最基础的登陆注册功能实现,学习后面复杂的登陆注册,验证码登陆等一系列知识,才会游刃有余。我把这节登陆注册功能的实现录制了一套课程出来,感兴趣的同学可以去看下,支持下石头哥。

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com