小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序
一、准备工作
1、注册一个小程序账号,主体类型可以选择个人,每个人都可以注册5个小程序账号。在注册成功后, 可使用小程序账号登录至微信公众平台,然后获取APPID。
点击【开发管理】-【开发设置】,复制APPID。
2、下载并安装微信开发者工具;
如果你的是Windows64,则选【Windows64】; 如果你的是Windows32,则选【Windows32】; 如果你的是mac,则选【macOS】;
安装成功后,双击打开微信开发者工具;
3、拿到网络安全知识答题积分赛小程序代码包,并解压到文件夹;
4、在开发者工具导入该文件夹;
二、效果预览
小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序
护网行动专题信息安全知识竞赛、网络安全知识竞赛
三、知识点
1、如何使用微信开发者工具进行开发小程序以及一些开发调试技巧;
2、如何用小程序云开发SDK插入、读取数据;
3、如何用云函数将经自动鉴权过的小程序用户 openid 返回给小程序端;
4、如何使用云开发控制台操作数据库;
5、如何使用CloudBase CMS进行可视化搭建题库管理系统;
四、创建小程序∙云开发环境
创建小程序∙云开发环境,用于后面存储信息和开发云函数。
1、开发者工具导入项目
2、开通云开发环境
1)点击开发者工具上的【云开发】按钮;
2)点击【同意】;
3)填写环境名称和环境ID,点击【确定】创建环境,即可进入云开发控制台。
3、创建数据库
答题小程序会使用到云开发提供的数据库能力,数据库使用的是MongoDB,需要优先创建一个集合,方便之后使用。
1)打开云开发控制台,点击菜单栏中的【数据库】,然后点击左侧边栏的【添加集合】按钮;
2)输入集合名称 "aicQuestion",然后点击确定即可创建集合。
3)配置数据权限,所有用户可读;
4)导入题目数据;
5)创建集合,输入集合名称 "aicUser",然后点击确定即可创建集合。
6)配置数据权限,所有用户可读,仅创建者可读写;
4、获取并配置环境ID
1)获取环境ID;
2)在小程序配置;
5、部署云函数
在 cloudfunctions/getOpenId 文件夹右击,然后选择 “上传并部署”;
6、进行CMS可视化搭建
五、上传微信头像
利用云开发的小程序端接口上传微信头像图片
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)
});
},
六、随机抽题
利用云开发的聚合操作接口实现从题库中随机抽取题目功能
关键代码及其详解:
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
// 页面加载时,实现从题库中随机抽取题目功能
// 连接云数据库
const db = wx.cloud.database();
// 获取题库集合的引用
const aicQuestion = db.collection('question');
aicQuestion // 数据库集合的聚合操作实例
.aggregate() // 发起聚合操作
.match({ // 根据条件过滤文档
question: _.exists(true)
})
.sample({ // 随机从文档中选取指定数量的记录
size: 10 // 这里我们定义从题库表中随机选取10条题目
})
.end() // 聚合操作定义完成,类似发起ajax异步请求操作
.then(res => {
// 获取集合数据,或获取根据查询条件筛选后的集合数据。
let data = res.list || [];
})
},
七、更新积分
利用云开发的更新操作接口实现积分的自增功能
关键代码及其详解:
// 实时更新用户的答题积分
updateIntegration(){
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const user = db.collection('user');
// 数据库操作符,通过 db.command 获取
const _ = db.command;
user
.doc(this.data.id) // 获取集合中指定记录的引用。方法接受一个 id 参数,指定需引用的记录的 _id。
.update({ // 发起更新请求
data: {
score: _.inc(this.data.score) // 更新操作符,原子操作,用于指示字段自增
}
}).then(res => {
})
},
八、积分排名
利用云开发的条件查询接口实现积分的由高到底排行功能
关键代码及其详解:
getRankList() {
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const user = db.collection('user');
// 数据库操作符
const _ = db.command;
// 数据库集合的查询操作实例
user
.where({ // 根据条件过滤文档
totalScore: _.exists(true)
})
.orderBy('totalScore', 'desc') // 指定查询排序条件,totalScore按降序排序
.get() // 操作定义完成,类似发起ajax异步请求
.then(res => {
// 获取集合数据,或获取根据查询条件筛选后的集合数据。
let data = res.data || [];
// 将数据从逻辑层发送到视图层,通俗的说,也就是更新数据到页面展示
this.setData({
rankList:data
});
})
},
九、自动鉴权
利用云开发的云函数接口实现实现自动鉴权获取用户登录态(openid)功能
关键代码及其详解:
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
env: 'test-5613f6abn21'
})
/**
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
*
* event 参数包含小程序端调用传入的 data
*
*/
exports.main = async (event, context) => {
// 可执行其他自定义逻辑
// console.log 的内容可以在云开发云函数调用日志查看
// 获取 WX Context (微信调用上下文),包括 OPENID、APPID、及 UNIONID(需满足 UNIONID 获取条件)
const wxContext = cloud.getWXContext()
console.log(wxContext)
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序
护网行动专题信息安全知识竞赛、网络安全知识竞赛
标签:const,答题,db,程序,获取,开发,集合,赛小 From: https://blog.51cto.com/u_15335909/6327876