微信小程序新版头像昵称上传

这篇具有很好参考价值的文章主要介绍了微信小程序新版头像昵称上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方文档:小程序用户头像昵称获取规则调整公告 | 微信开放社区

头像昵称填写 | 微信开放文档

为我们小程序写了一个头像昵称上传的组件总结了下

需要注意的点:
  1. 我们后端服务器存的老用户的头像昵称有的是:之前早版本(wx.getUserInfo )能获取到的用户真实微信头像昵称,和 后面改版(wx.getUserProfile)之后获取的默认灰色头像微信用户的头像昵称所以我们做了一个判断当前用户是否有头像昵称以及是否是默认的微信用户灰色头像的判断(根据自己业务需要);

  1. 小程序input组件获取的头像是本地的临时地址,所以要想下次进入小程序依然能取到之前上传的投下给你需要服务器来保存;

  1. wx.uploadFile上传的图片地址是图片本地的地址(不能是服务器的http地址),api会把本地图片的地址转化成流的形式传给你所给的服务器地址文章来源地址https://www.toymoban.com/news/detail-515478.html

关键部分代码
<!--components/avatarNicknameModal/avatarNicknameModal.wxml-->
<view class="out-wrapper" wx:if="{{showAvaModal}}" style="top: 0px">
    <view class="inner-wrapper">
        <view class="apply-info-tit">
          <image  src="https://xxxxxxx.com/xxxx/pics/miniproStage3/ava_nicklogo.png"></image>
          <view class="text">xxxxxxxx 申请</view>
        </view>
        <view class="which-info">获取你的昵称、头像</view>
        <view class="use-info">注册、登录小程序</view>
        <!--index.wxml-->
        <view class="get-info-wrapper">
          <view class="avatar-wrapper">
              <view class="avatar-text">头像</view>
              <button class="avatar-btn" plain open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
                        <view wx:if="{{!isChoosePhoto && (isForceUpload || !avatarUrl)}}">点此获取头像</view>
                      <image wx:else class="avatar" src="{{avatarUrl}}"></image>
                    <van-icon name="arrow" class="icon-right"></van-icon>
                </button>
            </view>
            
            <form catchsubmit="formSubmit" class="nickname-wrapper">
                <view class="row">
                    <view class="text1">昵称</view>
                    <input wx:if="{{isForceUpload || !nickName}}" type="nickname" bindblur="bindblur"  class="nickname-input" name="nickname" placeholder-class="placeholder-nickname-style" placeholder="点此获取昵称"/>
                    <input wx:else type="nickname" bindblur="bindblur" value="{{nickName}}" class="nickname-input" name="nickname" />
                </view>
                <view class="submit-btn">
                    <view class="cancel-btn" bindtap="closeModalTap">取消</view>
                        <view class="sure-btn" bindtap="setBtnTap">确定</view>
                </view>
            </form>
        </view>

    </view>
</view>

// components/avatarNicknameModal/avatarNicknameModal.js
const { uploadAvatar } = require('../../utils/utils')
const config = require('../../config')
// const request = require('../../utils/request')
const wxLogin = require('../../utils/auth')
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示上传头像昵称的弹窗
    showAvaModal: {
      type: Boolean,
      value: false,
    },
    // 如果是微信默认用户必须强制授权
    isForceUpload: {
      type: Boolean,
      value: false
    },
    avatarUrl: {
      type: String,
      value: ''
    },
    nickName: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isChoosePhoto: false, // 记录用户选择头像
  },
  observers: {
  },
  lifetimes: {
    attached: function() {
    },
    ready: function() {
      // 在组件在视图层布局完成后执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 阻止页面滑动
     */
    catchtouchmove() {},

    /**
     * 选择头像返回信息监听  获取的图片地址虽然是http开头的但也是本地的一个临时地址
     */
    onChooseAvatar(res) {
      const avatarUrl = res.detail.avatarUrl
      this.setData({
        avatarUrl: avatarUrl,
        isChoosePhoto: true
      })
      console.log(this.data.avatarUrl)
    },

    /** 获取昵称信息 */
    bindblur(res) {
      const value = res.detail.value
      this.data.nickName = value
    },

    /**
     * 设置信息按钮点击监听
     */
    async setBtnTap() {
      const {
        avatarUrl,
        nickName
      } = this.data
      if(!avatarUrl) {
        wx.showToast({
          title: '头像不能为空',
          icon: 'none'
        })
        return
      }
      if(!nickName) {
        wx.showToast({
          title: '昵称不能为空',
          icon: 'none'
        })
        return
      }
      try {
        // 刷新一次登录态
        await wxLogin()
        const wxLoginstate = wx.getStorageSync('loginSessionId');
        const openId = wx.getStorageSync('openId');
        const url = `${config().host}${config().fileUploadPic}?LsessionId=${wxLoginstate}`
        // (xxxxxxxxxx.com),(xxxxxxxxxuat.com)我们服务器的地址,如果他点开了上传头像昵称的面板,又点击了保存,上传的是我们服务器的图片地址,wx.upLoad会返回服务器异常
        if(/(xxxxxxxxxx.com)/.test(avatarUrl) ||
         /(xxxxxxxxxuat.com)/.test(avatarUrl)) {
          this.imgUrl = avatarUrl
        } else {
          this.imgUrl = await uploadAvatar(url, avatarUrl, openId)
        }
      } catch(err) {
        console.log(err)
      }
      this.triggerEvent("handleSetAvaNickData", {
        avatarUrl,
        nickName,
        imgUrl: this.imgUrl
      })
    },
    /**
     * 关闭弹窗
     */
    closeModalTap() {
      this.setData({
        showAvaModal: false
      })
      this.triggerEvent("handleCloseAvaNickPop")
    },
  }
})

