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

news/2024/10/31 6:18:56/

微信小程序授权用户信息,不知道有没有人像我一样,从wx.getUserInfowx.getUserProfile再到头像昵称填写获取用户头像昵称全部尝试了一遍,在这里插入图片描述怪就怪自己一开始没仔细看官方文档,没注意到小程序的官方公告,不多说了,整理一下最新调整的头像昵称填写这种用户信息授权的形式吧。

官方公告调整背景

在实践中发现有部分小程序,在用户刚打开小程序时就要求收集用户的微信昵称头像,或者在支付前等不合理路径上要求授权。如果用户拒绝授权,则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下,用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况,作出如下调整。
在这里插入图片描述
在这里插入图片描述

头像昵称填写效果

在这里插入图片描述在这里插入图片描述在这里插入图片描述

头像昵称填写具体实现

<!--index.wxml-->
<view data-weui-theme="{{theme}}"><button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image></button> <form catchsubmit="formSubmit"><view class="row"><view class="text1">昵称:</view><input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/></view><button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button></form>
</view>
/* index.wxss  参考 */ 
.avatar-wrapper {padding: 0;width: 56px !important;border-radius: 8px;margin-top: 40px;margin-bottom: 40px;background-color: #fff;
}.avatar {display: block;width: 56px;height: 56px;
}.container {display: flex;
}
.row{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;height: 80rpx;padding-left: 20rpx;
}
.text1{flex: 2;
}
.weui-input{flex: 6;
}
// index.js
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({data: {avatarUrl: defaultAvatarUrl,theme: wx.getSystemInfoSync().theme,},onLoad() {wx.onThemeChange((result) => {this.setData({theme: result.theme})})},onChooseAvatar(e) {const { avatarUrl } = e.detail this.setData({avatarUrl,})},formSubmit(e){console.log('昵称:',e.detail.value.nickname)}
})

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar 事件。

昵称填写

需要将 input 组件 type 的值设置为 nickname,当用户在此 input 进行输入时,键盘上方会展示微信昵称。
从基础库2.24.4版本起,在onBlur事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-typesubmit的button 组件收集用户输入的内容。

注:

  1. input进行输入昵称时,只有真机演示时键盘上方才会展示微信昵称;
  2. 微信异步对用户输入内容进行安全检测,需要调用服务端接口msgSecCheck,具体使用见官网 文本内容安全识别

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

相关文章

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 线性渐变组…

前端position使用方法

position 是一个 CSS 属性,用于控制元素的定位方式。它可以设置以下几个值: static:默认值,元素按照正常的文档流进行布局,不进行定位。relative:相对定位,元素会相对于其正常位置进行偏移,但仍然占据原来的空间。absolute:绝对定位,元素会脱离正常文档流,相对于其最…

电脑很大,笔记本电脑响声很大怎么回事

大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。 以风扇为例&#xff0c;其笔记本电脑响声很大的原因有&#xff1a; 1、使用时间过长&#xff0c;风扇的线圈老化&#xff0c;缺油。 2、由于使用不当&#xff0c;受到撞击或震动导致…

C++组件扩展实现:函数特性function_traits

#include<functional> #include<tuple> #include<type_traits> #include<iostream> using namespace std;template<typename T> struct function_traits;//处理普通函数 template<typename RET,typename ...ARGS> struct function_traits&…

FFmpeg音视频开发知识点(二)

系列文章目录 FFmpeg音视频开发知识点&#xff08;一&#xff09; 文章目录 系列文章目录前言一、AAC音频编码1. ffmpeg编译第三方的libfdk_aac2. S16重采样FLTP 二、AAC音频解码总结 前言 该篇讲解一下&#xff0c;音频编解码中的难点&#xff0c;以及开发过程中遇到问题&am…