关于前端:答题积分小程序云开发实战接口联调篇头像上传至云存储用户信息保存到云数据库

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

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

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

背景

官网公布, 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 将本地资源上传至云存储空间，如果上传至同一门路则是笼罩写。
申请参数:

实现代码

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

操作流程

整个操作流程是：进入“护网专题信息安全常识竞答”线上常识答题首页，点击注册登录按钮，跳转至登录页面。
在登录页面，通过微信提供的头像昵称填写能力疾速欠缺，也能够自定义填写头像和昵称，而后上传头像到本人的服务器进行存储，以及提交信息至数据库保留。

小结

提炼了典型的业务模型，它能够帮忙你疾速搭建各种模式的答题软件产品的注册登录模块。比方网络安全常识答题、交通安全答题、消防安全常识宣传、平安生产常识学习、学法普法、五四青年节等答题流动或有奖竞答等利用场景。