基于雲開發搭建網絡安全知識答題活動小程式v3.0

網絡安全宣傳周，網絡安全技能提升知識競賽答題活動，幫助大家提高網絡安全意識，進而達到“共建網絡安全，共享網絡文明”的目的。若想在短期内，進行網絡安全知識的傳播，那麼答題無疑是有效方式之一。

是以我搭建了最新版的優質的網絡安全知識答題活動小程式。提煉了典型的業務模型，它可以幫助你快速搭建各種形式的答題軟體産品。相信不管你的需求是什麼，本項目都能幫助到你。

答題活動小程式v3.0，基于微信原生小程式+雲開發實作。主要包含六大功能子產品頁面，首頁、答題頁、結果頁、活動規則頁、答題記錄頁、排行榜頁。 适用于交通安全答題、 消防安全知識宣傳、 安全生産知識學習、網絡與資訊安全知識競賽、五四青年節答題活動、學法普法教育、有獎答題等應用場景。

項目介紹

網絡安全知識答題活動小程式v3.0，基于雲開發的答題活動小程式。

本項目技術棧基于 ES2015+、WXML、WXSS、JavaScript 、微信原生 API和雲開發，所有的請求資料都使用雲資料庫的小程式端SDK進行查詢，提前了解和學習這些知識會對使用本項目有很大的幫助。

軟體架構

• 微信原生小程式
• 後端雲開發（資料庫、雲函數、存儲）
• CMS背景管理系統

功能結構

• 活動規則頁
• 答題記錄頁
• 排行榜頁
• 題庫随機抽題
• 查詢曆史成績
• 微信授權登入
• 擷取微信頭像和昵稱等
• 首頁、答題頁、結果頁
• 實作頁面間跳轉功能
• 實作轉發分享答題成績功能
• 實作用雲開發實作查詢題庫功能
• 實作動态題目資料綁定
• 答題互動邏輯
• 切換下一題
• 送出答卷儲存到雲資料庫集合
• 系統自動判分
• 答題結果頁從雲資料庫查詢答題成績
• 注冊登入頁
• 題庫學習
• 支援單選、判斷題型
• 錯題集
• 檢視所有使用者的答題記錄-管理者
• 檢視使用者的答題成績以及答題情況-管理者
• 背景資料監控-管理者
• 背景管理-管理者

效果一覽

v3.0版本更新：

1）更新功能：

• 排行榜頁排名機制，優化為取個人最佳成績進行排名√
• 答題頁、結果頁界面，增加展示微信頭像和昵稱欄目√
• 由僅支援單選，更新為支援單選、判斷、多選題型 √
• 各界面及功能一些小優化√

2）拓展功能：

• 注冊登入頁 √
• 題庫學習 √
• 錯題集 √
• 檢視所有使用者的答題記錄-管理者 √
• 檢視使用者的答題成績以及答題情況-管理者 √
• 背景題庫管理系統-管理者 √
• 題目增删查改-管理者 √

版本持續疊代中：

關鍵代碼解讀

實作頁面間跳轉功能

官方提供了5種路由的API，分别是：

1、wx.switchTab(Object object)，跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面；

2、wx.reLaunch(Object object)，關閉所有頁面，打開到應用内的某個頁面；

3、wx.redirectTo(Object object)，關閉目前頁面，跳轉到應用内的某個頁面。但是不允許跳轉到 tabbar 頁面；

4、wx.navigateTo(Object object)，保留目前頁面，跳轉到應用内的某個頁面。但是不能跳到 tabbar 頁面。使用wx.navigateBack可以傳回到原頁面。小程式中頁面棧最多十層；

5、wx.navigateBack(Object object)，關閉目前頁面，傳回上一頁面或多級頁面。可通過getCurrentPages擷取目前的頁面棧，決定需要傳回幾層。

首頁的.wxml

<view catchtap="goToTest">
 <button class='cu-btn bg-red round block lg'>開始答題</button>
</view>           

首頁的.js

goToTest: function() {
   wx.navigateTo({
      url: '../test/test'
   })
 },           

實作轉發分享答題成績功能

在.js檔案配置

Page({
  onShareAppMessage(res) {
    return {
      title: '@你，快來參與網絡安全知識答題活動吧~'
    }
  },
})           

用雲開發實作查詢題庫功能

在小程式端調用資料庫的方式很簡單，我們可以把下面的代碼寫到一個事件處理函數裡，然後直接在頁面的生命周期函數裡面執行。

其實概括起來，就三步走：

1）先使用 wx.cloud.database()擷取資料庫的引用（相當于連接配接資料庫）;

2）再使用 db.collection()擷取集合的引用；

3）再通過 Collection.get 來擷取集合裡的記錄。

// 連接配接雲資料庫
const db = wx.cloud.database();
// 擷取集合的引用
const activityQuestion = db.collection('activityQuestion');
// 資料庫操作符
const _ = db.command;

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    questionList: [], // 題目清單
    index: 0 // 目前題目索引
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // 擷取題庫-函數執行
    this.getQuestionList()
  },

  // 擷取題庫-函數定義
  getQuestionList() {
    // 顯示 loading 提示框
    wx.showLoading({
      title: '拼命加載中'
    });
    // 建構查詢條件
    activityQuestion.where({
      // 指定查詢條件，傳回帶新查詢條件的新的集合引用
      true: _.exists(true)
    })
    .get()
    .then(res => {
      // 擷取集合資料，或擷取根據查詢條件篩選後的集合資料。
      console.log('[雲資料庫] [activityQuestion] 查詢成功')
      console.log(res.data)
      let data = res.data || [];
      
      // 将資料從邏輯層發送到視圖層，通俗的說，也就是更新資料到頁面展示
      this.setData({
        questionList:data,
        index: 0
      });

      // 隐藏 loading 提示框
      wx.hideLoading();
    })
  }
})           

