草庐IT

微信小程序获取用户头像昵称组件封装(最新版)

super--Yang 2023-04-03 原文

一、前言

微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大。

更多详情查看公告:公告直达链接

我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息。因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称。

博客中也会浅谈一下该如何对新旧接口进行业务逻辑的开发,让兼容性更强。

先看看效果:

二、组件使用

下载组件

先把组件下载下来。
组件下载链接
组件有点大,27K。是因为有使用图片的缘故,对代码包大小比较紧张的项目,建议将图片去掉或者使用字体图标代替,我这就不做处理了。

组件导入

下载压缩包后,解压,将组件直接copy进小程序项目的components目录中,如果没有,自己看着下面的文件结构创建一个。

文件目目录结构:

引用组件

在需要使用的页面.json文件中引入组件。

使用组件

wxml

当变量:showAvaModal为true时,弹窗便会弹出,因此只需要控制这个变量即可。

js

绑定回调函数:getAvaNickData(),当用户点击弹窗的设置按钮时,便会将头像本地地址以及昵称返回,接下在再接入正常的业务流程即可。

三、浅谈业务逻辑设置

注意事项

接口更改后,返回的头像地址将是本地的临时地址,因此不能再像以前一样,直接存储返回来的头像网络地址。需要将临时的头像地址上传至云存储或者服务器中,然后将返回的网络地址存储至数据库。

只需要处理好这一步,其余的业务逻辑不会受到接口变更的影响。

云开发图片以及文件上传教程博客

兼容性

接下来说一下兼容性的问题。

公告中指出,头像昵称填写能力仅在基础库2.21.2以上的版本中才支持,而2.10.4-2.21.0支持旧版接口能力。(2.9.5以下的不说了,版本很旧了而且兼容性处理都一样做法。)

这样一来,就需要对两种接口依赖的基础库版本做一个判断,2.21.2以上的使用自定义的弹窗组件来获取(设置)用户昵称头像,其余的使用旧接口。

示例代码:


  /**
   * 头像昵称点击监听
   */
  async setAvatarTap() {
    const {SDKVersion} = wx.getSystemInfoSync()
    // 判断是否支持getUserProfile()获取头像昵称
    const compareRes = this.compareVersion(SDKVersion, "2.21.2")
    // 不支持
    if (compareRes !== -1) {
      console.log("不支持getUserProfile()获取头像")
      // 弹出获取用户头像昵称弹窗组件
      this.setData({
        showAvaModal: true
      })
      return
    }
    // 支持
	console.log("支持getUserProfile()获取头像")
  },

/**
 * 版本比较
 * v1 >= v2 返回 0或1 否则 -1
 * @param {String} v1
 * @param {String} v2 
 */
 compareVersion (v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

四、结语

组件开发的时间比较匆忙,代码写得并不是很好,弹窗式的也不一定满足全部项目的需求,因此大家可以根据自己需求,自己开发一个组件或者直接写在页面中,如果逻辑代码不会编写,可以参考我的组件。

最后来一下常规结语:

实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
👍赞一个!!!
🤩当然,顺带收藏就最好了。
😎欢迎转载,原创不易,转载请注明出处✍。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

有关微信小程序获取用户头像昵称组件封装(最新版)的更多相关文章

  1. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  2. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项?我正在使用法拉第3.3。Faraday.get(url)四处寻找,我只能先发起连接后应用超时选项,然后应用超时选项。或者有什么简单的方法?这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  3. ruby - 从 Ruby 中的主机名获取 IP 地址 - 2

    我有一个存储主机名的Ruby数组server_names。如果我打印出来,它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点,但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类?输出:ge

  4. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组,即["apple","boy"]? 最佳答案 为了做到这一点,请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

  5. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器,并将RVM安装的ruby​​实现设置为默认值,这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时,它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径?谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣,可以在这里获取:http://github.com/senny/rvm.el

  6. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态,而无需发出第二个请求。有没有办法用另一种方法做到这一点?我一直在查看文档,但似乎找不到我要找的东西。 最佳答案 在我看来,除非您需要一些真正的低级访问或控制,否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  9. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm,但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止,并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装),我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功,但未添加.rvm目录,甚至在修改我的.bas

  10. ruby - 没有类方法获取 Ruby 类名 - 2

    如何在Ruby中获取BasicObject实例的类名?例如,假设我有这个:classMyObjectSystem我怎样才能使这段代码成功?编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它? 最佳答案 我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象

随机推荐