微信小程序項(xiàng)目開發(fā)實(shí)戰(zhàn)：用WePY、mpvue、Taro打造高效的小程序

第1章 走進(jìn)微信小程序 1
1.1 小程序的起源 1
1.1.1 什么是小程序 2
1.1.2 小程序的發(fā)展 3
1.2 開發(fā)小程序的第一步 4
1.2.1 注冊(cè)小程序 4
1.2.2 設(shè)置小程序 6
1.3 小程序開發(fā)工具 8
1.3.1 下載和安裝 8
1.3.2 圖解常用功能 11
1.4 實(shí)戰(zhàn)1：Hello World 13
1.4.1 編寫頁面鏈接 13
1.4.2 編寫新頁面內(nèi)容 15
1.5 什么是WePY 17
1.5.1 為什么選擇WePY 17
1.5.2 WePY開發(fā)環(huán)境的安裝 18
1.6 實(shí)戰(zhàn)2：WePY版Hello World 20
1.6.1 創(chuàng)建HelloWorld項(xiàng)目 20
1.6.2 編寫頁面代碼 23
1.7 小結(jié)和練習(xí) 26
1.7.1 小結(jié) 26
1.7.2 練習(xí) 26

第2章 微信小程序組件 27
2.1 小程序的視圖容器 27
2.1.1 最基礎(chǔ)的組件：view 28
2.1.2 可滾動(dòng)視圖區(qū)域：scroll-view 28
2.1.3 輪播圖片：swiper 28
2.1.4 可移動(dòng)視圖容器：movable-view 29
2.1.5 超過原生組件的層級(jí)：cover-view和cover-image 30
2.2 小程序的基礎(chǔ)組件 32
2.2.1 圖標(biāo)組件：icon 32
2.2.2 文字組件：text 33
2.2.3 富文本組件：rich-text 34
2.2.4 進(jìn)度條組件：progress 34
2.2.5 表單組件：form 35
2.2.6 極其重要的按鈕組件：button 36
2.3 媒體組件和導(dǎo)航組件 37
2.3.1 導(dǎo)航組件：navigator 37
2.3.2 圖片組件：image 38
2.3.3 視頻組件：video和API：wx.createVideoContext 43
2.3.4 拍照組件：camera和API：wx.createCameraContext 45
2.4 地圖組件和畫布組件 50
2.4.1 地圖組件：map 50
2.4.2 畫布組件：Canvas和API：wx.createCanvasContext 51
2.5 小程序提供的HTML支持和開放能力支持 54
2.5.1 開放數(shù)據(jù)域：open-data 55
2.5.2 HTML等網(wǎng)頁支持：web-view 56
2.5.3 開發(fā)者的收入來源：ad 58
2.5.4 小程序引導(dǎo)關(guān)注公眾號(hào)：official-account 59
2.6 小結(jié)和練習(xí) 60
2.6.1 小結(jié) 60
2.6.2 練習(xí) 60

