微信小程序获取用户信息-头像、昵称......

微信小程序获取用户信息-头像、昵称等，并出现弹窗提示授权

1.wx.getUserProfile文档

官网文档：（链接：wx.getUserProfile）

参数如下

回调函数

2.代码演示

wxml中：(class、src自己定义)

<image wx:if='{{userInfo.avatarUrl}}' class="hpicture" src="{{userInfo.avatarUrl}}"></image>
<button wx:else  bindtap="getUserProfile" >获取用户信息</button>

js中：

data: {
    userInfo:{//用户的基本信息
    },
    user:{
      username:'章',
      school:''
    }
  },
  //获取用户信息的回调
getUserProfile(e) {
  wx.getUserProfile({
    desc: '资料', 
    success: (res) => {
      //修改userInfo的状态数据
      this.setData({
        userInfo: res.userInfo,
      })
    },
    fail:(err) =>{
      console.log(err);
    }
  })
},

3.演示过程（图示）

我的代码效果如下：
图1

点击头像登录
图2

点击拒绝后 同图1
点击允许：（显示微信头像和昵称）
图3

在AppData中查看userInfo的数据