小程序•小故事(6)——微信登录能力优化

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

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

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

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

1

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

我们提供了 wx.login 和 wx.getUserInfo 接口，用于获取用户的 openID 和基本信息。

推出这两个接口的初衷是希望：当用户使用小程序时，只有访问到真正需要登录的页面，才需要授权并登录。

但在实际应用中，我们发现很多开发者在打开小程序时直接弹出授权框，如果用户点击拒绝授权，无法使用小程序。

在没有任何提示和背景的情况下，直接弹框想要获得用户信息授权，用户脑子里可能会闪过几个哲学问题：

你是谁？

我在哪里？

我为什么要同意？

……

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

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

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

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

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

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

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

2

如何设计登录流程？

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

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

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

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

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

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

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

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

为什么需要我授权？

需要我什么信息？

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

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

3

简单的开发建议

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、开放数据域下的展示用户信息

- END -

第五期回顾：小程序•小故事(5)——小程序插件

第四期回顾：小程序•小故事(4)——获取用户信息

第三期回顾：小程序•小故事(3)——更新机制

第二期回顾：小程序•小故事(2)——代码片段

第一期回顾：小程序•小故事(1)——分包加载

如果大家有想了解的小程序相关能力的故事，欢迎在评论区留言，我们后续会考虑将这些能力背后的故事分期分享给大家。