小程序項目開發全程實錄——Vue3+uni-app多端項目合集
明日科技
商品描述
《小程序項目開發全程實錄：Vue 3+uni-app多端項目合集》精選小程序開發方向的8 個熱門應用項目，實用性非常強。具體項目包含：挑戰2048 小遊戲、優選投票小程序、旅行者日記小程序、好記憶翻牌小遊戲、圈文化社區小程序、眾讀圖書借閱小程序、明日科技小程序、樂幫招商加盟小程序。本書從軟件工程的角度出發，按照項目開發的順序，系統、全面地講解每一個項目的開發實現過程。在體例上，每章對應一個項目，統一采用“開發背景→系統設計→技術準備→各功能模塊實現→項目（部署與）運行→源碼下載”的形式完整呈現項目，給讀者明確的成就感，可以讓讀者快速積累實際項目經驗與技巧，早日實現就業目標。
作者簡介
明日科技，全稱是吉林省明日科技有限公司，是一家專業從事軟件開發、教育培訓以及軟件開發教育資源整合的高科技公司，其編寫的教材非常註重選取軟件開發中的必需、常用內容，同時也很註重內容的易學、方便性以及相關知識的拓展性，深受讀者喜愛。其教材多次榮獲“全行業****品種”“全國高校出版社****書”等獎項，多個品種長期位居同類圖書銷售排行榜的前列。
目錄大綱
目錄
第 1 章 挑戰 2048 小遊戲 1
——Vue 3 + TypeScript + uni-app
1.1 開發背景 1
1.2 系統設計 2
1.2.1 開發環境 2
1.2.2 業務流程 2
1.2.3 功能結構 2
1.3 技術準備 3
1.3.1 技術概覽 3
1.3.2 Vue 3 3
1.3.3 TypeScript 4
1.3.4 uni-app 5
1.3.5 Vue 3、TypeScript 和 uni-app 的關系 6
1.4 玩家界面設計 6
1.4.1 頂部狀態欄設計 6
1.4.2 中部遊戲板設計 7
1.4.3 底部控制區設計 8
1.5 玩家界面樣式設計 9
1.5.1 頂部區域樣式 9
1.5.2 中部區域樣式 10
1.5.3 底部區域樣式 12
1.6 遊戲邏輯模塊設計 14
1.6.1 初始化矩陣 14
1.6.2 旋轉矩陣 15
1.6.3 向上合並數字 16
1.6.4 添加隨機數字 17
1.6.5 方向移動 18
1.7 事件處理模塊設計 20
1.7.1 遊戲開始 20
1.7.2 遊戲結束 20
1.7.3 方向控制 20
1.8 時間管理模塊設計 21
1.8.1 Vue 3 的 ref 21
1.8.2 計時器模塊設計 22
1.9 項目運行 22
1.10 源碼下載 25
第 2 章 優選投票小程序 26
——Vue.js + uni-app + uni-ui + uniCloud
2.1 開發背景 26
2.2 系統設計 27
2.2.1 開發環境 27
2.2.2 業務流程 27
2.2.3 功能結構 27
2.3 技術準備 28
2.3.1 技術概覽 28
2.3.2 uniCloud 雲開發 28
2.3.3 uni-ui 組件庫 29
2.4 數據庫設計 30
2.4.1 數據庫概要說明 30
2.4.2 集合結構 30
2.5 用戶管理模塊設計 31
2.5.1 用戶登錄/註冊 32
2.5.2 個人信息管理 33
2.5.3 權限控制 34
2.6 投票創建模塊設計 35
2.6.1 基礎信息設置 35
2.6.2 選項配置 36
2.6.3 規則設定 38
2.6.4 數據校驗和數據提交 39
2.7 投票展示模塊設計 41
2.7.1 列表頁設計 41
2.7.2 詳情頁設計 43
2.7.3 狀態標識設計 44
2.8 投票交互模塊設計 46
2.8.1 投票提交 46
2.8.2 防重復機制 49
2.8.3 結果反饋 50
2.9 數據統計模塊設計 51
2.9.1 排行榜 51
2.9.2 個人記錄 52
2.9.3 實時統計 52
2.10 項目部署與運行 53
2.11 源碼下載 57
第 3 章 旅行者日記小程序 58
——Vue 3 + TypeScript + SCSS + uni-app + uniCloud
3.1 開發背景 58
3.2 系統設計 59
3.2.1 開發環境 59
3.2.2 業務流程 59
3.2.3 功能結構 60
3.3 技術準備 60
3.3.1 技術概覽 60
3.3.2 SCSS 61
3.4 數據庫設計 62
3.4.1 數據庫概要說明 62
3.4.2 集合結構 62
3.5 用戶認證模塊設計 64
3.5.1 用戶登錄/註冊 64
3.5.2 權限控制 65
3.5.3 會話管理 65
3.6 首頁模塊設計 66
3.6.1 最新文章列表和熱門文章列表 66
3.6.2 文章詳情 68
3.6.3 點贊/取消點贊 68
3.7 分類模塊設計 69
3.7.1 分類管理 69
3.7.2 分類文章列表 71
3.7.3 輪播圖展示 73
3.8 發布模塊設計 74
3.8.1 富文本編輯 74
3.8.2 分類選擇 74
3.8.3 發布設置 75
3.9 個人中心模塊設計 75
3.9.1 個人信息展示 76
3.9.2 我的點贊 77
3.9.3 我的分類 77
3.9.4 統計數據 78
3.10 項目部署與運行 79
3.11 源碼下載 81
第 4 章 好記憶翻牌小遊戲 82
——uni.showToast + Fisher-Yates 算法 + picker 組件 + localStorage
4.1 開發背景 83
4.2 系統設計 83
4.2.1 開發環境 83
4.2.2 業務流程 83
4.2.3 功能結構 84
4.3 技術準備 85
4.3.1 uni.showToast 85
4.3.2 Fisher-Yates 算法 85
4.3.3 picker 組件 86
4.3.4 localStorage 87
4.4 初始界面設計 87
4.5 遊戲功能設計 92
4.5.1 記憶階段功能設計 92
4.5.2 遊戲階段功能設計 93
4.5.3 翻開卡牌功能設計 93
4.5.4 倒計時功能設計 95
4.6 彈出層設計 96
4.7 擴展功能設計 99
4.7.1 選擇遊戲難度功能設計 99
4.7.2 記錄最佳成績功能設計 102
4.8 項目運行 104
4.9 源碼下載 105
第 5 章 圈文化社區小程序 106
——Vue.js + uView UI + vk-unicloud + Pinia + MongoDB
5.1 開發背景 107
5.2 系統設計 107
5.2.1 開發環境 107
5.2.2 業務流程 107
5.2.3 功能結構 108
5.3 技術準備 109
5.3.1 uView UI 109
5.3.2 vk-unicloud 112
5.3.3 Pinia 115
5.3.4 插件安裝 116
5.4 數據庫設計 117
5.4.1 數據庫概要說明 117
5.4.2 集合結構 117
5.5 首頁設計 120
5.5.1 首頁頭部組件設計 120
5.5.2 正在加載組件設計 121
5.5.3 推薦文章列表項組件設計 121
5.5.4 空列表項組件設計 123
5.5.5 首頁組件設計 124
5.6 圈子功能設計 127
5.6.1 圈子頁面設計 127
5.6.2 全部圈子展示頁面設計 130
5.6.3 圈子詳情頁面設計 132
5.7 發布功能設計 134
5.7.1 發布文章功能設計 134
5.7.2 創建圈子功能設計 137
5.8 文章詳情頁面和評論功能設計 139
5.8.1 文章詳情頁面設計 140
5.8.2 評論功能設計 142
5.8.3 點贊功能設計 144
5.9 登錄和註冊功能設計 145
5.9.1 用戶登錄功能設計 145
5.9.2 用戶註冊功能設計 147
5.10 “我的”頁面功能設計 148
5.10.1 “我的”頁面設計 149
5.10.2 編輯資料頁面設計 151
5.10.3 “我的文章”頁面設計 153
5.11 項目部署與運行 155
5.12 源碼下載 159
第 6 章 眾讀圖書借閱小程序 160
——Vue.js + uView UI + vk-unicloud + Wot UI + uni-ui + MongoDB
6.1 開發背景 161
6.2 系統設計 161
6.2.1 開發環境 161
6.2.2 業務流程 161
6.2.3 功能結構 162
6.3 技術準備 163
6.3.1 Wot UI 164
6.3.2 uni-ui 165
6.3.3 插件和組件安裝 167
6.4 數據庫設計 168
6.4.1 數據庫概要說明 168
6.4.2 集合結構 168
6.5 前臺首頁設計 170
6.6 圖書分類頁面設計 172
6.7 圖書借閱功能設計 176
6.7.1 申請借閱頁面設計 176
6.7.2 借閱訂單頁面設計 178
6.7.3 訂單詳情頁面設計 182
6.8 登錄和註冊功能簡介 184
6.8.1 用戶登錄 184
6.8.2 用戶註冊 184
6.9 個人主頁功能設計 185
6.9.1 “我的”頁面設計 185
6.9.2 查看取書記錄功能設計 189
6.9.3 查看還書記錄功能設計 190
6.10 後臺圖書管理模塊設計 191
6.10.1 圖書列表管理 191
6.10.2 輪播圖列表管理 195
6.10.3 圖書分類管理 199
6.10.4 借閱訂單管理 202
6.11 項目部署與運行 206
6.12 源碼下載 208
第 7 章 明日科技小程序 209
——Vue.js + uni-app + uniCloud
7.1 開發背景 210
7.2 系統設計 210
7.2.1 開發環境 210
7.2.2 業務流程 210
7.2.3 功能結構 210
7.3 技術準備 212
7.4 數據庫設計 212
7.4.1 數據庫概要說明 212
7.4.2 集合結構 213
7.5 Tab 設置模塊設計 213
7.5.1 Tab 欄文字設置 214
7.5.2 Tab 顏色設置 214
7.5.3 數據驗證 215
7.5.4 數據持久化 215
7.6 輪播圖管理模塊設計 216
7.6.1 列表頁實現 216
7.6.2 添加頁實現 217
7.6.3 編輯頁實現 219
7.7 產品介紹管理模塊設計 220
7.7.1 數據結構設計 221
7.7.2 核心功能實現 221
7.8 公司簡介管理模塊設計 223
7.8.1 數據結構設計 223
7.8.2 核心功能實現 224
7.9 “聯系我們”管理模塊設計 226
7.9.1 模板設計 227
7.9.2 腳本設計 228
7.10 明日科技小程序前臺設計 230
7.10.1 頂部導航欄設計 232
7.10.2 輪播圖模塊設計 234
7.10.3 產品介紹模塊設計 236
7.10.4 公司簡介模塊設計 239
7.10.5 “聯系我們”模塊設計 241
7.11 項目部署與運行 244
7.12 源碼下載 247
第 8 章 樂幫招商加盟小程序 248
——Vue.js + uView UI + vk-unicloud + Wot UI + uni-ui + MongoDB
8.1 開發背景 248
8.2 系統設計 249
8.2.1 開發環境 249
8.2.2 業務流程 249
8.2.3 功能結構 250
8.3 技術準備 251
8.4 數據庫設計 253
8.4.1 數據庫概要說明 253
8.4.2 集合結構 253
8.5 前臺首頁設計 255
8.6 行業分類頁面設計 258
8.7 申請加盟功能設計 260
8.7.1 加盟咨詢頁面設計 260
8.7.2 查看申請加盟列表頁面設計 265
8.8 登錄和註冊功能簡介 267
8.8.1 用戶登錄 267
8.8.2 用戶註冊 268
8.9 個人主頁功能設計 269
8.9.1 “我的”頁面設計 269
8.9.2 查看收藏招商信息頁面設計 272
8.10 後臺登錄功能設計 274
8.11 後臺招商加盟模塊設計 277
8.11.1 輪播圖管理 277
8.11.2 行業分類管理 280
8.11.3 招商信息管理 283
8.12 項目部署與運行 288
8.13 源碼下載 290
