微信小程序云开发实战-答题积分赛小程序
接口联调篇:登录页头像图片上传至云存储、注册登录数据提交保存至云数据库
在最新搭建的知识答题小程序,遇到了微信授权登录上的技术难点,所以对于以往的那套登录框架不能使用了,需要搭建一套新的注册登录流程框架。不得不做出调整,为此,首先进行了技术分析,进而去把它实现。
背景
官方发布, 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 | 云存储路径 | String | Y |
filePath | 要上传文件资源的路径 | String | Y |
实现代码
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' });
})
操作流程
整个操作流程是:进入“护网专题信息安全知识竞答”线上知识答题首页,点击注册登录按钮,跳转至登录页面。
在登录页面,通过微信提供的头像昵称填写能力快速完善,也可以自定义填写头像和昵称,然后上传头像到自己的服务器进行存储,以及提交信息至数据库保存。
小结
提炼了典型的业务模型,它可以帮助你快速搭建各种形式的答题软件产品的注册登录模块。比如网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习、学法普法、五四青年节等答题活动或有奖竞答等应用场景。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。