学习二十大奋进新征程线上知识答题小程序登录技术点分析与实现

学习二十大奋进新征程线上知识答题小程序登录技术点分析与实现

在最新搭建的知识答题小程序，遇到了微信授权登录上的技术难点，所以对于以往的那套登录框架不能使用了，需要搭建一套新的注册登录流程框架。

不得不做出调整，为此，首先进行了技术分析，进而去把它实现。

背景

官方发布, wx.getUserProfile被砍了。详情看用户头像昵称获取规则调整公告：

 

也就是说，wx.getUserProfile 接口、wx.getUserInfo 接口不能再继续使用了。

getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善用户信息', 
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  }

 

既然上面这种方式不能使用了，取而代之的是下面那种方式：通过头像昵称填写的组合方式。

头像选择

需要将 button 按钮的 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

注意！临时路径是不能直接使用的，需要上传到自己的服务器保存，并且返回该图片文件路径，才能应用。

与原来相比，最大的区别是：

①对于用户来说，操作步骤多了一点；

②对于开发者来说，实现代码以及逻辑多了一点，同时，还需要消耗自己的存储资源。

昵称填写

需要将 input 输入框的 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。

可以快速获取微信昵称，同时也支持自定义输入名称。

关键代码

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

实现效果

进入线上知识答题首页，落地页是学习二十大奋进新征程，点击登录按钮，跳转至登录页面

 

登录页面，通过微信提供的头像昵称填写能力快速完善，也可以自定义头像和昵称，选择部门分组，提交信息至数据库保存，同时需要上传头像到自己的服务器进行存储。

 

在之后的页面需要展示头像昵称，就是从自己的服务器上获取了。

小结

之前都是从官方的服务器上获取头像昵称的，现在是存储消耗自己的服务器资源，获取也消耗自己的服务器资源。