小程序云开发讲解视频:/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})}})
4,注册成功后,我们在云开发控制台的数据库里就可以看到注册信息了。
二,注册成功后,就要实现登陆功能了
1,登陆页面实现代码 login.wxml我们这里的登陆功能需要用到第一步注册时的用户名和密码,也就是上图数据库里的name和password字段
<!--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__
这样就可以实现小程序的登陆与注册了。