洞察了解如何通过开放银行应用提升金融服务效率与用户体验
1521
2022-12-11
本文目录一览:
1、open-data/open-data :只是简单的获取头像、用户名用于显示
其中,type="userAvatarUrl"是获取用户头像,type="userNickName"是获取用户昵称,具体使用详情查看 小程序开发文档 ,此方法仅用于直接简单的展示用户信息。
2、使用 button open-type="getUserInfo"获取用户信息
在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail 回调。
在用户已授权的情况下调用此接口,可成功获取用户信息。
1、在项目首页直接调用getUserInfo方法,若从未授权过,跳转到授权页面引导用户手动授权
需注意: bindgetuserinfo="onGetUserInfo"
用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效。
所以,不再需要写设置页提示框以及对应的设置页面,好方便啊!!!
公司业务开展,最近完成了一个微信小程序的开发。场景是这样,同一微信开放平台下拥有相同主体的APP和微信小程序来完成同样的业务,用户进入app或者微信小程序时必须获取用户的unionid来确认当前的用户身份,完成登录。小程序“获取用户信息”api(getUserInfo)的调用方式和之前相比有了较大更新,优雅的实现用户授权和登录非常重要,以下是我在微信小程序授权登录相关流程在开发时候的实现思路和总结,分享如下。
说明:
你可以简单的理解为
如果开发者在多个移动应用、网站应用和公众帐号之间有统一用户账号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,便可利用UnionID机制来满足上述需求。
用户在开放平台的唯一标识符
你可以简单的理解为:
微信针对不同的用户在不同的应用下都有唯一的一个openId, 但是要想确定用户是不是同一个用户,就需要靠unionid来区分。一般自己的后台都会有自己的一个用户表,每个用户有不同的userid。也就是说同一个用户在同一个微信开放平台下的相同主体的应用对应着相同的userid,unionid以及不同的openid。所以在用户登录进来的时候,我们只能靠微信返回给我们的unionid去判断是不是同一个用户,在去关联我们的用户表,拿到对应的userid。
绑定了开发者帐号的小程序,可以通过下面3种途径获取UnionID。
当用户满足条件2和3时,开发者可以直接通过wx.login获取到该用户的unionid, 否则必须调用接口 wx.getUserInfo ,额外需要注意的事就是妥善处理用户拒绝授权的情况。
在真实的业务场景中,我们希望,用户进入小程序时,未登录情况下可以正常浏览商品,对小程序有个基本的认知,不要直接弹出框要求用户授权,否则会干扰用户,导致新用户的流失,当用户需要使用一些高级功能和场景,这个时候再去要求用户授权,这样用户授权的几率会大大提高。
将登录的逻辑封装ajax
流程:
封装的意义
不再关注当前接口是否需要登录,用户是否已授权,所有请求直接调用 ajax() ,在必要的时候完成一切登录以及授权流程。小程序入口页面增加,业务拓展的时候,你只需要专注于业务实现。
参考资料
一个很常用的功能,但是我还是发现有一些需要注意的地方在里面,简单记录一下。
第一个问题就是这个 button 组件需要添加 open-type 属性,并指定为 getUserInfo 类型,来获取用户基本信息。还有另外一种做法,具体可以参考 官方文档的说明 。
放一个动图哈哈哈
js 部分就是响应点击事件,使用 api wx.getUserInfo(Object object)
获取用户信息,注意传递给 wx.getUserInfo 的是一个字典其中包含了两个函数分别作为成功和失败的回调函数(callback function)
注意 this 的指代对象发生了变化,最开始的this是指代 Page() 构造出来的对象,在函数里面使用 this 会说未指定,所以我们使用了 that 承接一下,这也算传统艺能咯。
另外一点:获取用户信息时会自动弹出一个对话框问用户是否提供信息,这个弹窗只弹出一次,如果用户点击了拒绝后来又想改为允许,可以使用 wx.openSetting({})
除了可以获取用户的昵称之外还有很多信息可以得到,还有一个比较常用的就是用户头像了也就是 res.userInfoavatarUrl 。
微信小程序对于用户信息获取进行了接口调整。调用 wx.getUserInfo(Object object) 不会再由弹窗授权提示。在已授权时,可以直接获取用户信息;否则则直接进入 fail 回调函数。
用户的授权状态可以用 wx.getSetting() 接口的请求的结果
res.authSetting['scope.userInfo'] 来判断。
那么在接口调整后,再进行授权登录则需要通过 open-data 来实现。
注:如果用户微信版本不支持open-data,需要提示用户升级。这次接口的调整实际上使得按一次弹窗中的授权按钮即可授权的操作变成了需要按两次,并且需要额外设计授权页面或者在主页先进行一次弹窗引导用户授权。实际上更加繁琐。
微信小程序 在获取用户信息的时候 有特定的要求 :
button 按钮中open-type有两种方式获取用户的信息:getUserInfo/getPhoneNumber
下面两种信息就是直接展示用户头像和用户微信名但不可获取:
下面我们主要介绍获取微信绑定的手机号的问题:(MPvue模板)
bindGetUserInfo函数中的Even里面包好detail里面会有三个参数:
返回参数的话是需要解密才能使用的,在这里介绍一下第三种使用云调用直接获取开放数据的方式(前端自己解密不需要调用后端接口了~):
1、首先你的微信小程序是需要开通云开发的。(否则的话在你获取星系以后没回参数里面是没有cloudID的)。
2、在云开发里面选择云函数然后新建云函数(注意新建云函数的名字下面需要用到的)
3、接下就是在获取用户信息以后调用函数解密:(mp vue 使用的话需要wx.clould.init()初始化 原生的可以忽略直接调用)
4、success :callback里面res 里面包含了当前微信账号大量信息:如手机账号(res.result.weRunData.data.phoneNumber)
5、剩下的就简单多了 可以拿着手机号码进行信任登陆了 !
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~