微信小程序——如何实现账号的注册、登录？

用到的数据库表：

用户表：chat-user，用于存放用户的基本信息，比如账号、密码、头像等等

用户的注册

1.先获取用户信息

使用wx.getUserProfile接口，获取用户的基本信息

功能描述

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo，详见 用户信息接口调整说明。

可以与一个事件进行绑定。

2.用户输入账号密码，把基本信息添加到数据库chat-user中

 wx.cloud.database().collection("chat-user").add({
      data:{
        number:Date.now(),//账号
        pas:that.data.pas1,//密码
        touxiang:that.data.userInfo.avatarUrl,//头像
        name:that.data.userInfo.nickName,//用户微信名
        admin:that.data.zh//用户
        },

完成这一步，用户的基本信息就上传到数据库中了。

同时为了之后更好的调用程序，可以将获取到的值赋值给本页的data和全局的globalData。

注意：

2.1.账号为了防止重复，我们使用data.now时间函数生成。

2.2.在用户进行输入的时候，我们有两个框让让他们进行输入，一个是昵称，另外一个是密码。为了防止用户密码出现失误，可以让用户输入两次密码一致后才注册成功。

2.3.灵活的使用 wx.showToast，弹出窗口进行提示是否成功。

3.页面跳转

调用组件wx.switchTab，直接跳转到tabar页面。

进行登录

1.获取用户的账号和密码

使用input组件就就可以实现。

以获取密码为例

  getpassword(e){//获取输入框密码
    console.log(e.detail.value)
    this.setData({
      pas1:e.detail.value
    })
   },

在js页面中，把获取到的信息负责给此页面中的data，为了下一步的数据中查询用户账号信息做准备。

2.根据获取到的账号密码，对数据库进行查询，获取查询到的结果。

注意：res._id是已经获取到的用户输入的账号。

         //查询数据库获取这个数据 
          wx.cloud.database().collection("chat-user").doc(res._id).get({
            success(res1){
              app.globalData.userInfo=res1.data//赋值给全局
              wx.switchTab({
                url: '/pages/message/message',
              })
              wx.showToast({
                title: '登录成功！',
              })

            }
          })

查询成功后，把返回的值赋值给全局data和本页面的data，以便进行接下来的操作。

综合使用

1.用户点击登录进入界面，可以选择直接登录或者注册。

2.若直接登录，则执行登录逻辑。

3.如果用户进行注册，则执行注册逻辑。

 

首先跳转到注册页面，之后判断获取用户是否获取微信信息，若没有获取，可以加一个提升窗口。

如果已经获取用户信息，则执行注册逻辑。

4.每一次获取数据库表中的内容之后，都需要将内容赋值给本页的data和全局的data。

5.注册或者登录成功后，跳转到页面首页。

 注意事项：success函数有两种写法，一种是箭头函数（不用进行that与this区分）写法是：success:(res)=>{}.

另外一种是之前版本的success，需要进行that与this区分。写法：success(){}.