请稍等 ...

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

小程序获取用户信息的方式又双叒叕改了。。。

本次代码更新了小程序获取用户信息方式，详见小程序官方公告：《小程序用户头像昵称获取规则调整公告》

头像昵称填写能力建议大家把调试基础库版本调整到2.27.1及以上版本。

该帖子中使用的调试基础库与开发工具均为写这篇帖子时的最新版：调试基础库版本为：2.27.3，开发工具版本1.06.2211222darwin-x64)

这次主要的变化是任何接口都无法再直接获取到用户的头像和昵称，开始转为用户自己填写头像昵称了。

我们先回顾一下我们之前的思路。原有课程设计中，在“博客”和“评论”这两个部分需要用到用户头像和昵称，原来的思路是点击“发布”或“评论”时我们通过接口获取到当前用户的头像和昵称，然后进行接下来的逻辑，也就是把博客信息或评论信息保存在云数据库中（其中包含当前头像和昵称）。
现在的思路是我们新建一个页面userinfo，用来给用户填写昵称头像，然后把信息保存下来，当业务逻辑需要用到用户信息时，先判断用户信息是否存在，如果存在就直接使用，如果不存在就跳转到这个新建页面让用户填写。这样的话原来课程中封装的授权组件login应该就用不上了。。。

在pages下面新建userinfo页面：

<!-- userinfo.wxml文件 -->

<view>
  <form bindsubmit="formSubmit">
    <!-- 头像 -->
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      <image class="avatar" src="{{avatarUrl}}"></image>
    </button>

    <!-- 昵称 -->
    <view class="nickname-wrapper">
      <label class="nickname-label">
        <text class="nickname-text">昵称</text>
        <input class="nickname" type="nickname" placeholder="请输入昵称" name="nickname" />
      </label>
    </view>

    <button type="warn" form-type="submit" class="save-btn">保存</button>
  </form>

</view>

头像选择
需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起，若用户上传的图片未通过安全监测，不触发bindchooseavatar 事件。

昵称填写
需要将 input 组件 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。
从基础库2.24.4版本起，在onBlur 事件触发时，微信将异步对用户输入的内容进行安全监测，若未通过安全监测，微信将清空用户输入的内容，建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。

样式文件：

/* userinfo.wxss文件 */

.avatar-wrapper {
  padding: 0;
  width: 160rpx;
  border-radius: 16rpx;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
}

.avatar {
  display: block;
  width: 160rpx;
  height: 160rpx;
}

.nickname-wrapper {
  border: 1px solid #ccc;
  padding: 30rpx;
}

.nickname-label {
  display: flex;
}

.nickname-text{
  flex: 2;
}

.nickname{
  flex: 3;
}

.save-btn{
  margin-top: 80rpx;
  width: 240rpx;
}

//userinfo.js文件

const app = getApp()

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl, // 头像临时地址
    avatarFileId: '' // 头像在云存储中的永久地址
  },
  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    this.setData({
      avatarUrl,
    })
    // 注意：图片只支持<1M图片，超过1M会失败
    // 注意：avatarUrl获取到的是临时地址！临时地址！临时地址！
    // 所以如果想永久使用这个头像地址，可以上传到云存储中得到永久地址
    this.uploadFile()
  },
  uploadFile() {
    // 文件扩展名
    const suffix = /\.\w+$/.exec(this.data.avatarUrl)[0]
    wx.cloud.uploadFile({
      cloudPath: 'avatar/' + Date.now() + '-' + Math.random() * 1000000 + suffix,
      filePath: this.data.avatarUrl,
      success: res => {
        this.data.avatarFileId = res.fileID
      },
      fail: err => console.error(err)
    })
  },
  formSubmit(e) {
    const {
      nickname
    } = e.detail.value
    // 保存头像和昵称
    // 可以保存在云数据库中或者本地存储，这里以本地存储为例
    const {
      openid
    } = app.globalData
    wx.setStorage({
      key: openid + '-userinfo', // 增加一个-userinfo后缀，以区分本地存储中的音乐信息
      data: {
        nickname,
        avatarFileId: this.data.avatarFileId
      },
      success() {
        wx.showToast({
          icon: 'success',
          title: '保存成功',
        })
        setTimeout(wx.navigateBack, 1500)
      },
      fail() {
        wx.showToast({
          icon: 'error',
          title: '保存失败',
        })
      }
    })
  },
})

以上就是用来给用户填写昵称头像的userinfo页面，接下来我们完成调用用户信息的两个功能:发布和评论

发布功能，在pages/blog/blog.js文件

