热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,今天带大家学习小程序登陆注册功能的开发,需要的朋友可以参考下

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

老规矩,先看效果图

通过上图可以看到我们主要实现了以下功能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&#63;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&#63;x-oss-process=image/format,png

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

总结

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


推荐阅读
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败,PC端是可以请求 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文讨论了如何在微信支付宝两套小程序中生成一张二维码,实现支付宝扫码进入支付宝小程序和微信扫码进入微信小程序的对应桌号进行点餐的功能,提供了一些实现方案供参考。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • r2dbc配置多数据源
    R2dbc配置多数据源问题根据官网配置r2dbc连接mysql多数据源所遇到的问题pom配置可以参考官网,不过我这样配置会报错我并没有这样配置将以下内容添加到pom.xml文件d ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了Android中的assets目录和raw目录的共同点和区别,包括获取资源的方法、目录结构的限制以及列出资源的能力。同时,还解释了raw目录中资源文件生成的ID,并说明了这些目录的使用方法。 ... [详细]
  • 2016 linux发行版排行_灵越7590 安装 linux (manjarognome)
    RT之前做了一次灵越7590黑苹果炒作业的文章,希望能够分享给更多不想折腾的人。kawauso:教你如何给灵越7590黑苹果抄作业​zhuanlan.z ... [详细]
  • 【工具篇】抓包中的王牌工具—Fiddler (1环境搭建)
    本文介绍了抓包工具Fiddler的概述,包括其功能、选择原因和安装方法。Fiddler是一款免费且功能强大的抓包工具,可用于网络代理、接口测试、安全测试和WEB调试等。安装配置简单,上手快速,适合新手使用。详细的安装地址为https://www.telerik.com/download/fiddl。 ... [详细]
author-avatar
刻骨铭心2502914183_610
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有