微信聊天小程序——（二、账号的注册与登录）

具体效果：

目录

二、账号的注册与登录

步骤一、获取用户信息

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

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

步骤四、登录的页面逻辑

步骤五、登录页面的实现

步骤六、切换账号

---

二、账号的注册与登录

---

这个页面要完成的功能

• 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',
   })
   }

具体