微信小程序登陆注册功能的实现代码


Posted in Javascript onDecember 10, 2019

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

老规矩,先看效果图

微信小程序登陆注册功能的实现代码

通过上图可以看到我们主要实现了以下功能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://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png

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

总结

以上所述是小编给大家介绍的微信小程序登陆注册功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
vuex与组件联合使用的方法
May 10 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue excel上传预览和table内容下载到excel文件中
Dec 10 #Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 #Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
vue实现随机验证码功能(完整代码)
Dec 10 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php调用shell的方法
2014/11/05 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
python实现端口转发器的方法
2015/03/13 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
任命书格式
2014/06/05 职场文书
中学音乐课教学反思
2016/02/18 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
七个非常实用的Python工具包总结
2021/06/15 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android