今天手把手的帶大家實現(xiàn)一款答題類的題庫小程序，如果著急的話，可以直接去看文末源碼.下載與項目部署。

考研題庫小程序云開發(fā)實戰(zhàn)，完整版提供給大家學習。題庫小程序，基于云開發(fā)的微信答題小程序，軟件架構(gòu)是微信原生小程序+云開發(fā)。

一、項目預覽

1、頁面結(jié)構(gòu)

• 首頁

• 答題頁

• 結(jié)果頁

• 我的頁

• 排行榜頁

• 答題歷史頁

• 登錄頁

• 使用指引頁

2、功能結(jié)構(gòu)

• 實現(xiàn)頁面間跳轉(zhuǎn)功能

• 微信授權(quán)登錄

• 獲取微信頭像和昵稱等

• 按科目分類

• 題庫隨機抽題算法

• 支持單選、判斷、多選

• 實現(xiàn)用云開發(fā)實現(xiàn)查詢題庫功能

• 實現(xiàn)動態(tài)題目數(shù)據(jù)綁定

• 答題交互邏輯

• 切換下一題

• 答題進度顯示

• 提交答卷保存到云數(shù)據(jù)庫集合

• 系統(tǒng)自動判分

• 答題結(jié)果頁從云數(shù)據(jù)庫查詢答題成績

• 實現(xiàn)轉(zhuǎn)發(fā)分享答題成績功能

• 查詢歷史成績

• 取最佳成績進行排名

• 推薦分享

• 在線客服

• 意見反饋

3、小程序端

效果預覽：

小程序[考研刷題小博士]

小程序[考研刷題小博士]

1）首頁

①使用了swiper組件實現(xiàn)輪播圖效果，里面使用了image標簽展示圖片；

②按科目分類的題庫；

2）排名頁

①對應四個科目，按照得分由高到底進行排名；

②如果同一個人答題多次，取個人最佳成績進行排名；

3）我的頁

①展示個人信息，頭像、昵稱；

②功能按鈕區(qū)域，考試記錄、推薦給好友、聯(lián)系客服、意見反饋、使用指引；

4）答題頁

①展示當前答題者的信息，頭像、昵稱；

②答題總數(shù)，以及當前答題進度；

③題型、題目、選項、切換下一題按鈕；

5）結(jié)果頁

①展示考生信息，頭像、昵稱；

②科目、題目總數(shù)、得分、答對題數(shù)、答錯題數(shù)、正確率；

③再打一次、返回首頁、分享成績給好友；

6）答題記錄頁

答題科目、答題時間；

7）登錄頁

可以進行微信授權(quán)登錄獲取頭像、昵稱，也可以自定義填寫頭像、昵稱；

8）使用指引頁

自定義使用指引或說明；

4、CMS后臺

題庫管理（新增、查看、搜索、編輯、刪除、導入、導出）-管理員權(quán)限

1）題庫列表

2）條件篩選搜索

3）關鍵詞搜索

4）新增題目

5）編輯題目

5、數(shù)據(jù)庫

云開發(fā)數(shù)據(jù)庫，題目數(shù)據(jù)表、答題記錄數(shù)據(jù)表、答題成績數(shù)據(jù)表；

二、學習資料

1、搭建教程

詳細講解手把手搭建教程，我已在前段時間免費分享給大家，請大家移步我的主頁翻翻，查閱歷史文章吧；

2、配套源碼

目前源碼和配套資源文件暫時不免費，畢竟創(chuàng)作不易，如果有需要的同學可以私聊蒙哥，拿米來換；

3、問題解答(●’?’●)

另外，蒙哥提供配套解答服務。當然了，知識付費時代蒙哥解答是要米的，畢竟食不飽力不足才美不外現(xiàn)。你在學習過程中有任何開發(fā)問題，或者工作中遇到任何前端問題，都可以來找蒙哥。

目前可以解答如下問題：

小程序方面的問題；

