我最近在做二人對(duì)戰(zhàn)模式答題，體驗(yàn)了不少小程序，找到一個(gè)開源的，現(xiàn)推薦給大家

小程序代碼地址

微信小程序云開發(fā)實(shí)現(xiàn)的單詞PK小程序，支持好友對(duì)戰(zhàn)、隨機(jī)匹配、人機(jī)模式，完整代碼 ~ UI可以披靡市場(chǎng)上所有同類型小程序，體驗(yàn)也是一流的哦 ~ 目前已經(jīng)有同學(xué)在QQ小程序、阿里小程序部署；也有同學(xué)修改成了公務(wù)員題庫(kù)?~ 期待看到各類優(yōu)秀產(chǎn)品上線哦 ~

上線說明: 源碼開源，但上線需要經(jīng)過作者許可哦 ~ 開發(fā)不易、創(chuàng)作不易。

收費(fèi)服務(wù)

微信：34805850，期待大佬關(guān)注微信公眾號(hào)：前端面試之道

• 部署文檔：66+獲取小程序部署文檔，根據(jù)文檔可以很簡(jiǎn)單的跑起來項(xiàng)目 ~
• 自己修改代碼上線任意平臺(tái)，需支付199+?(開發(fā)不易，相信你上線后，通過廣告也可以回本)，贈(zèng)送部署文檔，指導(dǎo)部署錯(cuò)誤解決
• 新需求：想在小程序源碼基礎(chǔ)上開發(fā)新功能的，根據(jù)需求難度定制開發(fā)；亦或者自己研究代碼直接新增即可
• 合作：如果您是某某英語培訓(xùn)機(jī)構(gòu)，想擁有自己品牌的背單詞程序，歡迎聯(lián)系，幫部署及合作定制開發(fā)，￥4000+
• 其他合作：歡迎騷擾 ~

在線體驗(yàn)

UI截圖

????????

需求概述

單詞對(duì)戰(zhàn)模式

對(duì)戰(zhàn)業(yè)務(wù)需求解析

單詞對(duì)戰(zhàn)的游戲核心為：隨機(jī)生成一定數(shù)量的單詞列表的單選題類型題目，題目文本為該單詞，有 4 個(gè)隨機(jī)中文釋義的選項(xiàng)，其中僅有一個(gè)為正確釋義，雙方用戶一起選擇釋義，正確率高且速度快的用戶獲得對(duì)戰(zhàn)勝利。

單詞對(duì)戰(zhàn)游戲分為好友對(duì)戰(zhàn)、隨機(jī)匹配、人機(jī)對(duì)戰(zhàn)三種對(duì)戰(zhàn)的形式，均通過上述游戲核心的方式進(jìn)行對(duì)戰(zhàn)。

對(duì)戰(zhàn)設(shè)置

用戶還可以對(duì)以下對(duì)戰(zhàn)信息進(jìn)行自定義設(shè)置

• 對(duì)戰(zhàn)的單詞書，用戶可以選擇自己想要背誦的單詞類型，包含四級(jí)核心詞、四級(jí)大綱詞、六級(jí)核心詞、六級(jí)大綱詞、考研真題核心詞、考研大綱詞、小學(xué)必備詞、中考大綱詞、高考大綱詞、雅思大綱詞、商務(wù)詞匯等多種單詞書，亦可以選擇隨機(jī)單詞書模式，則將從所有的單詞中進(jìn)行隨機(jī)抽取；
• 設(shè)置每一局對(duì)戰(zhàn)的單詞數(shù)目為以下任意一種：8、 10(默認(rèn))、 12、 15、 20
• 設(shè)置切換下一題是否自動(dòng)播放單詞發(fā)音
• 設(shè)置錯(cuò)詞是否加入到生詞本
• 開始和錯(cuò)詞的時(shí)候是否震動(dòng)
• 設(shè)置默認(rèn)是否播放背景音樂，游戲中也可以隨時(shí)關(guān)閉/開啟背景音樂

其他細(xì)節(jié)優(yōu)化

