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


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.alert 弹出式复选框实现代码
Jun 15 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
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 $_SERVER当前完整url的写法
2009/11/12 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP7.0版本备注
2015/07/23 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
Python 可爱的大小写
2008/09/06 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
NumPy 数组使用大全
2019/04/25 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
高校毕业生自我鉴定
2013/10/27 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
《开国大典》教学反思
2014/04/19 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
学校食品安全责任书
2015/01/29 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis