开放、分享、自由、中立、公平网吧论坛公众号APP(送下载币任务) 微信公众号

天下网吧论坛

 找回密码
 注册账号

QQ登录

只需一步,快速开始

用微信登录

扫一扫,用微信登录

查看: 1926|回复: 0
收起左侧

[发布源码] wx.getUserInfo旧版升级到wx.getUserProfile最佳实践

[复制链接]
发表于 2021-4-9 10:23:30 | 显示全部楼层 |阅读模式 发布于:福建省福州市鼓楼区 联通

名为最佳,实则不敢自称为最佳,因为代码永远没有最佳,只有最佳。小生不才,很少分享代码,因为代码可以实现的方法万万千千,同一个功能,不同的各种场景使用哪种代码方式也是各有不同。所以代码只有适合自己的,没有敢自称最佳的代码。
但是,一般来讲实现的逻辑有最好的。实现的逻辑思维比写代码重要得多,今天分享的其实是一个升级的逻辑思路。优雅简便的升级逻辑思路。大家可以参考:
做微信小程序的老铁都知道4.13号开始wx.getUserProfile要正式上线了,很多老的项目需要修改登陆逻辑,如何最简单的,代码改动最小的方式修改代码来实现新旧版本兼容,优雅的完成升级呢?一起来看看下面的一个方案:


先简单介绍下这个升级方案的逻辑吧:
wxml文件改造:
新增个getUserProfile的微信登陆入口。使用canIUseGetUserProfile来判断是使用旧版getUserInfo还是新的getUserProfile方式获取用户信息。
JS改造:
1、把旧的登陆逻辑代码单独出来一个doLogin方法,同时加以改造,新增个proFileUserInfo参数接收已经通过getUserProfile获取到的用户信息。如果这个参数有值的情况下优先使用这里面的已经获得到用户信息!
2、新增个登陆中间件方法wxLogin方法来接收wxml里的微信登陆按钮bindtap事件。并通过判断是canIUseGetUserProfile的值来调用getUserProfile还是getUserInfo方式来获取用户信息,再传递给doLogin方法。


下面是部分代码参考:


wxml:

  1. <button class="weui-btn txwb-main-bg" type="warn" bindtap="wxLogin" wx:if="{{canIUseGetUserProfile}}">  <span class="iconfont icon-txwb-weixin" style="margin-right:10rpx;"></span>
  2. 微信授权登陆
  3. </button>
  4. <button class="weui-btn txwb-main-bg" type="warn" open-type='getUserInfo' bindgetuserinfo="wxLogin" wx:else>  <span class="iconfont icon-txwb-weixin" style="margin-right:10rpx;"></span>  微信授权登陆
  5. </button>
复制代码


js:

  1. data: {
  2.         ....
  3.         canIUseGetUserProfile: false,
  4.         ....
  5. }

  6. onLoad(options){
  7.         ...
  8.         if (wx.getUserProfile) {
  9.                 this.setData({ canIUseGetUserProfile: true });
  10.         }
  11.         ...
  12. }

  13. wxLogin(e){//新增的一个登陆中间方法  
  14.         var that = this;
  15.         wx.showLoading({
  16.                 title: '正在登陆..', //提示的内容,
  17.                 mask: true, //显示透明蒙层,防止触摸穿透,
  18.                 success: res => { }
  19.         });
  20.         if (this.data.canIUseGetUserProfile) {
  21.                 wx.getUserProfile({
  22.                         desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  23.                         success: (res) => {
  24.                                 that.doLogin(e, res.userInfo);
  25.                         },
  26.                         fail: res => {
  27.                                 console.log("logwxloginres", res);
  28.                                 wx.hideLoading();
  29.                         }
  30.                 });
  31.         } else {
  32.                 that.doLogin(e);
  33.         }
  34. }

  35. doLogin(e, proFileUserInfo = null){//旧的登陆代码
  36.         ...
  37.         //原来的登陆代码逻辑,在旧的getUserInfo代码处新增判断:
  38.         wx.getUserInfo({
  39.                 success: function (res) {
  40.                         /* begin 下面3行是新增的判断,代表userInfo已经通过wx.getUserProfile获取过获取过*/
  41.                         if (proFileUserInfo) {
  42.                                 res.userInfo = proFileUserInfo;
  43.                         }
  44.                         /* end */
  45.                 }
  46.         });
  47.         ...
  48. }
复制代码

赶紧来设置你的签名->玩转天下网吧论坛签名

您需要登录后才可以回帖 登录 | 注册账号   扫一扫,用微信登录

本版积分规则

下载天下网吧手机APP,直接一键登录
您尚未登录,请登陆后浏览更精彩内容!
 注册账号
找回密码

手机版|纯文字版|联系我们|免责声明|网吧论坛 ( __ICP号__ )

GMT+8, 2024-3-29 16:01 , Processed in 1.325949 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表