云開發(fā)方面的問題；

畢設方面的問題；

html+css+JavaScript方面的問題；

前端開發(fā)的問題；

面試找工作方面的問題等。

三、項目創(chuàng)建

1、環(huán)境準備

1.1、 注冊小程序賬號

到微信公眾平臺進行注冊微信小程序賬號。建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。

1.2 、獲取APPID

由于后期調(diào)?微信?程序的接?等功能，需要索取開發(fā)者的?程序中的 APPID ，所以在注冊成功后， 可登錄，然后獲取APPID。

點擊開發(fā)管理，選擇開發(fā)設置下面的appid：

1.3、 下載開發(fā)工具

選擇開發(fā)工具進行下載，并安裝：

2、初始化項目

2.1、 打開微信開發(fā)者?具

注意：第?次登錄的時候，需要掃碼登錄。

2.2、 新建?程序項?

點擊小程序選擇添加

2.3、 填寫項目信息

注意：后端服務選擇“微信云開發(fā)”

四、項目結(jié)構(gòu)以及詳解

1、項目目錄結(jié)構(gòu)

下面讓我們來看看新建小程序應用，初始化后的考研刷題小程序項目目錄結(jié)構(gòu)吧。

2、小程序配置文件

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json ，另一種是頁面的page.json。

2.1、全局配置app.json

小程序根目錄下的app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設置網(wǎng)絡超時時間、設置多 tab 等。

以考研刷題小程序為栗子看看，以下是一個包含了部分常用配置選項的app.json：

 {"pages": ["pages/index/index","pages/home/home","pages/test/test","pages/result/result","pages/history/history","pages/rank/rank","pages/guide/guide","pages/my/my"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "考研刷題小博士","navigationBarTextStyle": "black"},"tabBar": {"color": "#aaa","selectedColor": "#ffa517","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","iconPath": "/image/sy2.png","selectedIconPath": "/image/sy2-a.png","text": "題庫"},{"pagePath": "pages/rank/rank","iconPath": "/image/zxly2.png","selectedIconPath": "/image/zxly2-a.png","text": "排名"},{"pagePath": "pages/my/my","iconPath": "/image/wd2.png","selectedIconPath": "/image/wd2-a.png","text": "我的"}]},"sitemapLocation": "sitemap.json"
}

pages：頁面路徑列表；

window：用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色；

tabBar：底部 tab 欄的表現(xiàn)；

sitemapLocation：指明 sitemap.json 的位置；

注意：這里只解讀我這個考研刷題小程序項目里面使用到的配置項，更多配置項自行去技術官網(wǎng)查看。

2.1.1、pages

文件名不需要寫文件后綴，框架會自動去尋找對應位置的 .json, .js, .wxml, .wxss 四個文件進行處理。未指定 entryPagePath 時，數(shù)組的第一項代表小程序的初始頁面（首頁）。

"pages": ["pages/index/index","pages/home/home","pages/test/test","pages/result/result","pages/history/history","pages/rank/rank","pages/guide/guide","pages/my/my"]

2.1.2、window

backgroundColor：窗口的背景色；

backgroundTextStyle： 下拉 loading 的樣式，僅支持 dark / light；

navigationBarBackgroundColor：導航欄背景顏色；

navigationBarTitleText：導航欄標題文字內(nèi)容；

navigationBarTextStyle：導航欄標題顏色，僅支持 black / white；

2.1.3、tabbar

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應頁面。

其中 list 接受一個數(shù)組，只能配置最少 2 個、最多 5 個 tab。tab 按數(shù)組的順序排序，每個項都是一個對象。而在考研刷題小程序項目里面，我配置了三個，分別是題庫、排名、我的。

