微信小程序wx.getUserProfile

本文介绍两种小程序中获取用户信息的方法:传统 getUserInfo 和新版 getUserProfile。详细解释了两种方法的区别及实现步骤,并提供了完整的代码示例。

很多开发者在打开小程序时就通过组件方式唤起 getUserInfo 弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户。详情可以点击官方调整链接微信官方链接
在这里插入图片描述
前提:

  • 开发者工具版本不低于 1.05.2103022
  • 基础库版本不低于 2.10.4
  • 基础库查看再微信开发工具的详情–>本地设置—>调用基础库
  • 本次使用2.15.0
    在这里插入图片描述
    使用:

公用一个登录注册接口:

import http from '../utils/http'

// 主页api 
export default { 
    registe: data => http.post('/user/login', data, { notAuth: true }),
}

1.传统的getUserInfo
html:

<button  open-type="getUserInfo"   lang="zh_CN" bindgetuserinfo="saoMiao">按钮</button>

js:

saoMiao(){
	let that =this
    let info = e.detail
    const res = await getApp().login(info);
}

app.js的login方法

  login(e){
    const token = wx.getStorageSync('token')
    if (token) return Promise.resolve(true)
    let info = e.userInfo
    return new Promise((resolve, reject) => {
      wx.login({
        success: async (d) => {
          info.code = d.code;
          const res = await api.registe(info);
          if (!res) {
            resolve(false)
            return wx.showToast({
              icon:'none',
              title: res?.resultMsg ?? '登录失败'
            })
          }
          wx.showToast({
            icon:'none',
            title: '登录成功'
          })
          wx.aldstat.sendOpenid(res.resultData.userInfo.openId)
          wx.setStorageSync("token", res.resultData.token)
          wx.setStorageSync("userInfo", res.resultData.userInfo)
          resolve(true)
        },
      })
    })
  },

2.新版本getUserProfile
html:

<button  bindtap="saoMiao">按钮</button>

js:

 	let that =this
    const res = await getApp().newlogin();
    if (!res) return;

app.js的newlogin方法

  newlogin(){
    const token = wx.getStorageSync('token')
    if (token) return Promise.resolve(true)
    return new Promise((resolve,rej)=>{
      wx.getUserProfile({
        desc: '业务需要',
        success:async res => {
          wx.login({
            success: async (re) => {
              if (re.code){
                res.userInfo.code=re.code
               const data= await (res.userInfo)
                wx.request({
                  url: config.apiBase+'/user/login?code='+re.code,
                  data: res.userInfo,
                  method:"POST",
                  success(resp){
                    if (!resp) {
                      resolve(false)
                      return wx.showToast({
                        icon:'none',
                        title: resp?.resultMsg ?? '登录失败'
                      })
                    }
                    wx.showToast({
                      icon:'none',
                      title: '登录成功'
                    })
                    console.log(resp)
                    wx.aldstat.sendOpenid(resp.data.resultData.userInfo.openId)
                    wx.setStorageSync("token", resp.data.resultData.token)
                    wx.setStorageSync("userInfo", resp.data.resultData.userInfo)
                    // resolve(resp)
                    resolve(true)
                  }
                })
              }
            }
          })
        },fail(res){
          console.log(res)
          if (res.errMsg=="getUserProfile:fail auth deny"){
            wx.showToast({
              icon:'none',
              title: '拒绝授权'
            })
          }
        }
      })
    })
  },
微信小程序中,原本可以通过 `wx.getUserProfile` 接口获取用户的昵称和头像信息。然而,自 2022 年 10 月 25 日生效起,该接口的行为发生了变化:新版本的小程序调用 `wx.getUserProfile` 将无法再获得真实的用户昵称,而是统一返回 “微信用户” [^1]。 这意味着如果你是在这个日期之后发布的小程序新版本,并尝试使用 `wx.getUserProfile` 来获取用户昵称,则不会得到预期的结果。对于在生效期之前发布的版本,如果进行了更新,则也需要进行相应的适配以处理这一变化 [^1]。 此外,有开发者报告称,在升级了微信开发者工具到最新版后,尝试调用 `wx.getUserProfile` 接口时遇到了错误提示 `invoke wx.getUserProfile too frequently`,这表明频繁调用此接口可能受到限制或被阻止 [^2]。 为了解决这个问题,微信官方推荐了一种替代方案来让用户主动提供他们的昵称和头像。例如,可以引导用户通过一个表单输入他们的昵称并选择一个头像。下面是一个简单的 Vue.js 风格的代码示例,展示了如何实现这一点: ```javascript <script> export default { data() { return { // 微信默认灰色头像的图片地址(未获取用户头像前默认采用灰色头像) defaultAvatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0", nickname: "" } }, methods: { onChooseAvatar(e) { // 用户选择了微信头像后触发这个函数 // 将拿到的用户微信头像地址保存到页面的data this.defaultAvatarUrl = e.detail.avatarUrl; }, getUser(e) { // 点击确认按钮后触发表单的事件,在表单事件中通过event对象获取到用户昵称 this.nickname = e.detail.value.nickname; console.log(this.nickname); } } } </script> ``` 在实际应用中,你需要根据你的前端框架或者原生 JavaScript 设置适当的方式来捕获和存储这些信息。同时,确保你遵循最新的微信小程序开发指南和政策,以便正确地处理用户数据。
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值