小程序云开发实战——从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)    });  },

六、随机抽题

利用云开发的聚合操作接口实现从题库中随机抽取题目性能
要害代码及其详解：

/**   * 生命周期函数--监听页面加载   */  onLoad(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') // 初始化 cloudcloud.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开发网络安全常识答题积分赛小程序
护网口头专题信息安全常识比赛、网络安全常识比赛