微信小程序自动获取头像昵称
1、点击小程序信息选项
2、 这次我着重要讲的是,用户静默登录后怎么样展示给用户,我的方法是设置一个默认头像:
3、wxml:
4、使用open-data展示用户基本信息。
5、 而获取用户的昵称头像,只不过是给用户看起来正规的感觉,但除此之外,对于一些普通小程序来说,用处不是很大,毕竟不会有开发者靠昵称头像等数据来区分用户。(微信小程序自动获取头像昵称)。
6、请已使用wx.getUserProfile接口的小程序开发者和已使用wx.getUserInfo接口的插件开发者尽快适配
7、以下是原公告:
8、4/8
9、进入发现页面,点击小程序。
10、第四步打开小程序后,根据下图箭头所指,点击(...)图标。(微信小程序自动获取头像昵称)。
11、 下面是快速填写昵称能力:
12、我这里推荐大家使用云开发,因为云开发比较简单,当然大家如果会Java或者php开发,可以自己开发后台用于头像的上传和存储。
13、第五步在弹出的菜单栏中,根据下图箭头所指,点击(设置)图标。
14、你也可以体验下
15、点击右上角小圆点。
16、进入页面,点击下方的管理按钮。
17、点击要设置的小程序。
18、我最新做的小程序已经按照这个方式处理,真的是够了,以后不要再改了。
19、点击小圆点
20、8/8
21、点击小程序已获取的信息选项。
22、开发者可使用以下方式获取或展示用户信息:
23、小程序
24、js:
25、详情请看:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=login
26、点击管理按钮
27、wx.getUserInfo和wx.getUserProfile接口都能获取用户头像和昵称信息,唯一的区别,是wx.getUserInfo只要授权一次之后,以后都会自动获取用户的详细信息,而wx.getUserProfile则每次点击都需要授权。为什么这样调整:
28、到底是什么原因导致的呢,去小程序官方文档一看,又是官方改规则了。
29、回收wx.getUserProfile接口。
30、 头像快速填写接口的使用就像调用分享能力,需要用到button的open-type属性:
31、点击权限管理选项
32、第八步先找到(微信昵称、头像),接着根据下图箭头所指,点击左侧(-)号图标。
33、6/8
34、 不过我在5月份以后开发的小程序,都开始转为了静默登录,用户自己可以上传头像和用户名这种。
35、 这样,当用户进入小程序后,我们直接就进行静默登录,并将用户名和头像同用户openid一起存到数据库,用户在无需任何操作的情况下,就拥有了自己的账户,比以前点击一键登录还要无感,是不是非常nice!
36、既然官方老是变来变去,还不给我们可以长久使用的头像链接,那么我们就来自己存储用户头像,让这个头像是长久可以用的链接。所以我们这里需要自己开发后台存储头像。有以下几种方式用Java或者php开发后台,存储头像和昵称用云开发的云存储存储头像生成永久链接
37、点击后该头像昵称就会被删除掉,点击“+新建头像昵称”。
38、回收通过展示个人信息的能力。
39、官方为了补偿我们呢,给我们提供了一个新的方案。
40、第二步在(发现)页面中,根据下图箭头所指,点击(小程序)选项。
41、js逻辑代码
42、点击通知开发者删除
43、 之后将获取到的e.detail.avatarUrl上传,替换到用户数据库中的默认头像即可。
44、点击小程序
45、具体如下:
46、 这样也方便了用户快速填写,一些论坛,圈子小程序更好进行适配,以及像我这样的强迫症开发者,可以不用,但不能没有....
47、很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户。
48、其实官方又说一句话,对于低于1版本的小程序,还是可以使用授权接口的,也就是说,只要我们的基础库低于就可以接着获取用户头像的。
49、首先看下效果图
50、使用button组件,并将open-type指定为getUserInfo类型,获取用户基本信息。
51、效果如图所示:控制台之中打印出昵称,微信头像等个人信息。
52、详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
53、 之后用户点击确定后,即可用以前的方式获取input的值,传给后台,写到用户的数据库昵称字段中,完成!
54、当然这里是基于云开发的,如果大家对云开发不了解,可以去看石头哥录得云开发视频:https://www.bilibili.com/video/BV1x54y1s7pk
55、第七步在跳转的页面中,根据下图箭头所指,点击(管理)选项。
56、第三步根据下图箭头所指,找到并点击相关小程序。
57、效果如下
58、首先第一步先打开手机微信,接着根据下图箭头所指,点击(发现)图标。
59、3/8
60、wxml:
61、为优化用户体验,使用wx.getUserInfo接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用wx.getUserInfo接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。
62、wxss样式
63、wx.getUserInfo和wx.getUserProfile获取头像昵称能力将会被放弃
64、 关于login接口,大家可以看官方文档,相信大家程序也都已经写好了这个接口
65、根据相关法律法规,为进一步规范开发者调用用户信息相关接口或功能,保障用户合法权益,平台将对用户信息相关功能及接口进行调整,
66、开发者在未获取用户明示同意的情况下通过 组件 在小程序中展示用户个人信息,用户容易误以为自己的个人信息在未授权的情况下,被小程序获取。
67、2021年4月调整为通过wx.getUserProfile获取用户的头像、昵称等信息
68、5/8
69、 所以我的思路就是直接使用wx.login,在用户进入小程序的第一时间就进行静默登录,然后给用户一个默认的昵称和头像,用户可以选择修改/不修改,无论怎样,我们都可以用openid或后台数据表ID来区分用户。
70、小程序与小游戏获取用户信息相关接口不再返回用户性别及地区信息,这是因为:
71、 也就是使用wx.login接口实现,其实我们后台基本都是靠openid来区别用户,而获取openid的login接口无需用户确认,用户也感受不到,这就是静默登录。
72、 用户点击上方按钮即可调起快速填写界面,用户选择完图片后,onChooseAvatar方法将会收到头像回调
73、第六步进入(设置)页面后,根据下图箭头所指,点击(小程序已获取的信息)选项。
74、长按3秒钟后系统弹出“删除”按钮,点击“删除”按钮。
75、 好在这次新规其实在今年5月份就发布了,现在10月份才开始实施,留给了开发者足够的跑路时间。
76、7/8
77、2022年10月25日24时后将调整为使用「头像昵称填写能力」
78、在手机上打开微信授权登录界面,点击并长按“头像昵称”。
79、回收wx.getUserInfo接口直接弹出授权框,即用户在没有任何操作的情况直接弹出授权的登录方式将逐渐不再支持,为什么这么调整呢?
80、 并给用户一个默认昵称,比如游客、普通用户、SSSSVIP中P,反正随意设置,我设置的是用户+用户ID:
81、js:
82、点击上方的删除图标。
83、详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html
84、点击删除图标
85、 其实大部分人对于用户名和头像是不太在意的,如果你不是圈子,论坛小程序,只是普通工具,基本到这步也就可以了,当然,最好还是给用户加一个自定义功能,这样也有更好的用户体验,留住一部分强迫症的用户。
86、点击小程序
87、2/8
88、1/8
89、弹出选项窗口,点击个人信息与权限管理。
90、回收wx.getUserInfo接口,新增wx.getUserProfile接口。