送出答卷成績到雲資料庫儲存

// 送出答卷
  addExamRecord(){
    wx.showLoading({
      title: '送出答卷中'
    });
    let examResult = {
      wrongList: this.data.wrongList,
      wrong: this.data.wrong,
      wrongListSort: this.data.wrongListSort,
      chooseValue: this.data.chooseValue,
      totalScore: this.data.totalScore
    };
    activityRecord.add({
      data: {
        ...examResult,
        createDate: db.serverDate()
      }
    }).then(res => {

      // 跳轉到答題結果頁，檢視成績
      wx.redirectTo({
        url: '../results/results'
      });

      wx.hideLoading();
    })
  }           

在結果頁中實作從雲資料庫查詢成績

這裡使用Collection.doc(id: string)，擷取集合中指定記錄的引用。方法接受一個 id 參數，指定需引用的記錄的 _id。

activityRecord
    .doc(id)
    .get()
    .then(res => {
      let examResult = res.data;
      
      let { wrong, totalScore } = examResult;
      this.setData({
        totalScore,
        wrong,
        zql: (20-wrong)/20*100
      })
   })           

用雲開發的聚合能力實作從題庫中随機出題功能

// 擷取題庫-函數定義
  getQuestionList() {

    // 資料庫集合的聚合操作執行個體
    activityQuestion
    .aggregate()
    .match({       //類似于where，對記錄進行篩選
      true: _.exists(true)
    })
    .sample({
      size: 20
    })
    .end()
    .then(res => {
      // 在控制台列印資料
      console.log(res.list)

      let data = res.list || [];
      
      // 将資料從邏輯層發送到視圖層，通俗的說，也就是更新資料到頁面展示
      this.setData({
        questionList:data
      });
    })
  }           

排行榜頁面實作答題成績排名

按答題成績totalScore字段進行排降序（totalScore越大越靠前）

getRankList() {
    // 資料庫集合的聚合操作執行個體
    activityScore
    .where({
      _openid: _.exists(true)
    })
    .orderBy('totalScore', 'desc')
    .get()
    .then(res => {
      // 擷取集合資料，或擷取根據查詢條件篩選後的集合資料。
      console.log('[雲資料庫] [排行榜] 查詢成功')
      console.log(res.data)
      let data = res.data || [];
      
      // 将資料從邏輯層發送到視圖層，通俗的說，也就是更新資料到頁面展示
      this.setData({
        rankList:data
      });
    })
  }           

活動意義

網絡安全周，一些機關會選擇做一些線上問答，用以網絡知識學習和防範，是以我們整理了最新的網絡安全知識題庫。

1、進行網絡知識科普：利用H5讓大家知道什麼是網絡安全，網絡安全的宣傳意義，如何防範資訊洩露、進行網絡安全倡議書的宣傳。

2、做好防範知識宣傳：可以通過答題的方式，對市民進行一些網絡安全教育，讓大家掌握更多的防範措施，遇到難題如何解決，增強人們的網絡安全意識。

題庫題目資料

網絡安全知識競賽題庫

單選題

1. 發現個人電腦感染病毒，斷開網絡的目的是 。

A.影響上網速度

B.擔心資料被洩露電腦被損壞（正确答案）

C.控制病毒向外傳播

D.防止計算機被病毒進一步感染

2. 關于提高對電信網絡詐騙的認識，以下說法錯誤的是 ？

A.不輕信

B.不随意轉賬

C.電腦、手機收到的資訊都是權威的，按照上面說的做（正确答案）

D.遇到事情多核實

3. 下列不屬于涉嫌詐騙的是 ？

A.自稱國家機關人員撥打某同學電話稱“您涉嫌重大犯罪”

B.中國移動10086發短信通知某同學電話話費餘額不足（正确答案）

C.用電話指揮某同學通過ATM機轉到所謂的“安全賬号”

D.以某同學個人資訊進行恐吓威脅要求事主打“封口費”

多選題

1.應急響應級别由哪些因素決定 。

A.應急故障影響範圍（正确答案）

B.應急故障恢複時間（正确答案）

C.解決應急故障參與的人數

D.應急故障裝置類型

2. 關于貸款詐騙，以下說法正确的是 。

A.詐騙分子通過網絡、電話釋出虛假的貸款資訊（正确答案）

B.誘騙你添加所謂貸款“客服”QQ、微信（正确答案）

C.以要手續費為由詐騙較小金額錢（正确答案）

D.以信用額度不夠、要刷流水為由詐騙更多金額（正确答案）

3. 重大計算機安全事故和計算機違法案件可由 受理。

A.案發地市級公安機關公共資訊網絡安全監察部門（正确答案）

B.案發地當地縣級（區、市）公安機關治安部門

C.案發地當地縣級（區、市）公安機關公共資訊網絡安全監察部門（正确答案）

D.案發地當地公安派出所

系列教程持續更新中