【微信小程序/实现】实现获取微信个人信息

一、目的：实现获取微信个人的昵称和头像

二、页面过程

（1）初始页面如下：
希望可以点击按钮实现获取微信个人的昵称和头像

（2）点击按钮后的页面：

1. 如果拒绝
   
2. 如果允许
   

三、实现过程

（1）核心代码：

Page({
  //页面的初始数据
  data: {
    userInfo: '' //定义一个存放个人信息的全局变量
  },
  //授权登录的方法
  login(){
    //微信申请接口
    wx.getUserProfile({
      // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      desc: '必须授权才可以继续使用', 
      //允许授权后，保存用户个人信息
      success:res => {
        //把用户信息保存到本地，（'自定义名字'，信息数据）
        wx.setStorageSync('localUserInfo', res.userInfo); 
        //将个人信息赋值给相应全局变量
        this.setData({
          userInfo: res.userInfo,
        })
      },
      //拒绝授权后的提示
      fail(res){
        wx.showModal({
          title: '提示',
          content: '必须授权才可以继续使用'
        })
      }
    })
  }
})

（2）完整代码

1. wxml代码

<!-- pages/login/login.wxml -->
<view class="door">
  <view wx:if="{{userInfo}}" class="user">
    <image src="{{userInfo.avatarUrl}}" mode="widthFix"></image>
    <text>{{userInfo.nickName}}</text>
  </view>
  <button type="primary" bindtap="login" wx:if="{{!userInfo}}">授权登录</button>
  <button type="primary" bindtap="loginOut" wx:else>退出登录</button>
</view>

2. wxss代码

/* pages/login/login.wxss */
.door{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-image: url('https://cdn.ggac.com/media/work/image/2020/03/594020fa-6c1b-11ea-aa13-0242c0a88002.jpg');
  background-size: 100% 100%;
}

.door button{
  margin-bottom: 15vh;
}

.door .user{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40vh;
}

.door .user image{
  width: 14vh;
  border-radius: 50%;
  margin-bottom: 12rpx;
}

.door .user text{
  border-radius: 16rpx;
  padding: 8rpx;
  background-color: gray;
  color: white;
}

3. js代码

// pages/login/login.js
Page({
  //页面的初始数据
  data: {
    userInfo: '' //定义一个存放个人信息的全局变量
  },
  //授权登录的方法
  login(){
    //微信申请接口
    wx.getUserProfile({
      // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      desc: '必须授权才可以继续使用', 
      //允许授权后，保存用户个人信息
      success:res => {
        //把用户信息保存到本地，（'自定义名字'，信息数据）
        wx.setStorageSync('localUserInfo', res.userInfo); 
        //将个人信息赋值给相应全局变量
        this.setData({
          userInfo: res.userInfo,
        })
      },
      //拒绝授权后的提示
      fail(res){
        wx.showModal({
          title: '提示',
          content: '必须授权才可以继续使用'
        })
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo: '',
    })
    wx.setStorageSync('localUserInfo', '');
    wx.showToast({
      title: '已退出登录！',
    })
  },

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    //检测本地是否还保存着登录状态时的个人信息，可直接免登录
    if(wx.getStorageSync('localUserInfo')!=''){
      this.setData({
        userInfo: wx.getStorageSync('localUserInfo')
      })
    }
  }
})