微信小程序获取用户头像和昵称(填写头像昵称能力)

news/2024/10/31 4:20:32/

开放能力调整公告

总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 【头像昵称填写能力】啦。
小程序用户头像昵称获取规则调整公告

获取头像

  • 获取头像代码

    wxxl部分

    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image>
    </button> 
    

    js部分

    Page({data: {avatarUrl: defaultAvatarUrl,},onChooseAvatar(e) {const { avatarUrl } = e.detail 	//获取图片临时路径this.setData({avatarUrl,})}
    })
    

    适配头像时需要注意的地方
    此时获取到的头像路径为本地路径,虽然可以在页面上显示,但是并不能直接入库使用,浏览器上是访问不到的。需要上传到我们自己的服务器,后面每次使用都从我们自己的服务器上取。 其实说白了就是之前头像文件我们都是从微信服务器获取的,现在需要去我们自己的服务器获取了。
     

     wx.uploadFile({url: '我们自己的服务器地址', //仅为示例,非真实的接口地址filePath: '图片临时路径',name: 'uploadFile',	//自定义namesuccess(res) {console.log('res', res);	//经自己服务器存储后,将地址返回到客户端。},fail(err) {console.log('err', err);},complete(cp) {console.log(cp);}})
    

    获取昵称

  • 获取头像代码,将input中的“type”属性设置为‘nickname’,同时对"name"属性设定值,点击提交按钮后根据设置的name值获取对应的value。
  •  <form bindsubmit="getUserName"> <!--定义提交事件--><view class="cu-form-group"><view class="title">昵称:</view><input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32"></input></view><view class="up-bt"><button form-type="submit" role="button" aria-disabled="false" class="save-bt cu-btn block bg-blue margin-tb-sm lg">更新资料</button></view></form>
    

  • js部分
      getUserName(e) {console.log(e.detail.value.nickname);  //用户输入或者选择的昵称},
    

    获取昵称需要注意的地方

  • 用户输入或者选择昵称时,会异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。

http://www.ppmy.cn/news/629162.html

相关文章

关于微信小程序获取头像和昵称

不知道为什么微信一直对开发者获取&#xff1a;微信头像微信昵称。一直抱以限制态度&#xff0c;关于接口调用方法&#xff0c;也是一直在修改&#xff01; open-type“getUserInfo” 在2021年4月13日停用 wx.getUserInfo 在2021年4月28日停用 wx.getUserProfile 在2022年11月8…

微信小程序获取用户头像昵称

微信小程序获取头像昵称问题解决 文章目录 微信小程序获取头像昵称问题解决前言和传统方法问题描述解决方案实现效果 前言和传统方法 微信小程序是一种基于微信开发平台的轻应用&#xff0c;用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中&#xff0c;获取用户…

微信小程序获取用户头像和昵称(头像昵称填写能力)

开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦&#xff08;wx.getUserProfile&#xff0c;wx.getUserInfo都不行了&#xff09;&#xff0c;都要使用新版本的 【头像昵称填写能力】啦。 小程序用户头像昵称获取规则调整公告 获取头像 获取头像代…

微信小程序授权获取头像昵称的最新形式——头像昵称填写

微信小程序授权用户信息&#xff0c;不知道有没有人像我一样&#xff0c;从wx.getUserInfo到wx.getUserProfile再到头像昵称填写获取用户头像昵称全部尝试了一遍&#xff0c;怪就怪自己一开始没仔细看官方文档&#xff0c;没注意到小程序的官方公告&#xff0c;不多说了&#x…

Map集合-根据宠物昵称查找宠物

1 package collection;2 3 /**4 * 宠物类5 * @author 6 *7 */8 public class Pet {9 private

根据QQ号获取昵称和头像

# 开发时间&#xff1a;2021/2/2 22:28 # 开发工具&#xff1a;PyCharm # 开发者&#xff1a;GoTop import requests import redef getPhoto(qqCode):url f"http://q.qlogo.cn/headimg_dl?dst_uin{qqCode}&spec640&img_typejpg"headers {Referer: http://…

用JS获得QQ号码的昵称,头像,生日

&#xff08;转载请在开始注明来自赵亮的博客blog.csdn.net/theforever&#xff09; http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin指定QQ号码 将会返回下列内容&#xff1a; _Callback({"uin":查询的QQ号码,"qzone":1,"nickname&q…

Flutter系列(十)实现个人中心页

基础工程&#xff1a; Flutter系列&#xff08;四&#xff09;底部导航顶部导航图文列表完整代码_摸金青年v的博客-CSDN博客 一、前言 本文用flutter实现个人中心页布局&#xff0c;效果如下图&#xff1a; 二、使用的组件 1.颜色渐变&#xff1a;LinearGradient 线性渐变组…