微信小程序（二）授权获取用户信息

工具：微信开发者工具
场景：需获取用户信息并展示。

官方文章：授权
其他文章：用户点击授权获取用户信息

1.如果只是需要显示用户的名称和头像

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

2.获取用户信息
index.wxml

 
<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
<text>{
   
   {name}}</text>

index.js

Page({
    
    
	data:{
    
    
		name:""
	},
  getUserInfo: function(e) {
    
    
    let that = this;
    // console.log(e)
    // 获取用户信息
    wx.getSetting({
    
    
      success(res) {
    
    
        // console.log("res", res)
        if (res.authSetting['scope.userInfo']) {
    
    
          console.log("已授权=====")
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
    
    
            success(res) {
    
    
              console.log("获取用户信息成功", res)
              that.setData({
    
    
                name: res.userInfo.nickName
              })
            },
            fail(res) {
    
    
              console.log("获取用户信息失败", res)
            }
          })
        } else {
    
    
          console.log("未授权=====")
          that.showSettingToast("请授权")
        }
      }
    })
  },

  // 打开权限设置页提示框
  showSettingToast: function(e) {
    
    
    wx.showModal({
    
    
      title: '提示！',
      confirmText: '去设置',
      showCancel: false,
      content: e,
      success: function(res) {
    
    
        if (res.confirm) {
    
    
          wx.navigateTo({
    
    
            url: '../setting/setting',
          })
        }
      }
    })
  },
})