微信小程序授权 获取用户信息

小程序在18年4月25日做了一次更新,不再支持直接弹出授权信息框

具体代码请看这里:  >>       获取用户信息(用户信息、获取unionId、openId)请移步到这里

 

用户打开小程序时,直接弹框获取用户信息授权,可能会立马懵圈:

 

你是谁?

我在哪里?

我为什么要同意?……

 

 

相当一部分用户下意识会拒绝授权——这样不合理的登录流程既造成了用户的困扰,还流失了用户。

 

用户通过小程序可以快速获取服务,因此在访问小程序的第一个页面非常重要

 

小程序和小游戏内的用户登录,我们推荐使用以下两种方式获取用户信息:

 

▷ 按钮组件的登录方式,用户主动点击按钮可以拉起用户授权弹框,获取用户头像、昵称等信息;

 

▷ 在不获取用户信息的情况下,可展示用户头像昵称

 

也提醒大家:

 

用户在没有任何操作的情况直接弹出授权的登录方式将逐渐不再支持,受影响的有 wx.getUserInfo 接口,以及 wx.authorize 接口传入 scope="scope.userInfo" 的情况。

 

为什么平台要做接口调整?

 

小程序提供wx.login 和 wx.getUserInfo 接口,用于获取用户的 openID 和基本信息

 

推出这两个接口的初衷是希望:

 

当用户使用小程序时,只有访问到真正需要登录的页面,才需要授权并登录。

 

对于一个互联网产品而言,第一个页面决定了用户对这个产品的认知,用户会选择是否继续使用这个产品。

 

一个优秀的互联网产品,能够给用户留下一个好的第一印象,用户可以快速了解你的产品,接收到你想要传递的服务信息,从而产生相应的操作行为。

 

一个优秀的小程序会吸引用户在小程序里进行探索,完成你期望他们去做的事,比如会员注册、商品购买等。

 

试想一下如果一个品牌的商品官网,一进入要求用户登录才能查看产品信息是什么感觉呢?

 

因此良好的用户登录体验非常重要。

 

 

如何设计登录流程?

 

用户打开小程序时,看第一眼的时候,开发者需要专注以下两个目标:

 

▷ 精准快速地传达产品理念,开发者要让用户能够快速了解自己的产品和服务;

 

▷ 将用户流量进行转化,让用户能方便操作或者交易。

 

一般而言,用户打开小程序后看到的第一个页面,先不要直接弹出授权框,第一个页面可以包含以下内容:

 

▷ 展示你的小程序功能(如产品、服务、活动等) ,让用户清晰地知道小程序是做什么用的,这些内容可以是你的精选内容;

 

▷ 激发用户的探索欲,通过描述或者图片吸引用户注意力;

 

▷ 按照自己的产品目标,给用户提供清晰明确的下一步操作(查看详情、购买等)。

 

如果某些特殊小程序在使用前一定需要用户登录,或者已经进行到需要用户登录的操作时,可以将 button 组件(其中 open-type 属性指定为 getUserInfo)放置到页面中,页面上可以大致说明以下要点:

 

为什么需要我授权?

需要我什么信息?

授权后我得到什么好处呢?

 

接下来在页面上放置一个明显的登录按钮, 建议这个页面上不要有额外的点击区域,以免分散用户注意力,让用户专注于登录这件事情。

 

简单的开发建议

1

当用户打开小程序时访问第一个页面时,先通过 wx.login,获取用户 openID 。这时无需弹框授权,开发者拿到 openID 可以建立自身的帐号 ID。

2

在第一步中,拿到 openID 后,判断是新用户还是老用户。如果是老用户,可以直接登录;如果是新用户,可先在小程序首页展示你的信息服务,让用户对这个小程序有大概的了解,再引导用户进行下一步的操作。

3

当需要获取用户头像昵称的时候,对用户展示一个登录页面,这个页面只有一个最重要的操作,引导用户进行登录。

 

小程序中,在页面中加入一个 button 按钮,并将 open-type 属性设置为 getUserInfo 。

 

以小程序为例:

 

<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">微信登录</button>

 

对于功能较简单的小程序或者小游戏而言,如果不是必须要获得用户的头像昵称,建议可先通过wx.login 拿到 openID 后,使用 open-data 方式或者开放数据域的方式展示用户信息,整个过程都无需用户授权。

 

Tips:

 

1、在用户登录后,开发者需要存储用户的 unionID,而且建议只把 unionID 作为互通的用户标识,不要直接使用 unionID 作为用户 ID。因为一旦小程序迁移到其他的开放平台下,unionID 是会改变的,而 openID 是不变的。

 

2、用 button 组件的方式获得用户授权后,调用 wx.getUserInfo 就可以直接获取用户信息。这个的意义在于获取过一次之后,用户有可能改昵称头像,因此为了及时同步,最好是定期获取用户信息。

 

这里两个小提示:

 

▷ 定期使用 wx.getUserInfo 获取并更新用户的信息;

 

 如果用户授权过一次之后,又在设置中关掉了授权(或者本地删除了小程序),那这时再调用 wx.getUserInfo 也是不会成功的,需要重新获得授权

 

相关开发文档参考:

 

▷ 小程序

1、小程序wx.login

2、button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息

3、open-data 展示用户基本信息

 

▷ 小游戏

1、小游戏wx.login

2、用户信息按钮 UserInfoButton

3、开放数据域下的展示用户信息

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/41074.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序之获取用户位置权限

微信小程序获取用户当前位置有三个方式&#xff1a; 1. wx.getLocation 注意&#xff1a; 先要在app.json里配置permission&#xff1a; 不然就会出现以下提示&#xff08;本地测试环境&#xff09;&#xff1a; 配置如下&#xff1a; "permission": {"scope…

发布微信小程序获取收集用户信息权限

前言 在发布微信小程序的时候我们经常会遇到审核不通过的情况&#xff0c;其中一种特别让我头疼就是说小程序收集、使用和储存用户信息。不给予通过。 但是他们的接口又不能提供这个功能&#xff0c;并且老是改动&#xff0c;真的特别的麻烦加无语。有时候审核偷一下懒&#xf…

微信小程序授权登录wx.getUserProfile获取不到昵称及头像解决方案

半年前做的个小程序&#xff0c;更新了二个文字&#xff0c;重新上传审核通过&#xff0c;悲剧了&#xff0c;新用户的昵称全部变为微信用户&#xff0c;头像全部变为默认头像&#xff0c;查了半天代码没找到原因&#xff0c;相当头大&#xff0c;搜了一下文档&#xff0c;尴尬…

小程序中的权限设计

日常我们开发小程序的时候,经常需要考虑权限如何设计,比如在我的页面,管理员可以看到一些菜单,而普通用户可以看到另外一些菜单。那如何设计这种带权限的功能呢?本文就以低代码工具为例,看看低代码中是如何设计小程序的权限的。 1 权限表设计 在通用的RBAC模型中,角色…

chatgpt赋能python:Python画出物体的运动轨迹

Python画出物体的运动轨迹 Python是一种很流行的编程语言&#xff0c;主要用于数据处理、科学计算以及图形绘制。在这篇文章中&#xff0c;我们将探讨如何使用Python画出物体的运动轨迹。 介绍 物体的运动轨迹通常是我们需要关注的问题。当我们在研究物理、机械、运动学、航…

chatgpt赋能python:Python画三维轨迹图:一个引人注目的可视化工具

Python画三维轨迹图&#xff1a;一个引人注目的可视化工具 Python是一种十分适合数据分析及科学计算的编程语言&#xff0c;它的可视化功能非常强大&#xff0c;其中最为出色的一点就是画三维轨迹图。这种图表的本质是一种描绘物体运动轨迹的可视化效果&#xff0c;它可以直观…

英文面试常见问题及回答汇总

今天给大家奉上英文面试常见问题及回答的合集&#xff0c;英语面试主要就是学习如何用英语回答面试常见问题&#xff0c;英文面试常见问题说来说去其实重要的就那么几个&#xff0c;所以今天分享的英文面试常见问题及回答大家只要知道其套路&#xff0c;然后灵活运用就行了。 常…

我的性格类型—— INFP(哲学家型人格 )

测试日期&#xff1a;2019/6/9 基本描述 INFP (Introverted Feeling with Intuition)代表人物&#xff1a;卢梭 语录&#xff1a;虽然我的心既傲慢又温柔&#xff0c;我的性格柔弱&#xff0c;然而&#xff0c;我是不可战胜的。 才储分析&#xff1a;您的性格类型倾向为“…

什么是MBTI,16种人格类型详解

