小程序 const moment = require('moment')_开源小程序精选
我最近在做二人對戰模式答題,體驗了不少小程序,找到一個開源的,現推薦給大家
小程序代碼地址
微信小程序云開發實現的單詞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')_开源小程序精选的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java打开输入框,java – 在A
- 下一篇: mysql+性能+计算列_MYSQL性能