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

博客概要

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

1.wx.getUserInfo接口

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

示例场景：

1. 用户未授权，调用该接口将直接报错
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>

//js
Page({
  data: {
    hasUserInfo: false
  },
  getUserInfo(info) {
    const userInfo = info.detail.userInfo
    this.setData({
      userInfo,
      hasUserInfo: true
    })
  },
})

运行结果：

     样式自行填充= =

元素说明：

属性	说明
open-type	微信开放能力
bindgetuserinfo	用户点击该按钮时，会返回获取到的用户信息 回调的detail数据与wx.getUserInfo返回的一致 open-type="getUserInfo"时有效
…	…

open-type合法值

值	说明
getUserInfo	获取用户信息 可以从bindgetuserinfo回调中获取到用户信息
contact	打开客服会话 如果用户在会话中点击消息卡片后返回小程序 可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号 可以从bindgetphonenumber回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置页
feedback	打开“意见反馈”页面 用户可提交反馈内容并上传日志 开发者可以登录小程序管理后台后 进入左侧菜单“客服反馈”页面获取到反馈内容
…	…

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

---

3.open-data标签

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

示例代码：

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

元素说明：

属性	说明
type	开放数据类型
lang	当type="user"时生效，以哪种语言展示userInfo
…	…

type合法值

值	说明
userNickName	用户昵称
userAvatarUrl	用户头像
userGender	用户性别
userCity	用户所在城市
userProvince	用户所在省份
userCountry	用户所在国家
userLanguage	用户的语言
groupName	拉取群名称
…	…

lang合法值

值	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文
…	…

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

---

总结

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