"tabBar": {"color": "#aaa","selectedColor": "#ffa517","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","iconPath": "/image/sy2.png","selectedIconPath": "/image/sy2-a.png","text": "題庫"},{"pagePath": "pages/rank/rank","iconPath": "/image/zxly2.png","selectedIconPath": "/image/zxly2-a.png","text": "排名"},{"pagePath": "pages/my/my","iconPath": "/image/wd2.png","selectedIconPath": "/image/wd2-a.png","text": "我的"}]}

2.2、頁面配置

每一個小程序頁面也可以使用同名.json文件來對本頁面的窗口表現(xiàn)進行配置，頁面中配置項會覆蓋app.json的window中相同的配置項。

注意：這里只解讀我這個考研刷題小程序項目里面使用到的配置項，更多配置項自行去技術官網(wǎng)查看。

例如，首頁的配置index.json：

{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "考研刷題小博士","backgroundColor": "#eeeeee","backgroundTextStyle": "light"
}

backgroundColor：窗口的背景色；

backgroundTextStyle： 下拉 loading 的樣式，僅支持 dark / light；

navigationBarBackgroundColor：導航欄背景顏色；

navigationBarTitleText：導航欄標題文字內(nèi)容；

navigationBarTextStyle：導航欄標題顏色，僅支持 black / white；

五、所用技術棧及知識講解

1、模板語法

1.1、view標簽和text標簽

我們現(xiàn)在做的是微信小程序，所以，要使用它的語法。WXML（WeiXin Markup Language）是微信小程序框架設計的一套標簽語言。

注意！不要被官方的很官方的概念唬住了，其實就是簡單的標簽。不信，咱們舉個栗子類比看看。相信大多數(shù)小伙伴，即使沒有做過開發(fā)的都聽過，html的div和span。

div => viewspan => text 

view其實相當于div，都是塊級元素，也就是會換行的；

text相當于span，都是行內(nèi)元素，也就是不會換行的。

動手試試吧，在index.wxml直接使用這兩個標簽就明白了。

<view> 馬原 </view><view> 毛中特 </view><view><text> 思修 </text><text> 近代史 </text></view>

什么？還有點迷糊？這樣看呢！

保姆級演示，明白了“view是塊級元素，會換行的；text是行內(nèi)元素，不會換行的”這句話了沒？

或許我以后不會這么講了，因為實在是太太太基礎了。簡單的事情，只說一遍。

不明白不要緊，就像公式，你不用知道是怎么來的，你只要記住公式是怎么用的就行了。

畢竟咱們做的是應用層面的開發(fā)嘛，它提供什么API，知道怎么用的，然后直接去使用就行了。如果能舉一反三，就更好了。

1.2、數(shù)據(jù)綁定

在js的data中定義變量：

data:{title:"考研題庫小程序",num:50,isLogin:true,user:{nickName:"姑蘇洛言",age:20},isChecked:true}

在 wxml中 直接使用：

<!-- 字符串類型 --><view>{{title}}
</view><!-- 數(shù)字類型 --><view>{{num}}
</view><!-- 布爾類型 --><view>{{isLogin?'你好，xx會員':'請授權(quán)登錄'}}
</view><viewwx:if="{{isLogin}}">{{user.nickName}}</view><viewwx:else="{{isLogin}}"> 請先登錄 </view><!-- 使用bool類型充當屬性check 字符串和花括號之間不要存在空格，否則會導致識別識別  --><checkboxchecked="{{isChecked}}"></checkbox><!-- 對象類型 --><view>昵稱：{{user.nickName}}，年齡{{user.age}}
</view>

再了解一下，其他一些基本運算。

<!-- 算數(shù)運算 --><view>{{a + b}}</view><!-- 三元運算 --><viewhidden="{{flag ? true : false}}"> Hidden </view><!-- 邏輯判斷 --><viewwx:if="{{length > 5}}"> 今日刷題挑戰(zhàn)成功 </view><viewwx:else>今日刷題挑戰(zhàn)失敗</view>

1.3、列表渲染

列表渲染，其實說白了就是我們說的數(shù)組循環(huán)。

列表渲染，關鍵字：

