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

最新代码地址：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