微信小程序云开发实战-答题积分赛小程序

接口联调篇：登录页头像图片上传至云存储、注册登录数据提交保存至云数据库

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

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

背景

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

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

注意：wx.getUserProfile 、wx.getUserInfo已经弃用。

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

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

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

头像选择

实现思路

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

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

解决方案：通过wx.cloud.uploadFile将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写。

请求参数:

实现代码

<button
    class="avatar-wrapper"
    open-type="chooseAvatar"
    bind:chooseavatar="onChooseAvatar">
        <image
            class="avatar"
            src="{{avatarUrl}}"
            mode="widthFix">
        </image>
</button>

onChooseAvatar(e) {
    // 1、获取到头像信息的临时路径
    const { avatarUrl } = e.detail;
    // 2、通过wx.cloud.uploadFile将本地资源上传至云存储空间
    wx.cloud.uploadFile({
      cloudPath: 'avatarImg.jpg',
      filePath: avatarUrl
    })
    .then(res => {
        //返回该图片文件路径fileID
        this.setData({ 
            avatarUrl:res.fileID//文件 ID
        });
    }).catch(error => {
      console.log(error)
    });
  },

实现效果

昵称填写

实现思路

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

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

实现代码

<input
    type="nickname"
    class="weui-input"
    placeholder="请输入昵称"
    bindinput="bindKeyInput"
    bindblur="bindblurFn"
/>

bindblurFn(e) {
    // 表单失去焦点事件监听函数
    this.setData({
            nickName: e.detail.value
    })
},
bindKeyInput(e) {
    // 表单输入状态事件监听函数
    this.setData({
            nickName: e.detail.value
    })
}

实现效果

保存至云数据库

提交时，将用户在注册登录页填写的用户信息保存至云数据库。

在之后的页面需要展示头像昵称，就是从自己的服务器上获取了。后续，也可以提供修改编辑的功能。

// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const aicUser = db.collection('user');
// 发送异步请求
user.add({
    data: {
      nickName: this.data.nickName,
      avatarUrl: this.data.avatarUrl
    }
}).then(res => {
    wx.showToast({ title: '注册成功', icon: 'success' });
})

操作流程

整个操作流程是：进入“护网专题信息安全知识竞答”线上知识答题首页，点击注册登录按钮，跳转至登录页面。

在登录页面，通过微信提供的头像昵称填写能力快速完善，也可以自定义填写头像和昵称，然后上传头像到自己的服务器进行存储，以及提交信息至数据库保存。

小结

提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品的注册登录模块。比如网络安全知识答题、交通安全答题、消防安全知识宣传、安全生产知识学习、学法普法、法律知识、五四青年节等答题活动或有奖竞答等应用场景。