小程序实战之获取用户授权以及信息

一、使用 button 标签获取用户信息

写一个 button 标签，设置 open-type 属性，并绑定点击处理函数

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

在点击处理函数里，获取用户信息

getUserInfo(e) {
    // 拿到用户信息进行下一步处理
    console.log(e.detail.userInfo)  
}

二、使用 open-data 组件

基本使用 open-data 是微信小程序官方提供的组件，作用是用来展示微信开放的数据。 展示用户头像：

<open-data type="userAvatarUrl"></open-data>

设置样式 若需要给这个组件设置样式，需要在外层包一个 view 标签，为这个标签写样式。如让这个头像显示成圆形：

<view class="avatar">
    <open-data type="userAvatarUrl"></open-data>
</view>

.avatar{
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%:
    overflow:hidden;
    display: block;
}

三、使用 wx.getUserInfo (不推荐使用)

过去获取用户信息一般都是用这种方式。使用时，若用户未授权，会直接弹出授权框。 为了优化用户体验，调用这个接口将无法弹出授权框，而是会默认调用失败。

这种方式这样使用：

// 前提条件：确定用户已授权
wx.getUserInfo({
    success: res => {
        console.log(res.userInfo)   // 获取到用户信息
    }
})