// uploadfile  头像图片上传转换格式
function uploadAvatar(url, filePath, openid) {
  wx.showLoading({
    title: '图片上传中...'
  })
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: url,// 后端服务器地址
      filePath: filePath, //图片的本地地址 
      header: {
        "content-type": "multipart/form-data"
      },
      name: 'file',
      formData: {
        'openId': openid
      },
      success(res) {
          let data = res.data
          if(data) {
            data = JSON.parse(data)
          }
          setTimeout(function () {
            wx.hideLoading()
          }, 0)
          resolve(data?.data)
      },
      fail(err) {
          reject(err)
      }
    })
  })
}
// 判断用户是否使用的默认头像或者头像为空
// 使用组件的父组件有可能能用到这个函数
function checkDefaultAvatar(url, name) {
  // 微信用户昵称  其默认头像
  // https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132
  if(!url) return true;
  if(!name) return true;
  const check1 = /(POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg)/.test(url)
  //const check2 = /(telmall\/pics\/eMallRedesign\/defaultAvatar)/.test(url)
  const checkName = name === '微信用户' ? true : false
  if((check1) && checkName) return true;
  return false;
}
实现成果截图
微信小程序新版头像昵称上传
微信小程序新版头像昵称上传

到了这里,关于微信小程序新版头像昵称上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】新版获取用户头像昵称(uniapp)(完整版附源码)

    需求 获取微信用户头像和昵称 问题 其实实现起来不复杂,复杂的是近几年微信小程序文档对于获取用户信息这块的api一直在更新,而查看了很多帖子基本都是用的旧的api,wx.getUserProfile(Object object) 和 wx.getUserInfo(Object object),旧的api只适用于低版本的基础库,对于当下的最新

    2024年01月16日
    浏览(100)
  • 微信小程序上传头像和昵称持久化保存

    因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url。所以非常有必要把这个url转成我么实际可用的头像到数据库中。让头像持久化的在微信和公网任何位置都能访问。 这里我们使用url转base64字符串的方

    2024年02月12日
    浏览(43)
  • 最新微信小程序获取头像昵称,直接用,uniapp获取微信小程序头像昵称

    微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo,2021年4月5日被废弃,原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户,后面新

    2024年02月11日
    浏览(54)
  • 微信小程序更改头像昵称

    目录 背景 解决思路 前面写了一篇关于小程序头像昵称获取更改的方案,有很多小伙伴私信我发一个整体的逻辑思路! 前面的这篇文章中我们给出了页面中获取头像昵称的代码: 上方代码中我们可以很清晰的看到用户的头像和昵称,使用button和input输入框来填充或者更改的。

    2024年02月09日
    浏览(44)
  • 微信小程序获取昵称,头像

    1,昵称:使用到的是微信小程序文档里的api input框的type值设置为nickname,再使用双向绑定的方法拿到值 这个方法点击input框的时候它会弹出你当前的微信名称,基础库版本较低的话电脑上无法显示,只能在真机调试上显示 2,头像 点击按钮底部弹出自己的头像,也可以上传新

    2024年02月12日
    浏览(53)
  • 微信小程序获取用户头像昵称

    微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中,获取用户昵称和头像是非常常见的需求,因为这些信息可以用来个性化展示内容,提高用户体验。以下是获取用户头像昵称的传统方法: 在小程序中,可以通

    2024年02月07日
    浏览(64)
  • 微信小程序如何获取用户头像昵称

        微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息,按照官方推荐会显示用户在微信的头像和昵称,本文介绍一下实现方案.最终实现效果:修改头像会默认显示微信头像,修改昵称时会默认显示

    2024年02月11日
    浏览(72)
  • 微信小程序最新获取头像昵称方式

      前言 版本历史变迁 一、获取头像的正确姿势 二、获取昵称的正确姿势 总结 产品需要获取微信用户的昵称和头像。 这这还不简单,so easy! 通过 wx.getUserProfile 或者  wx.getUserInfo  就可以获取到。 但是获取的昵称是”微信用户“获取的头像是灰色的头像。 如果你也是上面这

    2024年02月13日
    浏览(46)
  • 关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式

    小程序用户头像昵称获取规则调整公告:小程序用户头像昵称获取规则调整公告 | 微信开放社区   点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击同意授权之后,调用 wx.login 方法获取登录凭证(code),把code传给后端写的登录接口进行解析登

    2024年02月05日
    浏览(65)
  • 微信小程序获取头像昵称 保存头像到服务器

    微信官方推荐的替代做法: 头像昵称填写 | 微信开放文档 (qq.com)  wxml js wxss

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包