乐趣区

关于前端:小程序云开发实战从0到1开发网络安全知识答题积分赛小程序

小程序云开发实战——从 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')
 
// 初始化 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 开发网络安全常识答题积分赛小程序
护网口头专题信息安全常识比赛、网络安全常识比赛

退出移动版