code学习

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

作者:小程序创作者Monstar

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

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

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

背景

官方发布, 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,
    })
  }
})           

实现效果

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

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

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

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

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

小结

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

官方关于小程序用户头像昵称获取规则调整公告的调整原因的说词。你细品。莫不是和云服务器厂商调整打配合。所以我们常常会说,不要看一个人说了什么,而是看他做了什么。