• 加入正在對(duì)戰(zhàn)過程中、對(duì)戰(zhàn)已結(jié)束、房間已滿等非正常類型房間，做出相應(yīng)的交互提示，然后跳轉(zhuǎn)至首頁
• 在對(duì)戰(zhàn)過程中任意用戶退出游戲或掉線，則結(jié)束本局游戲，進(jìn)行對(duì)戰(zhàn)結(jié)算
• 對(duì)戰(zhàn)結(jié)束后，房主可以選擇再來一局，當(dāng)房主創(chuàng)建好再來一局的房間后，另外一個(gè)用戶可以選擇再來一局，加入繼續(xù)對(duì)戰(zhàn)
• 在對(duì)戰(zhàn)過程中，選擇錯(cuò)誤的單詞或使用提示卡選擇的單詞，自動(dòng)加入到用戶生詞本，用戶可以在生詞本中進(jìn)行復(fù)習(xí)
• 加入倒計(jì)時(shí)機(jī)制，每一個(gè)單詞的對(duì)戰(zhàn)周期為 10s，超時(shí)則判斷為錯(cuò)選

完整對(duì)戰(zhàn)流程圖

詞匯挑戰(zhàn)模式

詞匯挑戰(zhàn)模式業(yè)務(wù)解析

詞匯挑戰(zhàn)的核心為：獲取隨機(jī)的一個(gè)單詞作為單選題題目文本，包含四個(gè)中文釋義選項(xiàng)，其中一個(gè)為正確答案，選擇錯(cuò)誤則失敗，選擇正確再獲取隨機(jī)單詞，循環(huán)下去。

挑戰(zhàn)復(fù)活機(jī)制

在詞匯挑戰(zhàn)的過程中，如果選擇錯(cuò)誤，可以有兩次復(fù)活機(jī)會(huì)

• 首次復(fù)活：通過分享小程序獲得復(fù)活機(jī)會(huì)
• 第二次復(fù)活：通過觀看一個(gè) 15s 之內(nèi)的廣告獲得復(fù)活機(jī)會(huì)
• 當(dāng)?shù)谌芜x擇錯(cuò)誤，顯示再來一局，從零開始記錄分?jǐn)?shù)

其他

• 詞匯挑戰(zhàn)每正確一個(gè)詞，得分增加 100 分
• 當(dāng)挑戰(zhàn)失敗的時(shí)候，如果挑戰(zhàn)分?jǐn)?shù)高于歷史最高分?jǐn)?shù)，則修改歷史最高分?jǐn)?shù)為當(dāng)前分?jǐn)?shù)，用于排行榜排行
• 可以使用提示卡進(jìn)行選擇

完整挑戰(zhàn)流程圖

其他功能

生詞本

• 用戶可以在生詞本中查看在單詞對(duì)戰(zhàn)模式、詞匯挑戰(zhàn)模式中選擇錯(cuò)誤的單詞
• 可以查看單詞及單詞釋義、播放單詞發(fā)音、刪詞生詞
• 在設(shè)置中可以一鍵清空所有生詞

學(xué)習(xí)打卡

• 當(dāng)在單詞對(duì)戰(zhàn)模式中，當(dāng)天對(duì)戰(zhàn)局?jǐn)?shù)超過 5 局且勝利局?jǐn)?shù)超過 2 局，則打卡成功
• 可以在在打卡頁面查看當(dāng)日進(jìn)度，可以查看歷史的打卡日歷

排行榜

• 排行榜包含詞力值、詞匯挑戰(zhàn)分?jǐn)?shù)、簽到天數(shù)等排名信息
• 每類排行版顯示前 20 名的排名頭像和昵稱以及分?jǐn)?shù)
• 顯示自己當(dāng)前類目下的排名以及分?jǐn)?shù)

用戶相關(guān)

• 數(shù)據(jù)庫(kù)應(yīng)記錄的用戶數(shù)據(jù)包含：昵稱、頭像、對(duì)戰(zhàn)局?jǐn)?shù)、勝利局?jǐn)?shù)、選擇的單詞本、詞力值
• 詞力值機(jī)制：在單詞對(duì)戰(zhàn)模式、單詞挑戰(zhàn)模式中，每局對(duì)戰(zhàn)都可以獲得相應(yīng)的詞力值分?jǐn)?shù)，作為用戶的經(jīng)驗(yàn)值

其他

• 建議反饋：用戶可以在小程序中，反饋意見，然后再后臺(tái)可以查看用戶留言
• 打賞作者：用戶可以在小程序中，通過掃碼的形式，對(duì)小程序進(jìn)行打賞
• 小程序友情鏈接：可通過當(dāng)前小程序跳轉(zhuǎn)至作者的其他小程序中
• 小程序中加入部分廣告，不影響用戶體驗(yàn)

團(tuán)隊(duì)組成

整個(gè)項(xiàng)目的產(chǎn)品方案、UI 設(shè)計(jì)、開發(fā)、測(cè)試、上線運(yùn)營(yíng)等皆一個(gè)人獨(dú)立完成。

技術(shù)方案

設(shè)計(jì)

設(shè)置使用sketch完成，設(shè)計(jì)稿上傳至藍(lán)湖，作為數(shù)據(jù)標(biāo)注。

藍(lán)湖鏈接

鏈接：?密碼: ydIX

設(shè)計(jì)圖源文件

下載鏈接:??密碼:vylm

開發(fā)技術(shù)棧

其他工具

• ESLint
• Git + Github
• vscode
• Electron
• NodeJS
• Python

系統(tǒng)架構(gòu)

項(xiàng)目文件簡(jiǎn)介

├── cloudfunctions | ├── model_auto_sign_trigger # 自動(dòng)簽到定時(shí)觸發(fā)器 | ├── model_book_changeBook | ├── model_userWords_clear # 清除用戶生詞 | ├── model_userWords_get | └── model_user_getInfo # 獲取用戶信息 ├── db # 數(shù)據(jù)整理的腳本 ├── design # 設(shè)計(jì)稿文件、素材文件 | └── ├── docs ├── miniprogram | ├── app.js # 小程序全局入口 | ├── | ├── app.wxss # 全局樣式 | ├── audios | | ├── | | └── | ├── components # 全局組件 || ├── header # header組件 || ├── loading # 全局loading || └── message # 全局彈窗 | ├── images | | ├── ... 圖片素材 | ├── miniprogram_npm # 小程序npm目錄 || └── wxapp-animate # 動(dòng)畫庫(kù) | ├── model | | ├── | | ├── | | ├── | | ├── | | ├── | | ├── | | ├── | | └── | ├── pages # 頁面 || ├── combat # 對(duì)戰(zhàn)頁 || ├── home # 首頁 || ├── ranking # 排行榜 || ├── setting # 設(shè)置頁 || ├── sign # 簽到頁 || ├── userWords # 生詞表頁 || └── wordChallenge # 單詞挑戰(zhàn) | └── utils | ├── Tool.js # 全局工具類，放了加載、全局store等 | ├── | ├── log.js # 日志上報(bào) | ├── | ├── setting.js # 全局設(shè)置 | └── ├── └──

云開發(fā)數(shù)據(jù)交互的 Model 層設(shè)計(jì)

在該項(xiàng)目中，將所有的服務(wù)端交互、數(shù)據(jù)庫(kù)的讀取、云函數(shù)的調(diào)用都放到了 model 目錄下，對(duì)該目錄結(jié)構(gòu)深入解析。

(1) Base.js

base 基類，所有其他數(shù)據(jù)集合都繼承該類，在構(gòu)造函數(shù)中，用來做數(shù)據(jù)集合初始化和生命一些可能所需用到的變量。

import $ from './../utils/Tool'const DB_PREFIX = 'pk_'export defaultclass{constructor(collectionName) {const env = $.store.get('env')const db = ({ env })this.model = db.collection(`${DB_PREFIX}${collectionName}`)this._ = db.commandthis.db = dbthis.env = env}get date() {return ({ env: this.env }).serverDate()}serverDate(offset = 0) {return ({ env: this.env }).serverDate({ offset })} }

(2)其他集合文件 (model 目錄下，除了 base 和 index 之外的文件)

在這些文件中，對(duì)應(yīng)和文件名同名的集合的所有數(shù)據(jù)操作，比如 中，包含了所有對(duì) pk_book 集合的所有數(shù)據(jù)增刪改查操作。

import Base from'./base'import $ from'./../utils/Tool'const collectionName = 'book'classBookModelextendsBase{constructor() {super(collectionName)}async getInfo() {const { data } = awaitthis.model.get()return data}async changeBook(bookId, oldBookId, bookName, bookDesc) {if (bookId !== oldBookId) {const { result: bookList } = await $.callCloud('model_book_changeBook', { bookId, oldBookId, bookName, bookDesc })return bookList}} }exportdefaultnew BookModel()

(3)

在該文件中，對(duì)所有的數(shù)據(jù)集合操作文件進(jìn)行引入，然后又導(dǎo)出，之后在其他文件中的的調(diào)用，就只需要引入該文件即可，就可以實(shí)現(xiàn)調(diào)用不同的集合操作。

import userModel from'./user'import bookModel from'./book'import wordModel from'./word'import roomModel from'./room'import userWordModel from'./userWord'import signModel from'./sign'export {userModel,bookModel,wordModel,roomModel,userWordModel,signModel }

環(huán)境區(qū)分

在小程序初始化的時(shí)候，對(duì)云開發(fā)環(huán)境進(jìn)行了全局的初始化，區(qū)別開發(fā)環(huán)境和正式環(huán)境。

initEnv() {const envVersion = __wxConfig.envVersionconst env = envVersion === 'develop' ? 'dev-lkupx' : 'prod-words-pk'wx.cloud.init({env,traceUser: true})this.store.env = env},onLaunch() {this.initEnv()this.initUiGlobal()},

難點(diǎn)解析

難點(diǎn) 1：單詞數(shù)據(jù)

1. 抓包分析和代碼實(shí)現(xiàn)

本課題中使用 MacOS 系統(tǒng)、Charles 抓包軟件、安卓手機(jī)作為抓包的基本環(huán)境。首先在電腦上安裝 Charles，然后開啟 Proxy 抓包代理，同局域網(wǎng)下配置手機(jī) WiFi 代理實(shí)現(xiàn)抓取手機(jī)包。

2. 單詞數(shù)據(jù)整理

通過爬蟲下來的單詞數(shù)據(jù)如下，對(duì)于該課題的項(xiàng)目單詞數(shù)據(jù)相對(duì)復(fù)雜，所以我們對(duì)單詞數(shù)據(jù)結(jié)構(gòu)進(jìn)行簡(jiǎn)化，只提取項(xiàng)目中需要的字段，以單詞 yum 為例：

優(yōu)化前：

{"wordRank":63,"headWord":"yum","content":{"word":{"wordHead":"yum","wordId":"PEPXiaoXue4_2_63","content":{"usphone":"j?m","ukphone":"j?m","ukspeech":"yum&type=1","usspeech":"yum&type=2","trans":[{"tranCn":"味道好","descCn":"中釋"}]}}},"bookId":"PEPXiaoXue4_2"}

優(yōu)化后：

{"rank":286,"word":"yum","bookId":"primary","_id":"primary_286","usphone":"j?m","trans":[{"tranCn":"味道好"}]}

通過 NodeJS 編寫批量格式整理的程序，整理后導(dǎo)出 JSON 文件

3. 數(shù)據(jù)文件批量導(dǎo)入(傳入數(shù)據(jù)庫(kù))

由于微信小程序云開發(fā)控制臺(tái)不支持?jǐn)?shù)據(jù)文件的批量導(dǎo)入數(shù)據(jù)庫(kù)，所以開發(fā)了一個(gè)支持云開發(fā)數(shù)據(jù)集合批量導(dǎo)入的程序

難點(diǎn) 2：單詞對(duì)戰(zhàn)模式

本節(jié)詳細(xì)解析單詞對(duì)戰(zhàn)模式的實(shí)現(xiàn)，將從創(chuàng)建房間(生成隨機(jī)詞匯、新增房間數(shù)據(jù))、對(duì)戰(zhàn)監(jiān)聽、對(duì)戰(zhàn)過程(好友對(duì)戰(zhàn)、隨機(jī)匹配、人機(jī)對(duì)戰(zhàn))、對(duì)戰(zhàn)結(jié)算的角度進(jìn)行分析。

創(chuàng)建對(duì)戰(zhàn)房間

對(duì)戰(zhàn)房間的創(chuàng)建，分為觸發(fā)創(chuàng)建房間事件、獲取當(dāng)前選擇的單詞書、獲取單詞對(duì)戰(zhàn)每一局的詞匯數(shù)量、從數(shù)據(jù)庫(kù) pk_word 集合讀取隨機(jī)單詞、格式化獲取的隨機(jī)單詞列表、創(chuàng)建房間(使用生成的單詞列表、是否好友對(duì)戰(zhàn)條件)、根據(jù)房間的 roomId(主鍵)跳轉(zhuǎn)至對(duì)戰(zhàn)頁等多個(gè)步驟流程組成。

房間數(shù)據(jù)監(jiān)聽

單詞對(duì)戰(zhàn)模式中，對(duì) room 數(shù)據(jù)集合的監(jiān)聽是對(duì)戰(zhàn)的核心要點(diǎn)，進(jìn)入對(duì)戰(zhàn)頁面后，調(diào)用數(shù)據(jù)集合的 WatchAPI 對(duì) room 集合中的當(dāng)前房間記錄進(jìn)行監(jiān)聽，在當(dāng)前房間記錄數(shù)據(jù)發(fā)生變化的時(shí)候，將會(huì)調(diào)用 watch 函數(shù)的回調(diào)，執(zhí)行相應(yīng)的業(yè)務(wù)，詳細(xì)流程如下：

好友對(duì)戰(zhàn)的實(shí)現(xiàn)

有了前面創(chuàng)建好的對(duì)戰(zhàn)房間，也建立好了對(duì)當(dāng)前房間的數(shù)據(jù)監(jiān)聽，接下來就可以實(shí)現(xiàn)有趣的對(duì)戰(zhàn)交互了。游戲會(huì)監(jiān)聽好友用戶準(zhǔn)備，更新 room 集合中的 字段，觸發(fā) watch，通知房主可以開始對(duì)戰(zhàn)；房主點(diǎn)擊開始對(duì)戰(zhàn)，會(huì)更新 room 集合中的 state 字段為 PK，watch 回調(diào)通知雙方開始對(duì)戰(zhàn)，顯示第一道題目，雙方用戶選擇釋義的時(shí)候，會(huì)把選擇結(jié)果和得分更新至 left/right 中的 grades 和 gradeSum 字段，在 watch 的回調(diào)中對(duì)雙方的選擇結(jié)果進(jìn)行顯示；當(dāng)對(duì)戰(zhàn)到達(dá)最后一道題目，且雙方都選擇完畢，進(jìn)入結(jié)算流程，將房間 state 更新至 finish；如果在對(duì)戰(zhàn)過程中，有任意用戶離開對(duì)戰(zhàn)，將修改房間 state 為 leave；對(duì)戰(zhàn)結(jié)束之后，房主可以選擇再來一局，進(jìn)行創(chuàng)建房間，更新上一個(gè)房間的 nextRoomId 字段，在 watch 回調(diào)中通知非房主用戶可以加入新的房間，進(jìn)行再來一局的對(duì)戰(zhàn)。

隨機(jī)匹配的實(shí)現(xiàn)

隨機(jī)匹配對(duì)戰(zhàn)相對(duì)于好友對(duì)戰(zhàn)的區(qū)別在于：好友對(duì)戰(zhàn)是通過房主將房間鏈接(roomId)分享到微信好友/微信群，當(dāng)用戶點(diǎn)擊分享卡片之后，會(huì)跳轉(zhuǎn)至對(duì)戰(zhàn)頁面且房間 Id 為當(dāng)前分享的房間 roomId，用戶進(jìn)入房間之后就進(jìn)行上述的監(jiān)聽操作和準(zhǔn)備、開始對(duì)戰(zhàn)等。然而隨機(jī)匹配的實(shí)現(xiàn)原理為，當(dāng)用戶觸發(fā)隨機(jī)匹配操作之后，會(huì)先在數(shù)據(jù)庫(kù)檢索有沒有符合自己所選擇的單詞書、目前房主在等待的房間，如果有則加入該房間，如果沒有則創(chuàng)建新的隨機(jī)匹配房間，等待其他用戶進(jìn)入。用戶進(jìn)入之后會(huì)自動(dòng)觸發(fā)準(zhǔn)備操作，房主在 watch 中監(jiān)聽到有用戶準(zhǔn)備，然后自動(dòng)觸發(fā)開始對(duì)戰(zhàn)操作，后續(xù)對(duì)戰(zhàn)、結(jié)算、再來一局流程則和好友對(duì)戰(zhàn)流程一致。

人機(jī)對(duì)戰(zhàn)的實(shí)現(xiàn)

人機(jī)對(duì)戰(zhàn)的核心思想為：房主用戶端隨機(jī)取一名人機(jī)用戶，房主端觸發(fā)人機(jī)的自動(dòng)準(zhǔn)備，房主端也自動(dòng)開始對(duì)戰(zhàn)，在對(duì)戰(zhàn)過程中，房主端通過頁面 UI 用戶手動(dòng)選詞，人機(jī)將在 2~5s 或房主選詞之后隨機(jī)完成選詞操作，正確率為 75%。 后期可以對(duì)正確率進(jìn)行優(yōu)化，根據(jù)用戶的歷史正確率進(jìn)行自動(dòng)化推算，實(shí)現(xiàn)更智能的人機(jī)用戶，提供更好的用戶體驗(yàn)。

最后

通過 3 個(gè)月的開發(fā)、功能迭代和運(yùn)營(yíng)，目前擁有2600 多的用戶量，小程序用戶打分為 滿分。創(chuàng)建房間且完成對(duì)戰(zhàn)12000 多局，收錄詞匯25960個(gè)，收錄了用戶65000多個(gè)生詞，十分感謝這個(gè)項(xiàng)目帶給我的成就感。

總結(jié)

以上是生活随笔為你收集整理的小程序 const moment = require('moment')_开源小程序精选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。