头图

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

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

在最新搭建的知识答题小程序,遇到了微信授权登录上的技术难点,所以对于以往的那套登录框架不能使用了,需要搭建一套新的注册登录流程框架。不得不做出调整,为此,首先进行了技术分析,进而去把它实现。

背景

官方发布, 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将本地资源上传至云存储空间,如果上传至同一路径则是覆盖写。
请求参数:

字段说明数据类型必填
cloudPath云存储路径StringY
filePath要上传文件资源的路径StringY

实现代码

login.wxml关键代码

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

login.js关键代码

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 进行输入时,键盘上方会展示微信昵称。可以快速获取微信昵称,同时也支持自定义输入名称。

实现代码

login.wxml关键代码

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

login.js关键代码

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' });
})

操作流程

整个操作流程是:进入“护网专题信息安全知识竞答”线上知识答题首页,点击注册登录按钮,跳转至登录页面。
在登录页面,通过微信提供的头像昵称填写能力快速完善,也可以自定义填写头像和昵称,然后上传头像到自己的服务器进行存储,以及提交信息至数据库保存。
图片

图片

小结

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


Monstart
24 声望5 粉丝

weChat:meng674782630,请备注:sf