微信小程序 基础 - 18 （微信登录业务：登录、注册）

微信登录

1、点击 "登录" 文本, 调用微信开放的API接口，获取当前用户的微信公开信息：昵称/头像等.

2、更新界面.

        注意: 虽然wx.getUserProfile方法可以获取用户微信的基本信息用户显示, 但是一个完整的登录业务还远远没有写完. 因为不仅需要显示信息, 还需要将该用户的数据存入自己家的数据库, 而微信登录只是一个避免用户输入账号密码的手段而已. 一定要将该用户存入自己家数据库, 这样才可以更好的维护会员信息, 而不依赖于微信官方服务器.

一个完整的登录还需要再设计以下流程:

        当获取微信用户信息后, 想尽一切办法将用户数据存入自己家数据库

        1.若自己家数据库已经有数据, 则直接获取, 更新界面即可

        2.若自己家数据库中没有数据, 则需要将新用户添加到自家数据库中, 完成注册

                (需要在这个过程中注意不要重复注册)

// pages/me/me.js
const db = wx.cloud.database({
  env: 'xxxxx..........',
})

Page({
  data: {
    nickname: '点击登录',
    avatar: 'url地址',
    islogin: false
  },
  //点击登录
  tapLogin() {
    if (this.data.islogin) {
      return
    }
    wx.getUserProfile({
      desc: '赶紧允许，授予权限登录',
      success: (res) => {
        console.log(res)
        this.setData({
          nickname: res.userInfo.nickName,
          avatar: res.userInfo.avatarUrl,
          islogin: true
        })
        //查询数据库，验证用户是否已存在
        this.verifyUser(res.userInfo)
        //若该用户没有注册过，则注册到自家数据库
        // this.regist(res.userInfo)
      }
    })
  },
  //验证数据库中，当前用户是否已存在，若存在，则直接获取用户数据，若不存在，则直接注册
  verifyUser(useInfo) {
    db.collection('users').get().then(res => {
      console.log(res)
      //判断res.data有没有查到用户数据
      if (res.data.length == 0) {
        this.regist(userInfo) //注册
      } else { //更新页面
        let user = res.data[0]
        this.setData({
          nickname: user.nickName,
          avatar: user.avatarUrl
        })
      }
    })
  },
  //将新用户数据注册到users集合中
  regist(userInfo) {
    db.collection('users').add({
      data: userInfo,
      success: (addRes) => {
        console.log(addRes)
      }
    })
  },
})