uni-app框架下，使用wx.getUserProfile微信一键登录，简单获取微信名称、头像

首先，我们先了解一下wx.getUserProfile，用户头像昵称获取规则已调整，目前只允许我们拿到用户头像和微信名称。

接下来，我们开始写代码：

第一步：在页面中产生点击事件（例如 button 上 bindtap 的回调中）

（这里需要注意：uniapp框架不能够使用bindtap，所以我们这里需要替换成@click）

open-type是一些开放的东西，比如客服、转发、获取手机号...具体可以参照官网的说明

wx.getUserProfile(Object object) | 微信开放文档

我们这里需要的是getUserInfo，来获取用户信息

第二步：写点击事件toLogin()

其实这里只需要调用wx.getUserProfile，

我们先输出一下，看一下都有什么东西

    toLogin() {
      wx.getUserProfile({
        desc: '获取用户信息',
        success: (res) => {
          console.log(res);
        }
      })

前端会输出很多，这里我们只需要userInfo中的内容

我们可以看到userInfo里面确实只能看到nickName（名称）和avatarUrl（头像），也正是我们需要的

这里我们获取的是匿名数据（我搜了一下，好像是因为微信这个接口一直再改，现在(2024.4.15)对于引用的微信库版本＞2.27.1时，getUserProfile不再返回真实用户信息了并且也不再弹出授权框(详见微信官方公告)，）

我们只需要将微信开发者工具版本改到2.27.1以下就可以弹出授权框并获取真实数据了

如果我们只获取这两个值，我们就可以直接把他们存到缓存里，如果要获取大量的数据，那么存缓存中就会拖慢加载的速度，就不太适合了，如果数据量过大，可以存到数据库里

我这里只需要拿到头像和名称，所以我就把他存到缓存中就ok，直接上代码

login: false, //在data中声明

toLogin() { //若是微信开发者工具开发微信原生小程序则直接在data{}，下面写
            //若是uniapp，则在data{},下，建method，将这个点击事件写到method方法中
      wx.getUserProfile({
        desc: '获取用户信息',
        success: (res) => {
          console.log(res);
          const {userInfo: {avatarUrl, nickName}} = res; //取出userInfo中avatarUrl和nickName的值
          const userInfo = {
            avatarUrl,
            nickName
          }
          wx.setStorageSync('userInfo',userInfo); //存用户信息
          wx.setStorageSync('login',true); //存登录状态，若为ture，则是登录状态
          this.login = true; //因为默认在进入页面时才会触发onload，所以在这里我们要手动给他设置一下，让他只要登录了，每次进来都是登录状态
}
      })
}

onLoad(options) {
    const login = wx.getStorageSync('login'); //取登录状态
    this.login = !!login; //拿到登录状态，两次取反可以避免拿到undefined导致登录状态失效
    // this.setData({ 开发微信原生小程序时用serData赋值
    //    login: !!login
    // })
    }

//在页面中可以通过条件判断，判断login是否为true,来判断页面需要展示的内容
//在原生小程序中使用wx:if="{{!login}}"
//uniapp中使用 v-if="!login"
//在下面用wx:else 或 v-else 来展示登录成功后的页面

<div class="unlogin" v-if="!login"> //取反为false则代表login为false时展示当前view内的东西
<button class="unlogin-btn" open-type="getUserInfo" @click="toLogin">微信一键登录</button>
</div>

<div class="login" v-else>
</div>

第三步：实现退出登录

退出登录这里，其实只需要我们把login的登录状态改成false就可以，我是利用一个弹窗让用户确认退出登录。

直接上代码

<div class="myList" @click="quitLogin">
          退出登录      
</div>

quitLogin() {
      wx.showModal({
        title: '提示',
        content: '确定退出吗？',
        success: (res) => {
          const {confirm} = res;
          if (confirm) {
            wx.removeStorageSync('login');
            wx.removeStorageSync('userInfo');
            this.login = false;
            // this.setData ({ //原生中使用setData
            //   login: false
            // })
          }
        }
      })
    }