提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

2021年啦，微信小程序最新登录以及授权方法解析，给新手小白的~

接口 程序
2023-04-18 14:43:32 时间

有的小伙伴在做微信小程序时突然发现网上的授权方法不太统一，翻看文档发现，噢，原来是有改动！这个时候有的友友就很生气，人家都写完了怎么说改就改，还得重新去兼容，没办法，人在屋檐下不得不低头，这里我就把授权部分整理一下方便大家理解！

一：小程序登录、用户信息相关接口

老规矩，我们先放个官方公告康康—>小程序登录、用户信息相关接口调整说明 反正就是由于一些不是我们能左右的原因，调用wx.getUserInfo或<button open- type="getUserInfo"/>以后就不会再弹出授权弹窗啦，所以我们在做登录授权的时候需要进行兼容或者直接使用文档提供的wx.getUserProfile接口，我把官方提供的demo放在下面，欢迎自取~

1.兼容写法（文档在此）：

wxml里：

 <view class="userinfo">
    <!-- 这里的hasUserInfo主要是为了判断用户是否已经授权，如果没有授权过就展示获取头像昵称按钮 -->
    <block wx:if="{{!hasUserInfo}}">
      <!--canIUseGetUserProfile判断当前版本是否支持wx.getUserProfile方法-->
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
​
    <!--用户已经授权过直接展示头像和用户名，大家实际开发中这里可以换成别的操作-->
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
 </view>

js里：

Page({
  data: {
    userInfo: {},//默认为空，但是进入页面我们需要先请求后台接口判断用户是否已经授权过信息，没有获取到的情况下我们需要提醒新用户授权
    hasUserInfo: false,//判断是否展示授权按钮/授权弹窗或者跳到授权页面
    canIUseGetUserProfile: false,//是否支持wx.getUserProfile方法
  },
  onLoad() {
    //进入页面判断是否可以使用wx.getUserProfile
    if (wx.canIUse('getUserProfile')) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})
2.有的友友说：“我就不想兼容怎么办？”，那你就把上面那一堆判断都给删了，直接
 <button bindtap="getUserProfile"> 获取头像昵称 </button>
 getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料', 
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },

获取到的userInfo包含：

  • nickName：用户昵称
  • gender：性别，1-男 2-女 0-未知
  • avatarUrl：用户头像
  • country：国家
  • province：省份
  • city：城市
  • language：显示 country，province，city 所用的语言， en-英文 zh_CN-简体中文 zh_TW-繁体中文 (注意：这里获取到的国家省份城市不一定是用户的真实地址，用户的收货地址需要用户手动填写或者调用wx.chooseAddress，获取用户当前地理位置需要调用wx.getLocation)

二：获取用户手机号

获取用户手机号需要通过点击button按钮来触发（文档），因为我们获取到的是加密的信息，所以我们需要把参数传给后台进行解密，然后就可以拿到手机号了！ wxml里：

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

js里：

Page({
  getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)//加密算法的初始向量
    console.log(e.detail.encryptedData)//包括敏感数据在内的完整用户信息的加密数据
  }
})

这是最基本的demo，但是实际项目中比较繁琐，我直接放js代码，大家根据自己的需求修改使用就好啦

 getPhoneNumber: function (e) {
    var that = this;
    //检查session-key是否过期
    wx.checkSession({
      success() {
        wx.login({
          success: res => {
            wx.request({
              url: '写你自己的接口地址/' + res.code,
              method: 'GET',
              header: {
                'content-type': 'application/xml'
              },
              success: function (res) {
                if (res.data.code == 200) {
                  //是否允许获取手机号
                  if (e.detail.errMsg == "getPhoneNumber:ok") {
                    //这里是因为后台让我把参数拼接在url上给他，大家最好用data来传，别学我（气哭）
                    wx.request({
                      url: '写自己的接口地址?enData=' + e.detail.encryptedData + '&iv=' + e.detail.iv + '&sessionKey=' + res.data.data.session_key,
                      method: "POST",
                      success: function (res) {
                        if (res.data.code == 200) {
                          console.log(res.data.data.phone);
                        }
                      }
                    })
                  }
                }
              }
            })
          }
        })
      }
    })
  },

关于为啥我要套这么多层，细心的友友们在文档里会看到：

相关文章