wx:for

wx:for-item

wx:for-index

wx:key

wx:for="{{list1}}"
wx:for-item="循環(huán)項的名字" => wx:for-item="item" 
wx:for-index="索引項的名字" => wx:for-index="index""循環(huán)項的名字" 默認 =  “item”
"索引項的名字" 默認 =  “index”

值有兩種： 1）當對數(shù)組對象做循環(huán)的時候，

list1:[{id:'1', name: '馬原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]wx:key="id"  =>  item.id 

2） 當數(shù)組是普通數(shù)組，

list1: ['馬原', '毛中特', '思修', '近代史']
wx:key="*this"

index.js

Page({data: {// 普通數(shù)組list1: ['馬原', '毛中特', '思修', '近代史'],// 對象數(shù)組的循環(huán)list2: [{id:'1', name: '馬原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]}
})

index.wxml

<view><view>普通數(shù)組</view><viewwx:for="{{list1}}"wx:key="*this">{{index}} --- {{item}}</view><view>======================</view></view><view><view>對象數(shù)組</view><viewwx:for="{{list2}}"wx:key="id">{{index}}:{{item.name}}--{{item.id}}</view></view>

1.4、條件渲染

1）wx:if

if 、else、 else if 對應微信小程序分別為 wx:if、 wx:else、 wx:elif

<viewwx:if="{{length > 5}}"> 1 </view><viewwx:elif="{{length > 2}}"> 2 </view><viewwx:else> 3 </view>

2）hidden

在標簽上直接加屬性hidden

3）什么場景下使用哪一個？

當標簽不是頻繁的切換顯示，優(yōu)先使用wx:if 直接把標簽從頁面結(jié)構(gòu)給移除掉；

當表示頻繁的切換顯示，優(yōu)先使用hiddem 通過添加樣式的方式來切換顯示。

1.5、事件的綁定

1）綁定事件通過 bind+事件名； 2）定義事件的回調(diào)需要放在 js文件和data同層級。

.wxml

<viewbindtap="handleTap">{{num}}
</view>

.js

Page({data: {num: 0},// 聲明了點擊事件的回調(diào)handleTap() {let num = this.data.num;num++;this.setData({num})}
})

2、樣式WXSS

WXSS( WeiXin Style Sheets )是?套樣式語言，用于描述 WXML 的組件樣式。 與 CSS 相比，

WXSS 擴展的特性有：

響應式長度單位 rpx

樣式導入

2.1、app.wxss

app.wxss是默認的全局樣式 。把全局的樣式的代碼都寫到這里：

page{background-color: aqua;
}

page 標簽是頁面最外層的標簽。

2.2、其他樣式

1）在wxss中 不支持 通配符 `*` 當我們要實現(xiàn)以下功能的時候，

 *{margin: 0;padding: 0;box-sizing: border-box;}

只能夠單個標簽一個一個的定義了！！！

page,view,text{margin: 0;padding: 0;box-sizing: border-box;}

2.3、小程序中的單位 rpx

功能和以前移動端的web中的`rem` 類似 ，`rpx`（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為`750rpx` 。 1）不管屏幕多寬 ， 都是 `750rpx`； 2）不管手機屏幕多寬 都是 100% ；

2.4、樣式導入

@import"../../styles/common.wxss";

通過@Import 引入，用的是相對路徑。

3、生命周期

只是一個事件而已！！ 只是會在特定的時候，會自動觸發(fā) 。

分為兩種：

1. 應用的生命周期 `app.js`；

2. 頁面的生命周期 ；

一個微信小程序項目其實一個`應用`，一個應用里面可以擁有多個 `頁面`。

3.1、應用的生命周期

看看考研刷題小程序項目中的app.js

App({// 小程序在啟動的時候  觸發(fā) onLaunch: function (options) {// 當應用開始啟動的時候，可以獲取用戶的一些信息 console.log("onLaunch");},// 小程序被展示 的時候觸發(fā) // 反復被觸發(fā) onShow: function (options) {console.log("onShow");},// 小程序被隱藏的時候觸發(fā)onHide: function () {console.log("onHide");},// 當應用出錯了時候會 觸發(fā)// 在這里 捕獲錯誤信息 // 把錯誤信息收集 -  發(fā)送ajax異步請求 發(fā)送到后臺中 onError: function (msg) {// msg ：錯誤信息console.log("onError");console.log(msg);},// 當頁面找不到了 就會觸發(fā)了 onPageNotFound: function (options) {},// 應用的全局數(shù)據(jù)globalData: {title:"生命周期"}
});

3.2、頁面的生命周期

看看考研刷題小程序項目中的首頁index.js

Page({data: {},// 頁面開始加載的時候觸發(fā) // 發(fā)送異步請求 獲取數(shù)據(jù)來渲染頁面  onLoad: function(options) {console.log("onLoad");},// 頁面標簽都渲染完畢 才觸發(fā) onReady: function() {console.log("onReady");},// 頁面被 顯示  頁面切換-頁面路由 onShow: function() {console.log("onShow");},// 頁面被隱藏onHide: function() {console.log("onHide");},// 頁面被 卸載的時候 -  當頁面切換的時候 使用了不同的 open-type 會關閉當前頁面的onUnload: function() {// 可以關閉一些定時任務 console.log("onUnload");},// 當頁面 下拉刷新的時候觸發(fā) // 在全局配置或者 頁面配置中 手動開啟 下拉刷新！！！onPullDownRefresh: function() {console.log("onPullDownRefresh");},// 上拉頁面  上拉加載下一頁數(shù)據(jù)onReachBottom: function() {console.log("onReachBottom");},// 當頁面被轉(zhuǎn)發(fā)的時候  onShareAppMessage: function() {console.log("onShareAppMessage");},// 頁面被滾動的時候  onPageScroll: function() {console.log("onPageScroll");},// 當點擊tabbar的時候觸發(fā) onTabItemTap:function(item) {}
});

4、原生組件

在考研刷題小程序中，常用的原生組件：

4.1、view

視圖容器，也就是塊級元素。

4.2、text

文本標簽，也就是行內(nèi)元素。

1）text 組件內(nèi)只支持 text 嵌套。

2）設置user-select屬性，長按文本可選、復制。

3）可以對空格、回車進行解析顯示。

4.3、image

1）默認的寬度和默認的高度 320 * 240。

2）內(nèi)置懶加載 lazy-load。

3）mode 渲染模式：

scaleToFill： 默認值。把圖片內(nèi)容，拉伸到相框的大小 。

widthFix： 把圖片變成了和以前web中的圖片的渲染模式一樣。web圖片，當寬度改變的時候，高度會等比例的跟著改變。移動端開發(fā) img width:100%。

aspectFit： 等比例拉伸圖片-內(nèi)容，可能會導致，image相框留出空白。

aspectFill： 等比例拉伸圖片-內(nèi)容，圖片的內(nèi)容會被截取（圖片內(nèi)容會撐滿相框）。

4.4、button

按鈕

4.5、radio

單選項目，在考研刷題小程序項目中用于單項選擇題。

4.6、checkbox

多選項目，屬性和單選radio大概一致。在考研刷題小程序項目中用于多項選擇題。

六、題庫放到云開發(fā)數(shù)據(jù)庫

1、開通服務，創(chuàng)建表

首先需要開通云開發(fā)服務，然后創(chuàng)建環(huán)境，接著創(chuàng)建集合，以創(chuàng)建題庫集合為例。我創(chuàng)建一個題庫集合，然后錄入題目，都是在云開發(fā)控制臺可以操作的。

2、創(chuàng)建或?qū)腩}目

給題庫表添加記錄，也就是錄入題目。有兩種模式，默認模式和JSON模式。我這里使用默認模式錄題。

3、配置權(quán)限、env

題目都錄入或者導入之后，還要配置數(shù)據(jù)庫權(quán)限，這樣小程序前端就可以直接調(diào)用了。在app.js填寫環(huán)境env。

七、前端使用SDK調(diào)用云數(shù)據(jù)庫

1、實現(xiàn)從題庫中隨機抽取題目

// 獲取題庫-函數(shù)定義getQuestionList() {// 數(shù)據(jù)庫集合的聚合操作實例activityQuestion.aggregate().match({       //類似于where，對記錄進行篩選true: _.exists(true)}).sample({size: 20}).end().then(res => {// 在控制臺打印數(shù)據(jù)console.log(res.list)let data = res.list || [];// 將數(shù)據(jù)從邏輯層發(fā)送到視圖層，通俗的說，也就是更新數(shù)據(jù)到頁面展示this.setData({questionList:data});})}

2、將用戶的答題成績保存到數(shù)據(jù)庫

// 提交答卷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 => {// 跳轉(zhuǎn)到答題結(jié)果頁，查看成績wx.redirectTo({url: '../results/results'});wx.hideLoading();})}

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

getRankList() {// 數(shù)據(jù)庫集合的聚合操作實例activityScore.where({_openid: _.exists(true)}).orderBy('totalScore', 'desc').get().then(res => {// 獲取集合數(shù)據(jù)，或獲取根據(jù)查詢條件篩選后的集合數(shù)據(jù)。console.log('[云數(shù)據(jù)庫] [排行榜] 查詢成功')console.log(res.data)let data = res.data || [];// 將數(shù)據(jù)從邏輯層發(fā)送到視圖層，通俗的說，也就是更新數(shù)據(jù)到頁面展示this.setData({rankList:data});})}

八、搭建CMS

1、入口

在答題小程序的云開發(fā)控制臺，點擊「更多」-「內(nèi)容管理」；

2、開通

勾選同意協(xié)議后，點擊確定；

3、填寫賬號密碼

填寫管理員賬號及密碼用于登錄內(nèi)容管理服務平臺，點擊「確定」完成開通。

4、點擊訪問地址

開通完成后，內(nèi)容管理當前頁面可看到內(nèi)容管理的入口鏈接和相關信息。點擊訪問地址，即可在彈出的瀏覽器窗口中進行內(nèi)容管理的相關配置。

5、登錄CMS后臺

云開發(fā)控制臺-更多-內(nèi)容管理頁面中，點擊「訪問地址」即可進入知識競賽小程序的內(nèi)容管理界面。

打開內(nèi)容管理（ CMS ）后，需使用賬密登錄，賬號密碼為開通時設置的管理員賬號和密碼。

6、創(chuàng)建項目

首先，我們需要點擊新建項目下方的創(chuàng)建新項目按鈕，創(chuàng)建一個名為知識競答小程序，Id 為zsjdxcx的項目。

創(chuàng)建完項目后，點擊項目卡片，進入項目的管理頁面，我們會看到項目的歡迎頁面。

7、創(chuàng)建或?qū)雰?nèi)容模型

我們需要建立一個內(nèi)容模型，描述題目所具有的屬性，如：題干，選項，正確答案，分值等。我到時會提供一個數(shù)據(jù)模型給你，一鍵導入即可。

8、新建內(nèi)容

在創(chuàng)建完題庫的內(nèi)容模型后，我們可以點擊“內(nèi)容集合”下的題庫菜單，開始管理數(shù)據(jù)庫中的題目數(shù)據(jù)。我們可以點擊新建按鈕，添加一個新的題目。

如下所示，填完表單后，點擊創(chuàng)建后，即可生成一條新的題目數(shù)據(jù)。

9、管理內(nèi)容

在題庫內(nèi)容列表頁，我們可以對已有的題庫內(nèi)容進行管理，如編輯、刪除題目，導入新的題目數(shù)據(jù)等。