第3章 微信小程序API 61
3.1 小程序基礎(chǔ)——網(wǎng)絡(luò)請(qǐng)求API 62
3.1.1 發(fā)起請(qǐng)求 62
3.1.2 上傳和下載 64
3.1.3 WebSocket 65
3.2 實(shí)戰(zhàn)：簡(jiǎn)單的socket聊天小程序 68
3.2.1 服務(wù)器端開發(fā) 68
3.2.2 客戶端開發(fā) 70
3.3 小程序的基礎(chǔ)API——更新和設(shè)備信息 77
3.3.1 小程序的自動(dòng)更新 77
3.3.2 獲取用戶終端信息 79
3.3.3 獲取小程序相關(guān)信息 81
3.3.4 獲取設(shè)備Wi-Fi狀態(tài) 81
3.3.5 獲取設(shè)備加速計(jì)、陀螺儀和方向 83
3.3.6 獲取設(shè)備藍(lán)牙和NFC 84
3.3.7 設(shè)備屏幕API 86
3.3.8 設(shè)備的掃碼和振動(dòng) 87
3.3.9 獲取設(shè)備的剪貼板 88
3.3.10 獲取設(shè)備位置的API 88
3.4 路由頁面跳轉(zhuǎn)和數(shù)據(jù)緩存API 90
3.4.1 頁面之間的跳轉(zhuǎn) 90
3.4.2 數(shù)據(jù)緩存添加和獲取API 92
3.4.3 數(shù)據(jù)緩存刪除API 94
3.5 小程序界面交互API 95
3.5.1 提示框和模態(tài)框 95
3.5.2 導(dǎo)航欄的單獨(dú)設(shè)置 97
3.5.3 Tab Bar的設(shè)置 98
3.5.4 字體和滾動(dòng) 101
3.5.5 其他顯示API 102
3.6 媒體和文件 102
3.6.1 圖片相關(guān)API 102
3.6.2 視頻相關(guān)API 104
3.6.3 錄音相關(guān)API 105
3.6.4 文件相關(guān)API 106
3.7 其他開放接口 108
3.7.1 客服API 108
3.7.2 轉(zhuǎn)發(fā)API 110
3.7.3 收貨地址 111
3.8 小結(jié)和練習(xí) 112
3.8.1 小結(jié) 112
3.8.2 練習(xí) 112

第4章 微信小程序的服務(wù)器端 113
4.1 后臺(tái)API編寫入門 113
4.1.1 后臺(tái)技術(shù)的選擇 114
4.1.2 后臺(tái)技術(shù)環(huán)境搭建 114
4.1.3 直接上手的框架 117
4.1.4 搭建一個(gè)簡(jiǎn)單的框架服務(wù)器 117
4.1.5 MySQL的使用 120
4.1.6 對(duì)于后端技術(shù)的說明 121
4.1.7 路由創(chuàng)建 121
4.2 用戶系統(tǒng)的搭建 122
4.2.1 用戶系統(tǒng)的邏輯 122
4.2.2 用戶系統(tǒng)的實(shí)現(xiàn)編碼 124
4.2.3 用戶系統(tǒng)的測(cè)試 132
4.3 其他常用服務(wù)器API 135
4.3.1 二維碼API 135
4.3.2 運(yùn)動(dòng)數(shù)據(jù)API 140
4.3.3 獲取用戶手機(jī)號(hào) 148
4.4 小結(jié)與練習(xí) 151
4.4.1 小結(jié) 151
4.4.2 練習(xí) 151

第5章 實(shí)戰(zhàn)：?jiǎn)柧硇〕绦? 152
5.1 問卷小程序簡(jiǎn)介 152
5.1.1 為什么需要問卷調(diào)查 153
5.1.2 需求分析 153
5.2 問卷小程序具體編碼 154
5.2.1 后端編寫 154
5.2.2 小程序編寫 162
5.3 小結(jié)和練習(xí) 168
5.3.1 小結(jié) 168
5.3.2 練習(xí) 168

第6章 實(shí)戰(zhàn)：搖一搖游戲 169
6.1 項(xiàng)目分析 169
6.1.1 搖一搖功能分析 170
6.1.2 搖一搖項(xiàng)目規(guī)劃 171
6.1.3 搖一搖接口定義 172
6.2 項(xiàng)目編碼 173
6.2.1 搖一搖小程序的后臺(tái) 173
6.2.2 搖一搖小程序的首頁 185
6.2.3 搖一搖小程序的填寫頁面 188
6.2.4 搖一搖小程序的搖動(dòng)頁面 194
6.2.5 搖一搖小程序排行榜 202
6.3 小結(jié)和練習(xí) 204
6.3.1 小結(jié) 204
6.3.2 練習(xí) 205

第7章 實(shí)戰(zhàn)：百度圖片識(shí)別API 206
7.1 項(xiàng)目分析 206
7.1.1 流行的識(shí)別技術(shù) 207
7.1.2 功能設(shè)計(jì) 207
7.1.3 路由設(shè)計(jì) 208
7.2 具體編碼 208
7.2.1 系統(tǒng)后臺(tái)編碼 208
7.2.2 上傳圖片功能 215
7.2.3 小程序圖片解析顯示 219
7.3 小結(jié)和練習(xí) 221
7.3.1 小結(jié) 221
7.3.2 練習(xí) 221

