微信小程序:获取用户信息(昵称和头像)

简介: 微信小程序:获取用户信息(昵称和头像)

方式一:open-data展示用户信息不推荐

组件功能调整为优化用户体验,平台将于2022年2月21日24时起回收通过展示个人信息的能力。

如有使用该技术服务,请开发者及时对小程序进行调整,避免影响服务流程。查看详情:

https://developers.weixin.qq.com/community/develop/doc/000e881c7046a8fa1f4d464105b001


<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

方式二: wx.getUserInfo 不推荐

小程序登录、用户信息相关接口调整说明:

https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801


Page({
  onLoad: function (options) {
    this.getUserInfo();
  },
  async getUserInfo() {
    // 可以直接调用,无需用户授权
    const res = await wx.getUserInfo();
    console.log(res);
  },
});

获取的数据


{
  userInfo{
  avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
  city: ""
  country: ""
  gender: 0
  language: ""
  nickName: "微信用户"
  province: ""
  }
}

调用后发现,获取的数据已经不是真实的用户数据了


方式三:open-type=“getUserInfo” 不推荐

调用后发现,获取的数据已经不是真实的用户数据了


bug:开发者工具中 2.10.4~2.16.1 基础库版本通过 会返回真实数据,真机上此区间会按照公告返回匿名数据。

查看公告:

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html#Bug-Tip


wxml


<button open-type="getUserInfo"
        bind:getuserinfo="handleGetUserinfo">获取用户信息</button>

js


Page({
  handleGetUserinfo(e) {
    console.log(e);
  },
});

输出


{
  detail{
  userInfo:{
    avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
    city: ""
    country: ""
    gender: 0
    language: ""
    nickName: "微信用户"
    province: ""
    }
  }
}

方式四:wx.getUserProfile 推荐

获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo


文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html


用户数据结构 UserInfo : https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/UserInfo.html


<button bindtap="getUserProfile">获取头像昵称</button>
1
Page({
  async getUserProfile(e) {
    const res = await wx.getUserProfile({
      desc: '用于完善会员资料',
    });
    console.log(res);
  },
});

输出


{
  detail{
  userInfo:{
    avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
    city: ""
    country: ""
    gender: 0
    language: ""
    nickName: "真实昵称"
    province: ""
    }
  }
}
相关文章
|
6月前
|
小程序
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
63 0
|
5月前
|
JSON 小程序 前端开发
|
5月前
|
存储 JavaScript 小程序
|
5月前
|
小程序 前端开发 Java
|
6月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
99 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
6月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
87 0
|
6月前
|
缓存 容器
Flutter实现仿微信群头像功能
Flutter实现仿微信群头像功能
85 0
|
8月前
|
小程序
微信小程序用户登陆和获取用户信息功能实现
微信小程序用户登陆和获取用户信息功能实现
162 0
|
1天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
20天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。

热门文章

最新文章