首页 > 编程语言 >小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

时间:2023-05-22 23:32:39浏览次数:41  
标签:const 答题 db 程序 获取 开发 集合 赛小

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

一、准备工作

1、注册一个小程序账号,主体类型可以选择个人,每个人都可以注册5个小程序账号。在注册成功后, 可使用小程序账号登录至微信公众平台,然后获取APPID。

点击【开发管理】-【开发设置】,复制APPID。

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_微信小程序

2、下载并安装微信开发者工具;

如果你的是Windows64,则选【Windows64】; 如果你的是Windows32,则选【Windows32】; 如果你的是mac,则选【macOS】;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_02

安装成功后,双击打开微信开发者工具;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_03


3、拿到网络安全知识答题积分赛小程序代码包,并解压到文件夹;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_04

4、在开发者工具导入该文件夹;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_数据库_05

二、效果预览

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

护网行动专题信息安全知识竞赛、网络安全知识竞赛

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_数据库_06

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_数据库_07

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_微信小程序_08

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_数据库_09

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_微信小程序_10

三、知识点

1、如何使用微信开发者工具进行开发小程序以及一些开发调试技巧;

2、如何用小程序云开发SDK插入、读取数据;

3、如何用云函数将经自动鉴权过的小程序用户 openid 返回给小程序端;

4、如何使用云开发控制台操作数据库;

5、如何使用CloudBase CMS进行可视化搭建题库管理系统;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_微信小程序_11

四、创建小程序∙云开发环境

创建小程序∙云开发环境,用于后面存储信息和开发云函数。

1、开发者工具导入项目

2、开通云开发环境

1)点击开发者工具上的【云开发】按钮;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_12

2)点击【同意】;

3)填写环境名称和环境ID,点击【确定】创建环境,即可进入云开发控制台。


3、创建数据库

答题小程序会使用到云开发提供的数据库能力,数据库使用的是MongoDB,需要优先创建一个集合,方便之后使用。

1)打开云开发控制台,点击菜单栏中的【数据库】,然后点击左侧边栏的【添加集合】按钮;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_13

2)输入集合名称 "aicQuestion",然后点击确定即可创建集合。

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_14

3)配置数据权限,所有用户可读;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_15

4)导入题目数据;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_安全知识_16


小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_17

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_18

5)创建集合,输入集合名称 "aicUser",然后点击确定即可创建集合。

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_微信小程序_19

6)配置数据权限,所有用户可读,仅创建者可读写;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_安全知识_20

4、获取并配置环境ID

1)获取环境ID;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_云开发_21

2)在小程序配置;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_数据库_22

5、部署云函数

在 cloudfunctions/getOpenId 文件夹右击,然后选择 “上传并部署”;

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_安全知识_23

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


小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_24

六、随机抽题

利用云开发的聚合操作接口实现从题库中随机抽取题目功能

关键代码及其详解:

/**
   * 生命周期函数--监听页面加载
   */
  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 || [];
 
    })
  },


小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_25

七、更新积分

利用云开发的更新操作接口实现积分的自增功能

关键代码及其详解:

// 实时更新用户的答题积分
  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 => {
      
    })
  },


小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_安全知识_26

八、积分排名

利用云开发的条件查询接口实现积分的由高到底排行功能

关键代码及其详解:

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


小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序_实战教程_27

九、自动鉴权

利用云开发的云函数接口实现实现自动鉴权获取用户登录态(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开发网络安全知识答题积分赛小程序_云开发_28

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

护网行动专题信息安全知识竞赛、网络安全知识竞赛

标签:const,答题,db,程序,获取,开发,集合,赛小
From: https://blog.51cto.com/u_15335909/6327876

相关文章

  • #yyds干货盘点# LeetCode程序员面试金典:平衡二叉树
    题目:给定一个二叉树,判断它是否是高度平衡的二叉树。本题中,一棵高度平衡二叉树定义为:一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 示例1:输入:root=[3,9,20,null,null,15,7]输出:true示例2:输入:root=[1,2,2,3,3,null,null,4,4]输出:false示例3:输入:root=[]......
  • #yyds干货盘点# LeetCode程序员面试金典:分数到小数
    1.简述:给定两个整数,分别表示分数的分子 numerator和分母denominator,以字符串形式返回小数。如果小数部分为循环小数,则将循环的部分括在括号内。如果存在多个答案,只需返回任意一个。对于所有给定的输入,保证答案字符串的长度小于104。 示例1:输入:numerator=1,denominat......
  • 程序6种性能优化
    这6种性能优化,让你的程序飞起来!软件设计开发某种意义上是"取"与"舍"的艺术。关于性能方面,就像建筑设计成抗震9度需要额外的成本一样,高性能软件系统也意味着更高的实现成本,有时候与其他质量属性甚至会冲突,比如安全性、可扩展性、可观测性等等。大部分时候我们需要的是:在业务遇到......
  • 微信小程序集成微信支付开发,后端是springboot项目
    一、准备工作首先是进入到小程序后台关联微信支付商户、以及接入微信支付申请 二、小程序端代码主要是用到了wx.requestPaymentAPI2.1在wxml文件中添加支付按钮<buttonbindtap="requestPayment">支付</button>2.2在wxss文件中定义支付按钮样式button{backgro......
  • Qt程序打包和发布
    准备工具1、QtCreator,记录QtCreator的安装路径2、NSIS空白脚本程序和NSIS汉化脚本程1Windows下打包与发布1.1打包成zip发布1、通过QtCreatorbuild应用程序,选择Relaeasebuild的应用程序占用空间少(推荐),选择Debugbuild的应用程序占用空间大。2、进入到build产物路径下,......
  • 微信小程序web-view与H5 通信方式探索
    小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。需求微信小程序H5混合开发就是 在一个小程序中,采用部分小程序原生页面,部分通过Webview内嵌H5页面¹,二者配合实现完整业务逻辑的方案。image.png 为什么需......
  • 编程打卡:面向对象程序设计
    importosimportsqlite3#Createadatabaseconnectionconn=sqlite3.connect('todo.db')#Createatodotablecur=conn.cursor()cur.execute('''CREATETABLEtodo(idINTEGERPRIMARYKEYAUTOINCREMENT,titleTEXTNOTNUL......
  • 扩展可能性:发挥React Native与小程序集成的优势
    ReactNative是一个强大的前端跨端框架,可以帮助开发者高效地构建移动应用程序,并充分利用跨平台开发的优势,同时提供接近原生应用程序的性能和用户体验。它具有许多技术上的优势:跨平台开发:使用ReactNative,您可以使用相同的代码库构建同时运行在iOS和Android平台上的应用程序。......
  • 2023新版小程序头像昵称显示 代码示例如下 可复制使用
    新版用户授权名字和头像官网点击触发用户头像部分:<blockwx:if="{{!avatarUrl}}">检查用户头像是否存在。如果头像不存在,显示默认头像。<blockwx:else="{{avatarUrl}}">如果头像存在,显示用户头像。<buttonopen-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"cl......
  • 《程序员修炼之道》笔记3
     最后,具体到实际问题,当我们在编程时,项目开始之前,应该注意一些什么呢?                本书作者郑重提倡开始编程之前,请深思熟虑,不要靠巧合编程,所谓巧合编程,就是不加思索,接到任务开始coding,run一下,正常运行了,甚至于自己都不清楚它为什么能运行,作者批注这是由于......