小程序我們都很熟悉，它是一種不用下載安裝就能使用的、基于微信容器的輕應用。愛掏網 - it200.com并且微信小程序提供了云開發能力，即無需搭建服務器就可實現后端服務，提供了數據庫、云存儲、云函數等能力。愛掏網 - it200.com
該項目基于「微信小程序」原生框架和「微信小程序云開發」實現單詞對戰類小程序，支持好友對戰、隨機匹配、人機對戰三種不同模式的「對戰模式」；另外提供「每日詞匯」、「生詞本」、「排行榜」、「設置」等功能，實現完整的業務閉環。愛掏網 - it200.com
單詞庫包含從小學、初中、高中、四六級、考研、雅思等常需掌握的詞匯，支持自定義詞庫，支持自定義拓展無限本單詞書。愛掏網 - it200.com
技術棧主要為微信小程序、云開發、TypeScript 等，從頭搭建項目，基于 git 管理代碼版本，使用 eslint 作為代碼格式校驗，并且組件化拆分頁面，前端和云函數均采用 TypeScript。愛掏網 - it200.com其中將大量實踐小程序能力，比如用戶信息獲取、用戶登錄、全局狀態管理、路由、wxs、npm 包、音頻播放、震動、轉發分享、動畫、云數據庫等。愛掏網 - it200.com
項目提供完整設計稿，項目演示可查看微信小程序「單詞天天斗」，掃碼體驗 ↓
- 畢設參考：項目文檔齊全、難度合適、技術廣度大、業務閉環，含項目解析文檔和教程，這是一個超級適合作為畢設學習的小程序項目。愛掏網 - it200.com
- 私有化部署運營：無論你是想通過小程序變現，還是想給自己的「英語課程班級」增加一個支持詞匯和單詞書自定義的學習渠道，這個都是一個「企業級」的項目選擇。愛掏網 - it200.com
- 有小程序的前端開發經驗，想嘗試全棧開發，快速搭建全棧項目的同學。愛掏網 - it200.com
- 掌握一定 Javascript 語法基礎，想通過一個精煉的實戰案例，來整體地學習前端開發的同學。愛掏網 - it200.com
- 想了解小程序開發知識的互聯網從業人員。愛掏網 - it200.com
- 對小程序開發感興趣的 IT 技術愛好者。愛掏網 - it200.com
- 想要開發一個「對戰」類目的小程序，比如單詞 PK，公務員考試題目 PK，詩詞 PK，駕照考試 PK 等都可以參考該項目實現。愛掏網 - it200.com
首頁
首頁主要由用戶信息展示、提示卡和單詞書工具欄、核心功能入口區、底部欄幾個模塊組成，詳細介紹如下：
- 用戶信息展示：當用戶已經授權過用戶信息的情況下，展示用戶授權的頭像和昵稱信息，如果用戶還未授權，則展示昵稱為「神秘學霸 (點擊登錄)」和默認頭像，點擊后可進行用戶信息授權。愛掏網 - it200.com另外需要展示用戶的詞力值，對戰模式的對站局數和勝利局數。愛掏網 - it200.com
- 工具欄：用戶當前的「提示卡數目」和當前選擇的「單詞書的縮寫」。愛掏網 - it200.com點擊提示卡后，彈窗提示提示卡的作用；點擊單詞書后，彈出單詞書選擇的浮窗列表，可以上滑無限加載，單詞書順序支持配置，單詞書列表每項需要展示單詞書的完整名稱和縮寫、詞匯數量、選擇人數。愛掏網 - it200.com
- 核心功能入口：隨機匹配、好友對戰、每日詞匯、生詞本入口，當點擊除了「生詞本」外的其他項，若用戶還未進行過用戶信息授權，則拉起授權，授權后跳轉至對應功能頁，「好友對戰」入口循環放大縮小動畫。愛掏網 - it200.com
- 底部欄：排行榜入口、關于&公告入口、建議反饋入口，點擊后跳轉至不同的功能頁，建議反饋跳轉頁使用微信提供的feedback實現。愛掏網 - it200.com
- 其他：整頁背景圖及設置入口，「設置」增加無限旋轉動畫，點擊后跳轉至「設置頁」。愛掏網 - it200.com新用戶打開小程序后，增加「添加小程序」引導，點擊彈窗后打開操作指南，當點擊「我知道了」后，打開小程序不再彈窗引導。愛掏網 - it200.com
對戰模式
單詞對戰模式主要由好友對戰、隨機匹配、人機對戰三種不同的模式組成，詳細介紹如下：
對戰通用介紹
- 入口：在小程序首頁可通過點擊「好友對戰」、「隨機匹配」分別進入兩種不同的模式，在「隨機匹配」模式中可開始「人機對戰」。愛掏網 - it200.com
- 答題模式：對戰模式使用根據單詞選擇單詞釋義的形式進行答題。愛掏網 - it200.com
- 對局詞匯數目：每一局對戰的詞匯數目可在「設置頁」中進行設置，支持每局 8、10、12、15、20、30 個詞匯進行對戰，對戰詞匯數由對戰創建者決定。愛掏網 - it200.com
- 對局詞匯分類：對戰的單詞書可通過首頁「單詞書」選擇進行更換，對戰的單詞分類由對戰創建者決定。愛掏網 - it200.com
- 對戰過程分數機制：對戰過程中，當有任意一方選擇后，顯示該題答題者的得分情況，每道題滿分 100 分，選擇越快分數越高，選擇正確最多獲得 100 分，最少獲得 1 分，選擇錯誤扣除 10 分。愛掏網 - it200.com
- 對戰過程答題機制：每道題最長答題時間為 10 秒，當倒計時結束，如若用戶還未答題，判定為該題答題錯誤。愛掏網 - it200.com當雙方都答題結束，切換下一題。愛掏網 - it200.com
- 提示卡機制：答題過程中，用戶可使用提示卡進行答題，當提示卡數目大于 0 時，點擊提示卡則進行選擇，得分機制和普通答題一致，但使用提示卡答題的單詞需要自動加入生詞本。愛掏網 - it200.com
- 對戰結束：每局對戰結束后，需要顯示該局的對戰結果，包含：本局所有詞匯選擇結果、用戶的選擇得分、對戰輸贏情況。愛掏網 - it200.com對戰結束后根據本局分數計算增加相應的詞力值，對戰結束頁可選擇「分享戰績」、「再來一局」。愛掏網 - it200.com
- 分享戰績：對戰結束后，用戶可分享本局對戰結果給任意用戶或群，用戶點擊分享結果可進入查看本局的對戰結果，但不顯示「分享戰績」和「再來一局」，換成顯示「創建好友對戰」和「返回首頁」。愛掏網 - it200.com
- 再來一局：對戰結束后，對戰創建者顯示「再來一局」，對戰加入者顯示「等待創建對戰房間」，當房主點擊再來一局創建同上一局對戰詞匯分類和數目相同的對戰，另外一個用戶由「等待創建對戰房間」變為「再來一局」，點擊后可加入房間。愛掏網 - it200.com
- 對戰檢測：當對戰過程中，有任一用戶退出對戰則結束對戰，提示「對方逃離」后立即進行結算。愛掏網 - it200.com對戰過程中，如果倒計時結束5秒了還沒切換至下一題，則認為有用戶連接中斷，也同樣顯示「對方逃離」后進行對戰結算。愛掏網 - it200.com
- 對戰過程其他功能：答題錯誤或者使用提示卡的單詞自動加入用戶生詞本，題目切換時自動播放單詞發音，對戰過程中播放對戰背景音樂，用戶可隨時開啟和關閉。愛掏網 - it200.com
好友對戰
- 可通過首頁「好友對戰」創建好友對戰房間，可將房間發送到個人或群聊，其他用戶點擊分享結果后，可點擊「加入房間」進行對戰加入，房間創建者「好友邀請」按鈕變為「開始對戰」，點擊后雙方開始對局。愛掏網 - it200.com
隨機匹配
- 隨機匹配不強制每局的單詞對戰數目選擇一樣，只需單詞書選擇一致的用戶就可以匹配到一起進行對戰。愛掏網 - it200.com
- 如果點擊「隨機匹配」后，沒有已經創建好的隨機匹配房間，則創建一個對戰房間，等待匹配其他后面點擊進入的用戶。愛掏網 - it200.com
- 如果 2 分鐘后，還是沒匹配到用戶，則開始一局人機對戰模式。愛掏網 - it200.com
人機對戰
- 可在隨機匹配頁面進入人機對戰模式。愛掏網 - it200.com
- 人機的用戶數據隨機抽取使用數據庫中預設的用戶數據作為頭像和昵稱展示。愛掏網 - it200.com
- 人機選擇的正確率為 75% ，人機的選擇時間隨機在 2 ~ 3 秒之間，在用戶選擇后 200 毫秒，如果人機還沒選擇，則人機立即進行答題，減少用戶等待時間。愛掏網 - it200.com
每日詞匯
- 答題模式：每日詞匯可根據用戶選擇的單詞書進行答題，根據單詞選擇單詞釋義。愛掏網 - it200.com
- 生命值：每局答題擁有三條生命值，每答錯一次則扣除一條生命值，但生命值沒有后，可通過分享小程序獲取一次復活機會，當機會完全沒有后，顯示再來一局。愛掏網 - it200.com
- 答題分數排名機制：每答題正確一題，可獲得一分，一局對戰的分數進行疊加，對戰結束時使用當前得分和自己的歷史最高得分進行比較，如果高于歷史最高得分，則記錄分數和當前選擇的單詞書，用于「每日詞匯」排行。愛掏網 - it200.com
- 倒計時：每道答題時間限制為30秒，如果沒有答題則判定為錯誤。愛掏網 - it200.com
- 其他：答題過程中可以使用答題卡進行答題，可以點擊「播放發音」選項進行該題單詞發音。愛掏網 - it200.com
其他 (生詞本 - 排行榜 - 設置)
生詞本
- 列表：顯示用戶在「對戰模式」和「每日詞匯」中答題錯誤和使用提示卡進行答題的單詞，列表按照詞匯加入時間進行排序，先顯示最新加入的生詞，列表可無限上拉加載。愛掏網 - it200.com
- 列表中默認不顯示生詞的釋義，可通過點擊「單詞」查看釋義。愛掏網 - it200.com
- 長按生詞可切換「刪除」生詞和「播放單詞發音」選項。愛掏網 - it200.com
排行榜
- 排行榜支持按照「詞力值」和「每日詞匯最高分數」進行排序，均最多顯示前20名的用戶頭像、昵稱信息。愛掏網 - it200.com
- 排行榜底部可根據當前排行榜類型顯示自己的排名信息。愛掏網 - it200.com
設置
- 對戰詞匯數目：可設置「對戰模式」的每局對戰詞匯數量。愛掏網 - it200.com
- 可設置「對戰模式」和「每日詞匯」答題過程中是否默認播放背景音樂、是否默認播放單詞發音、錯題時是否震動。愛掏網 - it200.com
- 生詞本：一鍵清空單詞本所有數據。愛掏網 - it200.com
- 用戶信息：可在設置中更新用戶的昵稱和頭像信息，支持自定義昵稱和頭像。愛掏網 - it200.com
- 關于入口 && 微信聯系方式。愛掏網 - it200.com
- 前端：微信小程序原生框架。愛掏網 - it200.com
- 服務：微信小程序云開發。愛掏網 - it200.com
- 編程語言：typeScript、Javascript、CSS。愛掏網 - it200.com
- 全局狀態管理：一個基于微信小程序的mini全局狀態管理庫 wxMiniStore。愛掏網 - it200.com
- 前端路由管理：The router for Wechat Miniprogram - wxapp-router
- 全局事件管理：Tiny 200 byte functional event emitter / pubsub - mitt
- 服務端路由、控制器等：輕量級原生實現，支持路由、控制器、Model 數據操作。愛掏網 - it200.com
- 動畫實現：小程序原生動畫，css 動畫。愛掏網 - it200.com
微信小程序云開發：手摸手開發單詞對戰小程序 (編寫中)
- 基礎知識：前端開發快速上手
- 基礎知識：微信小程序開發快速上手
- 基礎知識：微信小程序云開發快速上手
- 項目新建：小程序TypeScript云開發項目創建及項目工程化
- 首頁樣式：首頁需求介紹及布局樣式開發
- 首頁開發：全局狀態管理及登錄的實現
- 首頁交互：數據導入及首頁數據渲染
- 首頁功能：單詞書的分頁加載及選擇
- 單詞對戰：對戰需求介紹及全局路由管理
- 對戰創建：用戶信息獲取及對戰房間創建
- 對戰加入：好友邀請及加入好友房間的實現
- 對戰開始：對戰過程的實現及題目切換
- 對戰結算：對戰結果展示及再來一局的實現
- 對戰匹配：隨機匹配的實現及匹配高并發處理
- 人機模式：人機對戰的實現及全局事件管理
- 對戰總結：對戰模式其他優化及對戰模式實現總結
- 每日詞匯：需求介紹及布局樣式開發
- 詞匯選擇：答題交互實現及題目切換
- 詞匯結算：任務復活及再來一局的實現
- 生詞本：生詞本實現及頁面級上拉分頁加載實現
- 排行榜：詞力值及每日詞匯排行實現
- 其他頁面：設置頁及基于富文本的關于頁實現
- 總結：獨立開發之旅及項目復盤
- 附錄：小程序調試技巧
- 附錄：數據庫設計
- 附錄：小程序自動化腳本部署及源碼下載
部署教程
在線文檔
- 部署文檔：http://words-pk-deploy.i7xy.cn/
部署視頻教程
- 部署視頻教程
聯系我
微信：34805850
后臺
聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。