微信小程序—获取用户头像 昵称

博客概要

针对使用微信小程序时获取用户头像、昵称的三种方法，做一个简单分享~

文章目录

博客概要1.wx.getUserInfo接口2.button触发3.open-data标签总结

1.wx.getUserInfo接口

传统效果是会出现“授权弹窗”，需要用户手动确认。目前，此接口已有调整，使用该接口将不再出现授权弹窗，请使用方法2（如下）引导用户主动进行授权操作

示例场景：

用户未授权，调用该接口将直接报错用户已授权，可使用该接口正常获取用户信息

2.button触发

不出现“授权弹窗”，但需要button做引导，来得会没有弹窗突兀…

示例代码：

<!--wxml--><block wx:if="{{hasUserInfo === true}}"><image src="{{userInfo.avatarUrl}}"></image><text>{{userInfo.nickName}}</text></block><button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button>

//jsPage({data: {hasUserInfo: false},getUserInfo(info) {const userInfo = info.detail.userInfothis.setData({userInfo,hasUserInfo: true})},})

运行结果：

样式自行填充= =

元素说明：

open-type合法值

更多内容点击跳转至官方文档：组件-表单组件-button

3.open-data标签

使用open-data可以不用用户授直接获取，用于展示微信开放的用户数据，所以如果你仅仅只是想展示用户信息的话，就，用它！用它！用它！= =毕竟代码少…

示例代码：

<!--wxml--><!-- 获取头像 --><open-data type="userAvatarUrl"></open-data><!-- 获取昵称 --><open-data type="userNickName" lang="zh_CN"></open-data>

元素说明：

type合法值

lang合法值

更多内容点击跳转至官方文档：组件-开放能力-open-data

总结

具体场景需要具体考虑使用不同的方法，以上仅分享了基础的获取途径，涉及openid、用户信息API等进一步有需要的…自个儿研究去= =prprpr

如果觉得《微信小程序—获取用户头像 昵称》对你有帮助，请点赞、收藏，并留下你的观点哦！