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


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 相关文章推荐
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
vue中activated的用法
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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
js日期时间补零的小例子
2013/03/05 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
react-router中的属性详解
2017/06/01 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python IDLE添加行号显示教程
2020/04/25 Python
Django静态文件加载失败解决方案
2020/08/26 Python
python 绘制国旗的示例
2020/09/27 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
单位介绍信范文
2014/01/18 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
二手房购房意向书范本
2014/04/01 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
Python的三个重要函数详解
2022/01/18 Python
Python matplotlib绘制雷达图
2022/04/13 Python