微信小程序——如何实现账号的注册、登录？-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序——如何实现账号的注册、登录？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用到的数据库表：

用户表：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.用户点击登录进入界面，可以选择直接登录或者注册。

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