// 发布功能
  onPublish() {
    // 20221128小程序用户头像昵称获取规则调整
    // 判断本地存储中是否有用户信息
    // 用户信息在本地存储，key为openid + '-userinfo'
    const {
      openid
    } = app.globalData
    wx.getStorage({
      key: openid + '-userinfo',
      success(res) {
        const {
          nickname,
          avatarFileId
        } = res.data
        // 如果用户信息存在，那么就跳转到发博客页面
        wx.navigateTo({
          url: `../blog-edit/blog-edit?nickName=${nickname}&avatarUrl=${avatarFileId}`,
        })
      },
      fail() {
        // 如果不存在用户信息，就跳转到用户信息配置页面
        wx.showToast({
          icon:'loading',
          title: '请配置用户信息',
        })
        setTimeout(()=>{
          wx.navigateTo({
            url: '../userinfo/userinfo',
          })
        }, 1500)
      }
    })
  },

评论功能，components/blog-ctrl/blog-ctrl.wxml文件，tap时调用onComment方法，在onComment中判断是否存在用户信息

<!-- blog-ctrl.wxml -->
<view class="ctrl-item" bind:tap="onComment">
	<i class="iconfont icon-pinglun icon"></i>
	<text class="item">评论</text>
</view>

// components/blog-ctrl/blog-ctrl.js文件
onComment() {
      // 20221128小程序用户头像昵称获取规则调整
      // 判断本地存储中是否有用户信息
      // 用户信息在本地存储，key为openid + '-userinfo'
  const {
    openid
  } = app.globalData
  wx.getStorage({
    key: openid + '-userinfo',
    success: (res) => {
      const {
        nickname,
        avatarFileId
      } = res.data
      this.data.nickname = nickname
      this.data.avatarUrl = avatarFileId
      // 如果用户信息存在，那么订阅消息
      this.subscribeMsg()
    },
    fail() {
      // 如果不存在用户信息，就跳转到用户信息配置页面
      wx.showToast({
        icon: 'loading',
        title: '请配置用户信息',
      })
      setTimeout(() => {
        wx.navigateTo({
          url: '../userinfo/userinfo',
        })
      }, 1500)
    }
  })
},Ï
subscribeMsg() {
      const tmplId = 'Fz8q-QVsnTQ-Y8KV4UZz7DuoFkaAW5qbMcKUB8vYmbc'
      wx.requestSubscribeMessage({
        tmplIds: [tmplId],
        success: (res) => {
          console.log(res)
          if (res[tmplId] === 'accept') {
            // 20221128这里有修改，前面先判断用户信息，再订阅消息
            // this.onComment()
            this.setData({
              modalShow: true,
            })
          } else {
            wx.showToast({
              icon: 'none',
              title: '订阅失败，无法评论',
            })
          }
        }
      })
    },
    onSend() {
      // 前面代码省略
      db.collection('blog-comment').add({
        data: {
          content,
          createTime: db.serverDate(),
          blogId: this.properties.blogId,
          nickName: this.data.nickname, // 这里是从data中获取昵称
          avatarUrl: this.data.avatarUrl // 这里是从data中获取头像
        }
      })
      // 后面代码省略
    
    },

附：近两年关于用户信息相关接口调整公告：

2021-02-24 小程序登录、用户信息相关接口调整说明
https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801
2021-04-15 小程序登录、用户信息相关接口调整更新说明
https://developers.weixin.qq.com/community/develop/doc/000ecabcb642185cfdfb78fe056c01
2021-09-26 微信公众平台用户信息相关接口调整公告
https://developers.weixin.qq.com/community/develop/doc/00028edbe3c58081e7cc834705b801
2021-12-27 小程序用户信息相关接口调整公告
https://developers.weixin.qq.com/community/develop/doc/000e881c7046a8fa1f4d464105b001
2022-05-09 小程序用户头像昵称获取规则调整公告
https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

谢成 2022-11-28 20:07:53

源自：5-4 授权组件login

1301

收起

提交取消

1回答

提问者谢成 2022-11-28 20:09:04

请大家认真查看更新内容

1 回复有任何疑惑可以回复我~

收起回答

慕頭向 #1

正好学到这个地方卡住了，然后机看到老师的更新了

回复有任何疑惑可以回复我~ 2022-11-30 11:07:49

甜甜922 #2
```
老师可以帮我解答一下我的问题么
```
回复有任何疑惑可以回复我~ 2023-01-01 20:34:00
甜甜922 #3
```
我提问了
```
回复有任何疑惑可以回复我~ 2023-01-01 20:34:18

相似问题

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

授权登陆没有获取到自己的用户信息，而是默认的

获取用户真实ip

小程序获取用户信息更新后带来的问题。

在用户功能模块中有两个获取用户信息的接口

登录后可查看更多问答，登录/注册

微信小程序云开发-从0打造云音乐全栈小程序

参与学习 1920 人
提交作业 116 份
解答问题 2759 个

横跨小程序端、云后端、CMS一站式云开发的小程序全栈课程

了解课程

本课精华内容

问答作业

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

3.4k 20