小程序 const moment = require('moment')_开源小程序精选
我最近在做二人對(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java打开输入框,java – 在A
- 下一篇: react 怎么获取表格_react学习