视频讲解：https://edu.csdn.net/course/play/9531
小程序云开发讲解视频：https://edu.csdn.net/course/detail/9604
有了云开发我们不仅可以方便的获取到用户的openid，还可以通过云开发的数据库来存储用户信息，进而实现小程序用户的登陆与注册功能。
本节知识点
- 1，云开发的使用
- 2，云函数的使用
- 3，云数据库的使用
- 4，用户登陆
- 5，用户注册
涉及到三个页面
-
1，登陆页面
登陆页面 -
2，注册页面
注册页面 -
3，登陆成功
登陆成功
下面来看具体的代码实现
一，注册页面实现
- 1,register.wxml
<!--pages/register/register.wxml--><input class='input' placeholder='请输入用户名' bindinput='inputName'></input><input class='input' placeholder='请输入密码' bindinput='inputPassword'></input><input class='input' placeholder='请输入电话' bindinput='inputPhone'></input><input class='input' placeholder='请输入地址' bindinput='inputAddress'></input><button class='button' type='primary' bindtap='register'>注册</button>- 2,register.js
需要注意的是我们注册时需要使用到云开发数据库，在使用云开发数据库之前还需要初始化云开发，代码里都有注释
// pages/register/register.jslet app = getApp();// 获取数据库引用const db = wx.cloud.database();const userListDB = db.collection('userlist');let name = null;let password = null;let phone = null;let address = null;Page({ /** * 页面的初始数据 */ data: { }, //输入用户名 inputName(evnet) { name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //输入手机号 inputPhone(evnet) { phone = evnet.detail.value; }, //输入地址 inputAddress(evnet) { address = evnet.detail.value; }, //注册 register() { let that = this; if (!app.checkNamePassword(name, password)) { return; } if (!app.checkPhoneAddress(phone, address)) { return; } //查询用户是否已经注册 userListDB.where({ _openid: app.globalData.openid // 填入当前用户 openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user && user.name) { wx.showModal({ title: '提示', content: '您已注册，确定要更新账号密码吗？', success: function(res) { if (res.confirm) { console.log('用户点击确定') that.saveuserinfo(); } } }) } } else { that.saveuserinfo(); } } }) }, saveuserinfo() { let that = this; userListDB.doc('_openid').set({ data: { name: name, password: password, phone: phone, address: address } }).then(res => { app.showTips('注册成功'); }) },})- 3，在app.js里初始化云开发
下面的prod-8aa9a5就是我们云开发的环境id
//app.jsApp({ onLaunch: function() { //云开发初始化 wx.cloud.init({ env: 'prod-8aa9a5', traceUser: true }) }})
云开发id
-
4，注册成功后，我们在云开发控制台的数据库里就可以看到注册信息了。
数据库
二，注册成功后，就要实现登陆功能了
我们这里的登陆功能需要用到第一步注册时的用户名和密码，也就是上图数据库里的name和password字段
- 1，登陆页面实现代码 login.wxml
<!--pages/login/login.wxml--><input class='input' placeholder='请输入用户名' bindinput='inputName'></input><input class='input' placeholder='请输入密码' bindinput='inputPassword'></input><button class='button' type='primary' bindtap='login'>登陆</button><button class='button' type='primary' bindtap='register'>去注册</button>- 2,登陆功能实现
// pages/login/login.jslet app = getApp();// 获取数据库引用const db = wx.cloud.database();const userListDB = db.collection('userlist');let name = null;let password = null;Page({ data: { }, //输入用户名 inputName(evnet) { console.log(evnet.detail.value) name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //登陆 login() { let that = this; if (!app.checkNamePassword(name, password)) { return; } //登陆获取用户信息 userListDB.where({ _openid: app.globalData.openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user.name !== name) { app.showTips('用户名不匹配'); } else if (user.password !== password) { app.showTips('密码不匹配'); } else { app.showTips('登陆成功'); let jsonStr=JSON.stringify(user); wx.navigateTo({ url: '../index/index?jsonStr=' + jsonStr, }) } } else { app.showTips('用户不存在'); } } }) }, register() { wx.navigateTo({ url: '../register/register', }) },})- 3，登陆成功后显示用户信息
电话号码是胡乱填的，想联系我可以加我微信2501902696登陆成功
这样就可以实现小程序的登陆与注册了。
想要完整源码或者有小程序相关的问题，可以加我微信2501902696（备注小程序）
10天零基础入门小程序系列在线视频教程
文章转载于:https://www.jianshu.com/p/2bed402da3d4
原著是一个有趣的人,若有侵权,请通知删除