开发小程序时，不可避免地会使用登录和注册功能。通常小程序为我们提供用户授权登录功能，但这只能获取用户的头像和昵称，我们如何实现小程序帐户密码的注册和登录？让我们今天开始学习小程序登录注册功能的开发。

旧规则，首先看效果图

从上图可以看出，我们主要实现了以下功能

让我们看看下面的具体实现方式

首先，解释原理

因为注册我们的帐户和密码是为了将用户设置的帐户和密码存储在数据库中，并且登录名还用于验证数据库中的帐户和密码。所以我们必须有一个数据库。如果您使用传统的数据库来做，那就麻烦了，所以今天我们将使用小程序云开发数据库来做。

二，编写云开发小程序

我已经多次谈论过云开发的知识，不知道什么是云开发的学生可以阅读我的历史文章，或者观看我录制的有关云开发基础知识的视频：“ 5小时零基本介绍小程序 Cloud development“

在编写云开发时，每个人都需要注意一些事项。

三，建立一个数据库（集合）供用户存储用户

在云开发管理后台中，单击数据库，然后单击+号以添加用户集合（数据表），如下所示

四，写注册码

代码实际上非常简单。我将在此处发布相应的代码。

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) } }) }})

五，为登录页面编写代码

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) } }) }})

六，编译显示个人中心的登录和非登录状态，包括注销功能

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 }) } }})

在这里，我们已经完全实现了小程序的登录和注册功能。尽管它相对简单，并且不执行诸如密码加密之类的复杂操作，但是我们的基本登录和注册原理是以这种方式实现的。您必须实现最基本的登录和注册功能，只有在学习了复杂的登录注册，验证码登录等一系列知识之后，您才能这样做。

在本部分中，我记录了一组课程以实现登录和注册功能。有兴趣的学生可以转到底部的列以支持Stone兄弟。