【20210408】小程序获取用户信息方式修改

Question

最新代码地址：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,
            })
          }
        }
      }) */
    },
  

Answer 1

提问者 谢成 2021-04-08 17:32:30

请大家认真查看更新内容

• 月光风灵 #1

  老师有没有什么判断条件啊，每次都要弹窗授权才能评论吗

• qq_慕后端4254339 #2

  老师，我怎么改完后点评论没反应了

• qq_慕后端4254339 #3

  打扰了，找到原因了

点开查看后面4条评论

Answer 2

慕粉2337581 2022-03-09 22:51:29

用了新方式以后每次都需要授权，这样是正常的吗

Answer 3

乌拉乌拉乌拉乌拉 2021-05-08 14:43:53

老师我想问一下你是江大毕业的吗？和我认识的一个好像

• 提问者 谢成 #1

  可能是撞脸了。。。我大学是在哈尔滨读的

Answer 4

sjdka 2021-05-04 15:38:57

老师，这样改完之后每次授权完之后那个授权弹出框并不会自动收起，需要手动关闭，如何解决？

• 提问者 谢成 #1

  请检查下modalShow的状态是否正确。

Answer 5

幕布斯6331728 2021-05-02 20:11:20

老师，更改之后消息模板并没有推送是为什么呀

• 提问者 谢成 #1

  模板消息已经被废弃了，消息推送需要使用订阅消息，具体使用方式可以参考课程《11-3》这一小节的视频。

Answer 6

慕UI5549312 2021-04-28 12:06:16

谢老师您好，我对官方的修改理解不深，觉得每次都弹窗太烦了。请问如果我使用本地存储和数据库一起来存放用户的授权信息，会有什么潜在问题吗？我搜了搜好像很少有人这么存，流程如附图。

• 提问者 谢成 #1

  1、需要控制好db和stroage的同步问题
  2、我们并不知道用户什么时候修改自己的微信头像和昵称，如果修改了的话，db和stroage保存的就会是旧的信息，旧的头像url会取不到图片。如果想判断是否修改了，那么还是要调用弹窗，效果与不保存是一致的

• 慕UI5549312 回复 提问者 谢成 #2

  谢谢老师，“旧的头像url取不到图片”这个问题我确实没想到。我本想在用户profile旁边给个按钮如果他想更新就点击更新头像和昵称，如果不更新就显示旧的。那么，在用户授权后，我把他的头像图片转存到云存储，url都指向云存储，这样应该就没有问题了吧？

• qq_慕姐8203528 #3

  我把用户信息存到了storage中，然后在存储的时候设置了一个存储时间，在取出的时候，判断如果过了我设定的时间就返回为null，然后再页面加载的时候获取登录授权信息是否授权，如果授权就把button给隐藏掉，并且给用户提示已经授权过了

Answer 7

SK2020 2021-04-08 17:43:03

感谢谢老师