微信迷你计划云开发实践问题回答点竞赛迷你计划

接口连接：上传“登录页面” 映像到云存储，注册登录数据到提交并保存到云数据库

在最新的知识回答迷你程序中，我在微信授权登录中遇到了技术困难，因此无法使用先前的登录框架，并且需要建立新的注册和登录过程框架。

必须进行调整，为此，首先进行了技术分析以实施它。

背景

正式发行，WX。被切割了。有关详细信息，请参阅用户的头像昵称以获取规则调整：

换句话说，WX。接口和WX。无法再使用接口。

注意：WX。，WX。已被弃用。

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

由于无法使用上述方法，因此通过在阿凡达昵称中填充的组合代替了以下方法。

过去，我曾经从官方服务器中获得阿凡达昵称。现在，存储会消耗我自己的服务器资源，并获得我自己的服务器资源。

头像选择

实施思想

1。您需要将按钮的开放型值设置为。用户选择要使用的头像后，您可以通过事件回调获得头像信息的临时路径。

2。注意！临时路径不能直接使用。需要将其上传到您自己的服务器，以保存并返回图像文件路径，然后才能应用它。

解决方案：将本地资源通过WX ..将本地资源上传到云存储。

请求参数：

字段

阐明

数据类型

必需的

云存储路径

上传文件资源的路径

实施代码

.WXML密钥代码

bind:chooseavatar="onChooseAvatar">

.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) }); },

意识到效果

昵称填充

实施思想

您需要将输入框类型的值设置为将其设置为键盘上方，当用户进入此处时，将显示微信的昵称。

您可以快速获得微信的昵称，还可以支持自定义输入名称。

实施代码

.WXML密钥代码

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

操作过程

整个操作过程是：输入在线知识回答“广旺特殊信息安全知识报价”的主页，单击注册登录按钮，然后跳到登录页面。

在登录页面上，微信提供的头像和昵称填充能力很快得到了改善。您还可以自定义化身和昵称，然后将化身上传到自己的服务器中以进行存储，然后将信息提交到数据库中以保存。

概括

改进了典型的业务模型，它可以帮助您快速构建各种形式的提问软件产品的注册和登录模块。例如，回答有关网络安全知识，交通安全问题，消防安全知识宣传，学习生产安全知识，了解法律和普及法律的问题，5月第四个青年日和其他应用程序场景或获奖的测验。