微信小程序授权组件-存在官方更新

最新代码地址：https://git.imooc.com/coding-373/music-imooc-update-20210408

本次代码更新了小程序获取用户信息方式，详见小程序官方通知：《小程序登录、用户信息相关接口调整说明》

基础库 2.10.4 开始支持，但经测试发现2.10.4后的很多版本目前暂时还不支持新的API，所以建议大家把基础库的版本调整成最新版

该帖子中使用的调试基础库与开发工具均为写这篇帖子时的最新版：调试基础库版本为：2.16.0，开发工具版本1.05.2104012

课程中需要修改的代码：

• /miniprogram/components/login/login.wxml文件
  原有bindgetuserinfo修改为bindtap

<button class="login" bindtap="onGotUserInfo">获取微信授权信息</button>

• /miniprogram/components/login/login.js文件
  原有方式直接通过event获取用户信息，现在需要调用wx.getUserProfile()接口获取用户信息

onGotUserInfo() {
    wx.getUserProfile({
        desc: ‘用于发布信息时获取头像与昵称‘,
        success: (res) => {
            console.log(res)
            this.setData({
                modalShow: false
            })
            this.triggerEvent(‘loginsuccess‘, res.userInfo)
        },
        fail: (err) => {
            console.log(err)
            this.triggerEvent(‘loginfail‘)
        }
    })
}

wx.getUserProfile()方法每次请求都会弹出授权窗口，用户同意后返回 userInfo。旧的获取方式中，可以使用wx.getSetting()返回值中的res.authSetting[‘scope.userInfo‘]来判断该用户是否对该小程序授权过，然后通过wx.getUserInfo()静默获取用户信息。但新的获取方式中，wx.getSetting()返回值已不再包括scope.userInfo，所以无法知晓该用户是否对该小程序授权过。这样其实是在每次获取用户信息时，都需要用户知晓并确认。所以在该项目中，在需要用户信息的地方可以直接调用login授权组件通过wx.getUserProfile()来授权。

• /miniprogram/pages/blog/blog.js文件
  用户在发布博客时，调用blog.js中onPublish()方法，原有方式通过wx.getSetting()判断是否授权，现在方式需要直接弹出授权框

  // 发布功能
  onPublish() {
    this.setData({
      modalShow: true,
    })
    // 判断用户是否授权
    /* wx.getSetting({
      success: (res) => {
        console.log(res)
        if (res.authSetting[‘scope.userInfo‘]) {
          wx.getUserInfo({
            success: (res) => {
              // console.log(res)
              this.onLoginSuccess({
                detail: res.userInfo
              })
            }
          })
        } else {
          this.setData({
            modalShow: true,
          })
        }
      }
    }) */
  },
  

• /miniprogram/pages/blog-ctrl/blog-ctrl.js文件
  用户在发布博客时，调用blog-ctrl.js中onComment()方法，原有方式通过wx.getSetting()判断是否授权，现在方式需要直接弹出授权框

  onComment() {
      this.setData({
        loginShow: true,
      })
      // 判断用户是否授权
      /* wx.getSetting({
        success: (res) => {
          console.log(res)
          if (res.authSetting[‘scope.userInfo‘]) {
            wx.getUserInfo({
              success: (res) => {
                userInfo = res.userInfo
                // 显示评论弹出层
                this.setData({
                  modalShow: true,
                })
              }
            })
          } else {
            this.setData({
              loginShow: true,
            })
          }
        }
      }) */
    },

创建授权组件

组件调用组件，json照样写

 授权组件官方更新

https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801