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


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 相关文章推荐
购物车选中得到价格实现示例
Jan 26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
react+redux仿微信聊天界面
Jun 21 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 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数据库配置文件一般做法分享
2012/07/07 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
清空上传控件input file的值
2010/07/03 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python读取xlsx的方法
2018/12/25 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
先进事迹报告会感言
2014/01/24 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
毕业论文致谢范文
2015/05/14 职场文书
员工年度工作总结2015
2015/05/18 职场文书
培训计划通知
2015/07/15 职场文书