MBTI是Myers-Briggs Type Indicator的缩写&#xff0c;是一种经典的人格类型测评工具&#xff0c;通过对个体心理偏好的测试和分析。 MBTI人格理论认为&#xff0c;人类的人格特征可以从四个角度进行分析&#xff1a;认知功能、信息获取、决策方式和生活方式。每个角度都有两个…

什么是i人,mbti中的i型人格是怎么样的

i人是MBTI总的I型人格&#xff0c;也就是内向型人格&#xff08;Introversion&#xff09;&#xff0c;在MBTI中是其中一个维度。以下是i人的一些常见特征和倾向&#xff1a; 1、内向和独处&#xff1a;I型人格更倾向于独自思考和独处。他们通常从独立的思考和内省中获取精力和…

MBTI性格测试中的 INTP 型人格

摘要&#xff1a;熟悉心理学的朋友&#xff0c;对mbti都不会陌生。而intp&#xff0c;可以说是一种牌玩得好就是天才&#xff0c;玩得不好境遇会十分惨&#xff0c;两极分化很严重的类型。今天我们来讲讲intp型人格都有哪些特征吧。 先来看看intp类型的人一般的倾向性。 MBTI性…

AI风范,院士点赞丨北京人工智能峰会暨AI金雁奖颁奖典礼成功举办,实在智能再获AI金雁奖

4月14日&#xff0c;由中国电子商会人工智能委员会主办&#xff0c;中国创业者俱乐部、北京集智未来人工智能产业创新基地联合主办的“2023北京人工智能峰会暨AI金雁奖颁奖典礼”举行&#xff0c;汇聚了人工智能各领域的产学研专家、院士、人工智能企业代表近300人&#xff0c;…

危!这回,我真的失业了!

因公众号更改推送规则&#xff0c;请点“在看”并加“星标”第一时间获取精彩技术分享 点击关注#互联网架构师公众号&#xff0c;领取架构师全套资料 都在这里 0、2T架构师学习资料干货分 上一篇&#xff1a;赞&#xff01;ChatGPT能接入微信了&#xff01; 大家好&#xff0c;…

智能化时代的软件工程:拥抱大模型的正确姿势

智能化时代 Foundation Model Software Engineering 软件工程 以ChatGPT为代表的大模型技术对于包括软件工程在内的很多领域都带来了巨大的冲击&#xff0c;也引发了广泛的焦虑。为了在迷雾中看清一点方向&#xff0c;近期我们基于各种技术文献和实践分享以及我们自身的一些初步…

Apple Watch 发布 | 历史上的今天

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 4 月 24 日&#xff0c;中国航天日&#xff0c;在 1970 年的今天&#xff0c;中国第一颗卫星“东方红一号”发射升空。“东方红一号”是我国于 1970 年 4 月 24…

若依前后端分离 使用富文本编辑器 wangEditor

用于 Vue React | wangEditor 组件下载地址 有视频教程 vue版本 2的使用 进入项目cmd输入安装命令 yarn add wangeditor/editor 新建一个文件夹 新建一个文件名字为MyEditor <template><div><div><div class"header-height"><el-bu…

智能AI伪原创工具文章在线生成源码

​ 今天我将分享一个更有趣的PHP源码&#xff0c;您可以直接使文章在线伪原创&#xff0c;有需要的朋友可以尝试 它。 所有网站管理员朋友都必须对网站的原始内容感到头疼。 作为草根网站管理员&#xff0c;您不可能自己撰写原创文章。 当然&#xff0c;我并不是说您不能写一个…

百度编辑器ueditor的简单使用

最近刚被分配了以个消息发布的任务&#xff0c;其中用到了富文本编辑器。以前也用过&#xff0c;不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的。 其实看ueditor功能很强大&#xff0c;不过百度的设计还是很不错的。只需要稍微配置一下就可以用了。 首先下载到…

只需2步uniapp集成富文本编辑器wangEditor4

官网文档地址 首先安装 npm i wangeditor --save 使用 <div id"div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>import E from wangeditoronReady() {this.initEditor() },/*** 初始化富文本编辑器*/ initEdi…

tui-editor富文本编辑器组件

tui-editor富文本编辑器 记录项目中使用富文本编辑器 安装 npm init & npm install --save tui-editor创建组件文档 tuieditor 在 default-options.js中 // doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditorexport default {minH…