开发 | 拒绝打开就授权!小程序如何用新能力获取用户资料?

前几天,微信官方突然

简单来说,这次能力更新,为 button 组件的 open-type 属性赋予了新的有效值 getUserInfo(声明需要获取用户信息)

同时,官方还宣布,如果提审的小程序出现「启动即要求授权」和「强制要求授权」的情况,将会无法通过审核

那么,开发者应该如何适配新推出的获取用户资料方式呢?在新方式下,还需要注意一些什么呢?

知晓程序(微信号 zxcx0101)今天就来为你讲解,如何使用新方法获取用户资料。

关注「知晓程序」微信公众号,在后台回复「开发」,获取知晓程序小程序开发文章精选干货文章。

如何使用新方法获取用户资料?

我们以「虚荣数据库」小程序为例,来展示如何将旧的登录模式升级到新的模式。

在旧版的「虚荣数据库」中,小程序调用获取用户数据模式是这样的:处理登录、获取用户数据和注销行为的方法存储于小程序实例(app.js)中,便于实际页面调用。

大致步骤是这样的:

  1. 当小程序需要调取用户资料时,用户通过点击相应元素(不一定是按钮),触发事件;
  2. 相应页面实例收到点击事件后,调用小程序实例中的登录方法,进行资料读取;
  3. 小程序实例调用微信接口,获取用户资料;
  4. 成功获取资料,调用页面实例传入的回调函数;
  5. 页面实例通过回调函数,得知接口调用状态和用户资料,进行后续任务。

简单的代码如下:

在新的方式中,获取用户数据的实体,从 wx.getUserInfo() 函数,变成了按钮上的事件函数

使用新的方式获取用户信息,过程大致如下:

  1. 当用户点击绑定有页面实例获取用户数据方法的按钮后,微信向用户确认授权;
  2. 授权完成,微信调用按钮上绑定的方法,同时传入用户数据;
  3. 页面实例调用 app.js 中的登录函数,同时额外传入用户数据。

之后的事情,一切照旧。

厘清了新旧方法之间的差异,代码的修改思路就比较清晰了。

首先,我们将触发登录事件的元素,统一改为 button 元素,还要加上 open-type='getUserInfo' 参数。

同时,我们还要加入 bindgetuserinfo 参数,并在其中填入加入获取用户数据的页面实例方法。

然后,我们在相应事件中,将用户数据传入小程序实例的 login() 方法

接下来,只需要让 app.js 按新的方法处理用户数据,就可以了。

现在,来跑一下小程序——嗯,一切正常。

如何向下兼容旧版微信?

想必很多人在使用新方法的时候,都会担心旧版微信的兼容问题。

的确,这种登录方法在版本太老旧的微信上,是无法正常完成的

不过不用担心,我们可以使用微信提供的 wx.canIUse() 方法,来做到接口兼容性核查,在旧版微信上引导用户更新,或是选择使用旧方式获取用户信息。

我们先在按钮上,bindtap 来额外绑定一个兼容性检查事件

然后,我们在相应的函数中,进行兼容性检查:

在开发者工具中,将「基础库版本」调低,再次运行,可以看到小程序成功做出了判断。

在本例中,我们选择提示、引导用户更新微信;你也可以选择调用 wx.getUserInfo() 接口,直接获取用户资料。

想看完整的代码示例?关注微信公众号「知晓程序」,回复「源码」,即可获得利用新方式获取用户资料的源码 Demo。

还需要注意什么问题?

如果小程序需要判断不同用户,但不需要使用用户资料(头像、昵称等),只需调用 wx.login() 接口,再用自己的服务器调用接口,即可获取用户的 OpenID,无需用户额外授权

在新方式下,若用户首次拒绝授权,可以通过再次点击按钮重新请求授权。开发者只需提示用户需要授权即可,无需调用小程序权限开关界面,要求用户手动打开授权开关。

另外,转换到新方式时,可以将相应视觉元素用 button 打包,并为相应 button 设定无背景色、无边框等属性,达到隐藏触发按钮的目的,减少对界面的改动。

当然,如果你的小程序是刚启动就会要求用户授权的,那么你应该尽快修改小程序,使用新的按钮回调方式,获取用户的资料。

微信官方已经提示开发者,不应在小程序启动时直接向用户授权获取用户资料,小程序也不应该强制让用户授权访问用户资料。否则,小程序将不予通过审核。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾老师の博客

跨平台命令行抓包工具 gaze 介绍

1592
来自专栏程序员的知识天地

Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样

2841
来自专栏Java面试笔试题

在VMware上安装CentOS版本的Linux虚拟机

2.点击“编辑虚拟机设置”,选择“CD/DVD”,点击"使用ISO映像文件"在本地找到合适的镜像文件;

1582
来自专栏从零开始学自动化测试

appium+python自动化37-adb模拟点击事件(input tap)

appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是...

4283
来自专栏Python

vue之导入Bootstrap以及jQuery的两种方式

Vue引入bootstrap主要有两种方法 方法一:在main.js中引入 此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无...

4495
来自专栏一“技”之长

使用Express快速搭建前端项目框架 原

    Express是基于Node.js的前端Web开发框架,使用其可以简洁快速的创建健壮友好的API服务。在前端或移动端的开发过程中,可以借助Express...

1131
来自专栏从零开始学自动化测试

Fiddler抓包3-查看get与post请求

前言 前面两篇关于Fiddler抓包的一些基本配置,配置完之后就可以抓到我们想要的数据了,接下来就是如何去分析这些数据。 本篇以博客园的请求为例,简单分析get...

4136
来自专栏开源项目

项目推荐 | 遵循es6模块规范的前端模块管理工具

前言 如果你想使用ES6模块语法管理代码,又不想使用webpack这个重型工具; 如果你只是想简简单单的写个js、html、css,不需要typescript、...

3537
来自专栏Linyb极客之路

网络编程之抓包工具Fiddler入门

1)要使用Fiddler进行抓包,首先需要确保Capture Traffic是开启的(安装后是默认开启的),勾选File->Capture Traffic,也可...

2203
来自专栏极乐技术社区

微信小程序开发心得第二章:千里传音(模板消息)

今天分享一篇关于消息模板的简易教程。 老规矩先把官方的定义再讲一下,消息模板是基于微信的通知渠道,为我们开发者提供了触发模板消息的能力,以便实现服务的闭环和更好...

28611

扫码关注云+社区

领取腾讯云代金券