第8章 實(shí)戰(zhàn)：文字信息發(fā)布小程序 222
8.1 項(xiàng)目需求 222
8.1.1 功能劃分 223
8.1.2 路由劃分 223
8.2 具體編碼 224
8.2.1 后臺(tái)實(shí)現(xiàn) 224
8.2.2 新建小程序項(xiàng)目 233
8.2.3 首頁實(shí)現(xiàn) 234
8.2.4 首頁邏輯編寫 237
8.2.5 首頁樣式編寫 239
8.2.6 文章詳情頁實(shí)現(xiàn) 241
8.2.7 文章內(nèi)容顯示 243
8.2.8 文章評(píng)論顯示 246
8.2.9 文章點(diǎn)贊功能 248
8.3 小結(jié)和練習(xí) 251
8.3.1 小結(jié) 251
8.3.2 練習(xí) 251

第9章 實(shí)戰(zhàn)：使用Canvas繪制圖片 252
9.1 如何使用Canvas繪制生成圖片 252
9.1.1 為什么需要繪制生成圖片 253
9.1.2 繪制生成圖片的必要因素 253
9.2 實(shí)戰(zhàn)1：在微信小程序中繪制需要的圖片 254
9.2.1 需求分析 254
9.2.2 創(chuàng)建小程序 255
9.2.3 創(chuàng)建組件 256
9.2.4 圖片主頁 257
9.2.5 繪制圖片 261
9.3 實(shí)戰(zhàn)2：流行的手機(jī)背景生成小程序 262
9.3.1 系統(tǒng)規(guī)劃設(shè)計(jì) 262
9.3.2 后臺(tái)路由設(shè)計(jì) 264
9.3.3 系統(tǒng)后臺(tái)編碼 264
9.3.4 小程序頁面編寫 266
9.3.5 小程序邏輯編寫 269
9.3.6 小程序繪制邏輯編寫 273
9.4 小結(jié)和練習(xí) 275
9.4.1 小結(jié) 275
9.4.2 練習(xí) 275

第10章 實(shí)戰(zhàn)：使用mpvue實(shí)現(xiàn)“歷史今日”小程序 276
10.1 支持Vue.js語法的mpvue框架 276
10.1.1 mpvue框架基礎(chǔ) 277
10.1.2 mpvue框架環(huán)境搭建 277
10.1.3 mpvue快速入門 280
10.1.4 項(xiàng)目工程文件說明 281
10.2 使用mpvue創(chuàng)建“歷史今日”小程序 285
10.2.1 項(xiàng)目規(guī)劃 285
10.2.2 項(xiàng)目新建頁面 287
10.2.3 請(qǐng)求接口邏輯編寫 288
10.2.4 項(xiàng)目顯示編寫 291
10.2.5 項(xiàng)目生成 295
10.3 小結(jié)和練習(xí) 296
10.3.1 小結(jié) 296
10.3.2 練習(xí) 297

第11章 實(shí)戰(zhàn)：使用Taro實(shí)現(xiàn)星座測(cè)試小程序 298
11.1 支持React語法的Taro框架 299
11.1.1 什么是Taro 299
11.1.2 Taro快速入門 300
11.2 使用Taro框架創(chuàng)建星座測(cè)試小程序 303
11.2.1 接口說明 303
11.2.2 新建Taro小程序 304
11.2.3 星座測(cè)試小程序主頁 305
11.2.4 星座測(cè)試小程序主頁的組件 307
11.2.5 星座測(cè)試詳情頁 310
11.3 項(xiàng)目編譯與生成 314
11.3.1 編譯為微信小程序 314
11.3.2 編譯為百度小程序 315
11.3.3 編譯為支付寶小程序 318
11.3.4 編譯為其他小程序 321
11.4 小結(jié)和練習(xí) 321
11.4.1 小結(jié) 321
11.4.2 練習(xí) 321