微信小程序授权登入、获取手机号、获取头像、昵称

最近空闲之际在看了下小程序,期间肯定少不了微信小程序授权登入、获取手机号、获取头像、昵称这些逻辑,简单整理下这些逻辑

- 获取手机号

  • 在按钮加上open-type="getPhoneNumber",手机号快速验证,向用户申请,并在用户同意后,快速填写和验证手机, 前提是微信小程序的主体是企业微信,并且在微信小程序的后台设置中"微信认证",必须是已认证,这样才能正常获取到手机号,否则在获取的时候会报没有权限的。

  • bindgetphonenumber="getphonenumber",回调中就能获取到了用户手机号,
js 复制代码
  <van-button plain type="primary" open-type="getPhoneNumber" bindgetphonenumber="getphonenumber" class="btn">获取用户手机号</van-button>
  • 这样就能拿到微信返回的数据 将code或者其他标识通过调接口传给后端,后端即可返回用户手机号

二 获取用户头像

以下是微信小程序公告

调整说明

自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整:

  1. 自生效期起,小程序 wx.getUserProfile 接口将被收回 :生效期后发布的小程序新版本,通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 "微信用户"。生效期前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。
  2. 自生效期起,插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回 :生效期后发布的插件新版本,通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 "微信用户"。生效期前发布的插件版本不受影响,但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。
  3. 「头像昵称填写能力」支持获取用户头像昵称 :如业务需获取用户头像昵称,可以使用「头像昵称填写能力」(基础库 2.21.2 版本开始支持,覆盖iOS与安卓微信 8.0.16 以上版本),具体实践可见下方《最佳实践》。
  4. 小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求:对于来自低版本的基础库与微信客户端的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称,插件通过 wx.getUserInfo 接口将正常返回用户头像昵称,开发者可继续使用以上能力做向下兼容。
  • 在按钮上加上 open-type="chooseAvatar" bindchooseavatar="getBindChooseAvatar"

后面我们再想要获取微信头像跟用户昵称的时候 得单独获取了,好坑。。。

二 获取用户昵称

  • 用户昵称审核完毕后触发,仅在 type 为 "nickname" 时有效,event.detail = { pass, timeout },
  • 在input标签上加上 nickname | 昵称输入键盘。仅 Webview 支持,
  • 在input标签加上 bindnicknamereview="getNickName",回调中可回显昵称。
js 复制代码
  <input type="nickname" bindnicknamereview="getNickName" placeholder="请输入昵称" />

以上就是微信小程序授权登入、获取手机号、获取头像、昵称的方法了,如有不足,希望大家指正。

相关推荐
yi碗汤园10 分钟前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7271 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic1 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088503 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring