我最近在做二人對戰模式答題，體驗了不少小程序，找到一個開源的，現推薦給大家

小程序代碼地址

微信小程序云開發實現的單詞PK小程序，支持好友對戰、隨機匹配、人機模式，完整代碼 ~ UI可以披靡市場上所有同類型小程序，體驗也是一流的哦 ~ 目前已經有同學在QQ小程序、阿里小程序部署；也有同學修改成了公務員題庫?~ 期待看到各類優秀產品上線哦 ~

上線說明: 源碼開源，但上線需要經過作者許可哦 ~ 開發不易、創作不易。

收費服務

微信：34805850，期待大佬關注微信公眾號：前端面試之道

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

在線體驗

UI截圖

????????

需求概述

單詞對戰模式

對戰業務需求解析

單詞對戰的游戲核心為：隨機生成一定數量的單詞列表的單選題類型題目，題目文本為該單詞，有 4 個隨機中文釋義的選項，其中僅有一個為正確釋義，雙方用戶一起選擇釋義，正確率高且速度快的用戶獲得對戰勝利。

單詞對戰游戲分為好友對戰、隨機匹配、人機對戰三種對戰的形式，均通過上述游戲核心的方式進行對戰。

對戰設置

用戶還可以對以下對戰信息進行自定義設置

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

其他細節優化

• 加入正在對戰過程中、對戰已結束、房間已滿等非正常類型房間，做出相應的交互提示，然后跳轉至首頁
• 在對戰過程中任意用戶退出游戲或掉線，則結束本局游戲，進行對戰結算
• 對戰結束后，房主可以選擇再來一局，當房主創建好再來一局的房間后，另外一個用戶可以選擇再來一局，加入繼續對戰
• 在對戰過程中，選擇錯誤的單詞或使用提示卡選擇的單詞，自動加入到用戶生詞本，用戶可以在生詞本中進行復習
• 加入倒計時機制，每一個單詞的對戰周期為 10s，超時則判斷為錯選

完整對戰流程圖

詞匯挑戰模式

詞匯挑戰模式業務解析

詞匯挑戰的核心為：獲取隨機的一個單詞作為單選題題目文本，包含四個中文釋義選項，其中一個為正確答案，選擇錯誤則失敗，選擇正確再獲取隨機單詞，循環下去。

挑戰復活機制

在詞匯挑戰的過程中，如果選擇錯誤，可以有兩次復活機會

• 首次復活：通過分享小程序獲得復活機會
• 第二次復活：通過觀看一個 15s 之內的廣告獲得復活機會
• 當第三次選擇錯誤，顯示再來一局，從零開始記錄分數

其他

• 詞匯挑戰每正確一個詞，得分增加 100 分
• 當挑戰失敗的時候，如果挑戰分數高于歷史最高分數，則修改歷史最高分數為當前分數，用于排行榜排行
• 可以使用提示卡進行選擇

完整挑戰流程圖

其他功能

生詞本

• 用戶可以在生詞本中查看在單詞對戰模式、詞匯挑戰模式中選擇錯誤的單詞
• 可以查看單詞及單詞釋義、播放單詞發音、刪詞生詞
• 在設置中可以一鍵清空所有生詞

學習打卡

• 當在單詞對戰模式中，當天對戰局數超過 5 局且勝利局數超過 2 局，則打卡成功
• 可以在在打卡頁面查看當日進度，可以查看歷史的打卡日歷

排行榜

• 排行榜包含詞力值、詞匯挑戰分數、簽到天數等排名信息
• 每類排行版顯示前 20 名的排名頭像和昵稱以及分數
• 顯示自己當前類目下的排名以及分數

用戶相關

• 數據庫應記錄的用戶數據包含：昵稱、頭像、對戰局數、勝利局數、選擇的單詞本、詞力值
• 詞力值機制：在單詞對戰模式、單詞挑戰模式中，每局對戰都可以獲得相應的詞力值分數，作為用戶的經驗值

其他

