好文推荐:

完整代码gitee仓库查看:

一、微信登录

1.点击按钮（或其他），获取用户信息（昵称、头像等）。

wx.getUserProfile({
    lang: zh_CN,
    desc: 描述文本,
    success: (res)=>{}
})

3.给点击登录绑定事件

点击登录后的效果

用户信息就获取到了,可以在控制台看到

userInfo:展开后:发现可以获取到有的数据 avatarUrl头像 和 nickName用户名

4.获取到数据以后,保存,并且在me.wxml中利用插值语法替换头像和用户名

替换后

点击登录后

5.修复一个bug,当你已经登录,再次点用户名位置,还会提示登录

声明一个变量,利用if判断来解决这个问题,已经登录过直接return

 二、微信登录完整业务流

1.设计一个数据库，用于存储用户信息（可以是mysql，也可以是云数据库集合）。

例如下图这种:

一定要使用自己的数据库存储用户的详细信息。

3.执行登录业务，发请求，找自己家数据库，查看是否有当前登录用户：

找得到：登录成功，返回最新的用户信息并显示。

找不到：第一次登录，需要执行注册业务，添加新用户，显示用户信息。

4.打开云开发控制台,新建集合users

5.找不到：第一次登录，需要执行注册业务，添加新用户，显示用户信息。

注意:用户更新的最新数据,在自己家的数据库

data: {
    userInfo:{//用于保存用户数据
      nickName: 点击登录
    }, 
    islogin: false, //声明一个变量,默认为false,一旦登录成功,改为true
  },
  //点击登录后执行
  handleTapLogin(){
    if(this.data.islogin){
      return; //若已经登录,则直接返回,不会执行后面的语句
    }
    wx.getUserProfile({
      desc: 获取用户信息用于维护会员权益,
      lang:zh_CN,
      success:(res)=>{
        console.log(获取用户信息,res)
        //将用户数据存入data,更新UI
        this.setData({
          islogin: true,//登录成功,改为true
          userInfo: res.userInfo
        })
        //去自己家数据库进行查询,看一下当前用户的最新数据
        this.login()
      }
    })
  },
  //访问自己家数据库执行登录业务
  //1.若在users集合中找到用户信息,那么直接更新UI
  //2.若在users集合中没有找到用户信息,执行注册业务
  login(){
    let db = wx.cloud.database()   //获取数据库信息
    //users集合有权限设置,导致只能查到自己以前添加过得数据
    db.collection(users).get().then(res=>{
      console.log(查询当前用户,res)
      if(res.data.length==0){//没有查到用户
        this.regist() //调一个方法,去注册
      }else{//查到了用户

      }
    })
  },
  //注册业务  将userInfo存入users集合
  regist(){
    let db = wx.cloud.database() //获取数据库信息
    db.collection(users).add({  //在users中添加数据
      data:this.data.userInfo,    //把userInfo中的新数据存入data
      success:(res)=>{
        console.log(注册用户,res) //执行成功后打印
      }
    })
  },

新增的这一段:

这是打印的结果:

可以看到当前数据users数据是一个空数组,什么都没有

通过注册业务 将userInfo存入users集合后:有数据了

通过云开发查看:数据存进来了

重新编译一遍,再登录一次,可以在控制台看到,users数据data中确实有了新的数据

6.找得到：登录成功，返回最新的用户信息并显示

至此登录功能就实现了