小程序实战(七)-获取用户信息

本篇文章总结微信小程序获取用户信息的几种方式：

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

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

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

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

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

二、使用 open-data 组件，直接显示

1. 基本使用 open-data 是微信小程序官方提供的组件，作用是用来展示微信开放的数据。 通过设置它的 type 属性，来展示不同的开放数据，如展示用户头像：

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

附上 type 的合法值： [image:6EAC91FE-7196-4BC3-BAB1-CE1216351B95-48576-00027AF7DCCF2443/15A10858-641F-4D95-BF9B-7386E557F335.png]

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

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

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

3. 需注意一点：微信头像若修改了，更新会有4个小时的时间差：

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

过去获取用户信息一般都是用这种方式。使用时，若用户未授权，会直接弹出授权框。 为了优化用户体验，从2018年4月30日开始，调用这个接口将无法弹出授权框，而是会默认调用失败。具体见公告。

这种方式这样使用：

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

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~