具体效果：

目录

二、账号的注册与登录

步骤一、获取用户信息

步骤二、用户输入账号密码（在注册页面中）

步骤三、将获取到的值放到我们的数据库中（在注册页面中）

步骤四、登录的页面逻辑

步骤五、登录页面的实现

步骤六、切换账号

---

二、账号的注册与登录

---

这个页面要完成的功能

• 1.实现账号的注册、登录

• 2.要获取用户的信息

• 3.让用户输入账号、昵称、密码

实现思路：

先获取用户信息，之后获取用户输入的账号密码。

把获取到的信息添加到数据库中。

步骤一、获取用户信息

在注册页面中，js文件中

  getUserProfile(e) {var that=this;//防止获取不到用户信息// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)that.setData({userInfo: res.userInfo,})}})},

在注册页面中，wxml页面中

<button bindtap="getUserProfile">获取用户信息</button>

说白了就是绑定一个事件，调取api

步骤二、用户输入账号密码（在注册页面中）

在wxml中

<input bindinput="getZh" type="text" placeholder="请输入账号"/>
<input bindinput="getPassword" type="text" placeholder="请输入密码"/>
<input bindinput="getPassword2" type="text" placeholder="再次确认密码"/>

在js中

getZh(e){//获取输入框账号console.log(e.detail.value)this.setData({zh:e.detail.value})},getPassword(e){console.log(e.detail.value)this.setData({ps1:e.detail.value })},getPassword2(e){console.log(e.detail.value)this.setData({ps2:e.detail.value })},

说白了，也就是使用input逐渐获取输入值，之后利用事件绑定函数，将输入值传入到我们的data中。

this.setData({ps2:e.detail.value }

这个过程就是将我们获取到的输入框值，传递到我们的data中。

步骤三、将获取到的值放到我们的数据库中（在注册页面中）

在js页面中：先判断两次密码是否一致，之后再上传我们的具体参数。

zhuche(){// 检验输入密码是否一致if(this.data.ps1!=this.data.ps2){wx.showToast({title: '输入密码不一致',})return}var that=this;console.log(Date.now())wx.cloud.database().collection("chat_users1").add({data:{num:Date.now(),//账号faceImg:that.data.userInfo.avatarUrl,nickName:that.data.userInfo.nickName,admin:that.data.zh,password:that.data.ps1},success(res){console.log(res)}
​})}

注意我们的回调函数success放的位置：与data是并列的。

在wxml页面中：

<image src="{{userInfo.avatarUrl}}"></image>
<view>{{userInfo.nickName}}</view>
​
<button type="primary" bindtap="zhuche">注册</button>
​

使用button组件，绑定了一个点击事件，将我们的值传递到数据库表中。

效果展示：

---

步骤四、登录的页面逻辑

实现思路：

• 简单的来说，就是进入我们的小程序后，在首页，也就是聊天页面，先进行一个判断，之后再进行跳转。

• 判断：

• 如果已经注册过信息，显示登录按钮，跳转登录页面。

• 如果没有注册信息，显示注册和登录按钮，跳转到登录页面。

在my页面中，

在wxml文件中，其中，通过判断页面中是否存在userInfo，来判断是否显示登录按钮

<button type="primary" wx:if="{{!userInfo}}" bindtap="tologin">登录</button>
​
<block  wx:if="{{userInfo}}"><image  src="{{userInfo.faceImg}}"></image><view>账号：{{userInfo.num}}</view><view>昵称:{{userInfo.admin}}</view><view>微信昵称：{{userInfo.nickName}}</view>
</block>
​
<button bindtap="tologin">切换账号</button>

在js页面中，注意获取全局数据，以及每一次展示的时候，都获取我们的data中的数据。

const app=getApp()
Page({data:{},
​
// onShow()，在页面每一次展示的时候，都将我们的全局数据拿到，赋值给我们页面的data
onShow(){this.setData({userInfo:app.globalData. userInfo})console.log(app.globalData. userInfo)
},
​//  功能：点击的时候跳转到注册页面toZH(){wx.navigateTo({url: '/pages/zh/zh',})},//  功能：点击的时候跳转到登录页面tologin(){wx.navigateTo({url: '/pages/login/login',})}​})

具体演示

步骤五、登录页面的实现

实现思路：

• 在首页点击登录按钮，跳转到登录页面。

• 在登录页面获取用户输入的账号密码，使用一个函数，点击登录。

• 函数内容为：根据获取结果，在用户表中查询，查询成功即为登录成功。

在登录页面中，也就是login

wxml文件

<input bindinput="getZh" type="text" placeholder="请输入账号"/>
<input bindinput="getPassword" type="text" placeholder="请输入密码"/>
​
<button bindtap="tologin">登录</button>
​

js文件，其中主要部分是获取输入账号密码，从数据库调取相应数据的函数。

功能：获取输入的账号密码，进行登录。 思路：1.先拿到我们的账号、密码。 2.在数据库中查询，如果查询成功，返回登录成功

Page({
​
​data: {
​},
​
​onLoad(options) {
​},//注册的时候，获取用户信息  getUserProfile(e) {var that=this;//防止获取不到用户信息// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)that.setData({userInfo: res.userInfo,})}})
},
​
​
// 获取注册时输入框的账号密码
getZh(e){//获取输入框账号console.log(e.detail.value)this.setData({zh:e.detail.value})},
getPassword(e){console.log(e.detail.value)this.setData({pas1:e.detail.value })
},
​
​
// 功能：获取输入的账号密码，进行登录。
// 思路：1.先拿到我们的账号、密码。
//       2.在数据库中查询，如果查询成功，返回登录成功
​
tologin(){
// 功能：判断账号密码是否输入if(!this.data.zh){wx.showToast({icon:"none",title: '请输入账号密码',})return}if(!this.data.pas1){wx.showToast({icon:"none",title: '请输入账号密码',})return}var that=this;wx.cloud.database().collection("chat_users1").where({//从数据库中找个人信息admin:that.data.zh,//账号password:that.data.pas1//密码}).get({success(res){console.log(res)//判断数据库表中是否存在我们的查询结果if(res.data.length>0){app.globalData.userInfo=res.data[0]//把个人数据赋值给全局wx.switchTab({//跳转到tabar页面url: '/pages/my/my',success(){wx.showToast({title: '登录成功!',})}})}else{wx.showToast({icon:"none",title: '账号或密码错误',})}}})
​
}
​
})

具体展示：

步骤六、切换账号

实现思路：

• 在我的页面中，写一个页面跳转按钮，绑定一个页面跳转函数。

• 当点击切换账号的按钮时，跳转到我们的index页面中。

• 此页面显示有登录、注册账号按钮

在my页面中

wxml文件

<button bindtap="tologin">切换账号</button>

js文件中

  //  功能：点击的时候跳转到登录页面tologin(){wx.navigateTo({url: '/pages/index/index',})}

具体