• 建議反饋：用戶可以在小程序中，反饋意見，然后再后臺可以查看用戶留言
• 打賞作者：用戶可以在小程序中，通過掃碼的形式，對小程序進行打賞
• 小程序友情鏈接：可通過當前小程序跳轉至作者的其他小程序中
• 小程序中加入部分廣告，不影響用戶體驗

團隊組成

整個項目的產品方案、UI 設計、開發、測試、上線運營等皆一個人獨立完成。

技術方案

設計

設置使用sketch完成，設計稿上傳至藍湖，作為數據標注。

藍湖鏈接

鏈接：?密碼: ydIX

設計圖源文件

下載鏈接:??密碼:vylm

開發技術棧

其他工具

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

系統架構

項目文件簡介

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

云開發數據交互的 Model 層設計

在該項目中，將所有的服務端交互、數據庫的讀取、云函數的調用都放到了 model 目錄下，對該目錄結構深入解析。

(1) Base.js

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

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 之外的文件)

在這些文件中，對應和文件名同名的集合的所有數據操作，比如 中，包含了所有對 pk_book 集合的所有數據增刪改查操作。

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)

在該文件中，對所有的數據集合操作文件進行引入，然后又導出，之后在其他文件中的的調用，就只需要引入該文件即可，就可以實現調用不同的集合操作。

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 }

環境區分

在小程序初始化的時候，對云開發環境進行了全局的初始化，區別開發環境和正式環境。

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

難點解析

難點 1：單詞數據

1. 抓包分析和代碼實現

本課題中使用 MacOS 系統、Charles 抓包軟件、安卓手機作為抓包的基本環境。首先在電腦上安裝 Charles，然后開啟 Proxy 抓包代理，同局域網下配置手機 WiFi 代理實現抓取手機包。

2. 單詞數據整理

通過爬蟲下來的單詞數據如下，對于該課題的項目單詞數據相對復雜，所以我們對單詞數據結構進行簡化，只提取項目中需要的字段，以單詞 yum 為例：

優化前：

{"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"}

優化后：

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

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

3. 數據文件批量導入(傳入數據庫)

由于微信小程序云開發控制臺不支持數據文件的批量導入數據庫，所以開發了一個支持云開發數據集合批量導入的程序

難點 2：單詞對戰模式

本節詳細解析單詞對戰模式的實現，將從創建房間(生成隨機詞匯、新增房間數據)、對戰監聽、對戰過程(好友對戰、隨機匹配、人機對戰)、對戰結算的角度進行分析。

創建對戰房間

對戰房間的創建，分為觸發創建房間事件、獲取當前選擇的單詞書、獲取單詞對戰每一局的詞匯數量、從數據庫 pk_word 集合讀取隨機單詞、格式化獲取的隨機單詞列表、創建房間(使用生成的單詞列表、是否好友對戰條件)、根據房間的 roomId(主鍵)跳轉至對戰頁等多個步驟流程組成。

房間數據監聽

單詞對戰模式中，對 room 數據集合的監聽是對戰的核心要點，進入對戰頁面后，調用數據集合的 WatchAPI 對 room 集合中的當前房間記錄進行監聽，在當前房間記錄數據發生變化的時候，將會調用 watch 函數的回調，執行相應的業務，詳細流程如下：

好友對戰的實現

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

隨機匹配的實現

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

人機對戰的實現

人機對戰的核心思想為：房主用戶端隨機取一名人機用戶，房主端觸發人機的自動準備，房主端也自動開始對戰，在對戰過程中，房主端通過頁面 UI 用戶手動選詞，人機將在 2~5s 或房主選詞之后隨機完成選詞操作，正確率為 75%。 后期可以對正確率進行優化，根據用戶的歷史正確率進行自動化推算，實現更智能的人機用戶，提供更好的用戶體驗。

最后

通過 3 個月的開發、功能迭代和運營，目前擁有2600 多的用戶量，小程序用戶打分為 滿分。創建房間且完成對戰12000 多局，收錄詞匯25960個，收錄了用戶65000多個生詞，十分感謝這個項目帶給我的成就感。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。