內容簡介
本書的原則是實戰,目標是高效開發微信小程式。藉助WePY、mpvue、Taro等多個框架,幫助讀者從零開始迅速掌握小程式的開發步驟和技巧。全書不僅涉及小程式的前台UI,還涉及後台邏輯的編寫,旨在讓讀者真正獲得小程式項目的開發能力。本書主要分為三個部分。第一部分介紹微信小程式的組件和API,以及官方的WePY框架的下載和使用方法。第二部分是WePY框架的實戰,包括問卷、感測器、富文本顯示、上傳檔案、Canvas等常用小程式的開發。第三部分是兩個常用的小程式框架mpvue和Taro的實戰案例,包括“歷史今日”、星座測試小程式的開發。本書適合想要製作和學習微信小程式的讀者,尤其適合零編程基礎的愛好者和小程式開發的初學者,讀者無須理解過於基礎的部分,本書以需求中的功能為開發的重點,涉及大量流行的小程式實例。本書可以快速提高讀者的興趣,進而使讀者更加深入地學習相關知識。
目錄
第1章 走進微信小程式 1
1.1 小程式的起源 1
1.1.1 什麼是小程式 2
1.1.2 小程式的發展 3
1.2 開發小程式的第一步 4
1.2.1 註冊小程式 4
1.2.2 設定小程式 6
1.3 小程式開發工具 8
1.3.1 下載和安裝 8
1.3.2 圖解常用功能 11
1.4 實戰1:Hello World 13
1.4.1 編寫頁面連結 13
1.4.2 編寫新頁面內容 15
1.5 什麼是WePY 17
1.5.1 為什麼選擇WePY 17
1.5.2 WePY開發環境的安裝 18
1.6 實戰2:WePY版Hello World 20
1.6.1 創建HelloWorld項目 20
1.6.2 編寫頁面代碼 23
1.7 小結和練習 26
1.7.1 小結 26
1.7.2 練習 26
第2章 微信小程式組件 27
2.1 小程式的視圖容器 27
2.1.1 最基礎的組件:view 28
2.1.2 可滾動視圖區域:scroll-view 28
2.1.3 輪播圖片:swiper 28
2.1.4 可移動視圖容器:movable-view 29
2.1.5 超過原生組件的層級:cover-view和cover-image 30
2.2 小程式的基礎組件 32
2.2.1 圖示組件:icon 32
2.2.2 文字組件:text 33
2.2.3 富文本組件:rich-text 34
2.2.4 進度條組件:progress 34
2.2.5 表單組件:form 35
2.2.6 極其重要的按鈕組件:button 36
2.3 媒體組件和導航組件 37
2.3.1 導航組件: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 開放數據域:open-data 55
2.5.2 HTML等網頁支持:web-view 56
2.5.3 開發者的收入來源:ad 58
2.5.4 小程式引導關注公眾號:official-account 59
2.6 小結和練習 60
2.6.1 小結 60
2.6.2 練習 60
第3章 微信小程式API 61
3.1 小程式基礎——網路請求API 62
3.1.1 發起請求 62
3.1.2 上傳和下載 64
3.1.3 WebSocket 65
3.2 實戰:簡單的socket聊天小程式 68
3.2.1 伺服器端開發 68
3.2.2 客戶端開發 70
3.3 小程式的基礎API——更新和設備信息 77
3.3.1 小程式的自動更新 77
3.3.2 獲取用戶終端信息 79
3.3.3 獲取小程式相關信息 81
3.3.4 獲取設備Wi-Fi狀態 81
3.3.5 獲取設備加速計、陀螺儀和方向 83
3.3.6 獲取設備藍牙和NFC 84
3.3.7 設備螢幕API 86
3.3.8 設備的掃碼和振動 87
3.3.9 獲取設備的剪貼簿 88
3.3.10 獲取設備位置的API 88
3.4 路由頁面跳轉和數據快取API 90
3.4.1 頁面之間的跳轉 90
3.4.2 數據快取添加和獲取API 92
3.4.3 數據快取刪除API 94
3.5 小程式界面互動API 95
3.5.1 提示框和模態框 95
3.5.2 導航欄的單獨設定 97
3.5.3 Tab Bar的設定 98
3.5.4 字型和滾動 101
3.5.5 其他顯示API 102
3.6 媒體和檔案 102
3.6.1 圖片相關API 102
3.6.2 視頻相關API 104
3.6.3 錄音相關API 105
3.6.4 檔案相關API 106
3.7 其他開放接口 108
3.7.1 客服API 108
3.7.2 轉發API 110
3.7.3 收貨地址 111
3.8 小結和練習 112
3.8.1 小結 112
3.8.2 練習 112
第4章 微信小程式的伺服器端 113
4.1 後台API編寫入門 113
4.1.1 後台技術的選擇 114
4.1.2 後台技術環境搭建 114
4.1.3 直接上手的框架 117
4.1.4 搭建一個簡單的框架伺服器 117
4.1.5 MySQL的使用 120
4.1.6 對於後端技術的說明 121
4.1.7 路由創建 121
4.2 用戶系統的搭建 122
4.2.1 用戶系統的邏輯 122
4.2.2 用戶系統的實現編碼 124
4.2.3 用戶系統的測試 132
4.3 其他常用伺服器API 135
4.3.1 二維碼API 135
4.3.2 運動數據API 140
4.3.3 獲取用戶手機號 148
4.4 小結與練習 151
4.4.1 小結 151
4.4.2 練習 151
第5章 實戰:問卷小程式 152
5.1 問卷小程式簡介 152
5.1.1 為什麼需要問卷調查 153
5.1.2 需求分析 153
5.2 問卷小程式具體編碼 154
5.2.1 後端編寫 154
5.2.2 小程式編寫 162
5.3 小結和練習 168
5.3.1 小結 168
5.3.2 練習 168
第6章 實戰:搖一搖遊戲 169
6.1 項目分析 169
6.1.1 搖一搖功能分析 170
6.1.2 搖一搖項目規劃 171
6.1.3 搖一搖接口定義 172
6.2 項目編碼 173
6.2.1 搖一搖小程式的後台 173
6.2.2 搖一搖小程式的首頁 185
6.2.3 搖一搖小程式的填寫頁面 188
6.2.4 搖一搖小程式的搖動頁面 194
6.2.5 搖一搖小程式排行榜 202
6.3 小結和練習 204
6.3.1 小結 204
6.3.2 練習 205
第7章 實戰:百度圖片識別API 206
7.1 項目分析 206
7.1.1 流行的識別技術 207
7.1.2 功能設計 207
7.1.3 路由設計 208
7.2 具體編碼 208
7.2.1 系統後台編碼 208
7.2.2 上傳圖片功能 215
7.2.3 小程式圖片解析顯示 219
7.3 小結和練習 221
7.3.1 小結 221
7.3.2 練習 221
第8章 實戰:文字信息發布小程式 222
8.1 項目需求 222
8.1.1 功能劃分 223
8.1.2 路由劃分 223
8.2 具體編碼 224
8.2.1 後台實現 224
8.2.2 新建小程式項目 233
8.2.3 首頁實現 234
8.2.4 首頁邏輯編寫 237
8.2.5 首頁樣式編寫 239
8.2.6 文章詳情頁實現 241
8.2.7 文章內容顯示 243
8.2.8 文章評論顯示 246
8.2.9 文章點讚功能 248
8.3 小結和練習 251
8.3.1 小結 251
8.3.2 練習 251
第9章 實戰:使用Canvas繪製圖片 252
9.1 如何使用Canvas繪製生成圖片 252
9.1.1 為什麼需要繪製生成圖片 253
9.1.2 繪製生成圖片的必要因素 253
9.2 實戰1:在微信小程式中繪製需要的圖片 254
9.2.1 需求分析 254
9.2.2 創建小程式 255
9.2.3 創建組件 256
9.2.4 圖片主頁 257
9.2.5 繪製圖片 261
9.3 實戰2:流行的手機背景生成小程式 262
9.3.1 系統規劃設計 262
9.3.2 後台路由設計 264
9.3.3 系統後台編碼 264
9.3.4 小程式頁面編寫 266
9.3.5 小程式邏輯編寫 269
9.3.6 小程式繪製邏輯編寫 273
9.4 小結和練習 275
9.4.1 小結 275
9.4.2 練習 275
第10章 實戰:使用mpvue實現“歷史今日”小程式 276
10.1 支持Vue.js語法的mpvue框架 276
10.1.1 mpvue框架基礎 277
10.1.2 mpvue框架環境搭建 277
10.1.3 mpvue快速入門 280
10.1.4 項目工程檔案說明 281
10.2 使用mpvue創建“歷史今日”小程式 285
10.2.1 項目規劃 285
10.2.2 項目新建頁面 287
10.2.3 請求接口邏輯編寫 288
10.2.4 項目顯示編寫 291
10.2.5 項目生成 295
10.3 小結和練習 296
10.3.1 小結 296
10.3.2 練習 297
第11章 實戰:使用Taro實現星座測試小程式 298
11.1 支持React語法的Taro框架 299
11.1.1 什麼是Taro 299
11.1.2 Taro快速入門 300
11.2 使用Taro框架創建星座測試小程式 303
11.2.1 接口說明 303
11.2.2 新建Taro小程式 304
11.2.3 星座測試小程式主頁 305
11.2.4 星座測試小程式主頁的組件 307
11.2.5 星座測試詳情頁 310
11.3 項目編譯與生成 314
11.3.1 編譯為微信小程式 314
11.3.2 編譯為百度小程式 315
11.3.3 編譯為支付寶小程式 318
11.3.4 編譯為其他小程式 321
11.4 小結和練習 321
11.4.1 小結 321
11.4.2 練習 321,第1章 走進微信小程式 1
1.1 小程式的起源 1
1.1.1 什麼是小程式 2
1.1.2 小程式的發展 3
1.2 開發小程式的第一步 4
1.2.1 註冊小程式 4
1.2.2 設定小程式 6
1.3 小程式開發工具 8
1.3.1 下載和安裝 8
1.3.2 圖解常用功能 11
1.4 實戰1:Hello World 13
1.4.1 編寫頁面連結 13
1.4.2 編寫新頁面內容 15
1.5 什麼是WePY 17
1.5.1 為什麼選擇WePY 17
1.5.2 WePY開發環境的安裝 18
1.6 實戰2:WePY版Hello World 20
1.6.1 創建HelloWorld項目 20
1.6.2 編寫頁面代碼 23
1.7 小結和練習 26
1.7.1 小結 26
1.7.2 練習 26
第2章 微信小程式組件 27
2.1 小程式的視圖容器 27
2.1.1 最基礎的組件:view 28
2.1.2 可滾動視圖區域:scroll-view 28
2.1.3 輪播圖片:swiper 28
2.1.4 可移動視圖容器:movable-view 29
2.1.5 超過原生組件的層級:cover-view和cover-image 30
2.2 小程式的基礎組件 32
2.2.1 圖示組件:icon 32
2.2.2 文字組件:text 33
2.2.3 富文本組件:rich-text 34
2.2.4 進度條組件:progress 34
2.2.5 表單組件:form 35
2.2.6 極其重要的按鈕組件:button 36
2.3 媒體組件和導航組件 37
2.3.1 導航組件: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 開放數據域:open-data 55
2.5.2 HTML等網頁支持:web-view 56
2.5.3 開發者的收入來源:ad 58
2.5.4 小程式引導關注公眾號:official-account 59
2.6 小結和練習 60
2.6.1 小結 60
2.6.2 練習 60
第3章 微信小程式API 61
3.1 小程式基礎——網路請求API 62
3.1.1 發起請求 62
3.1.2 上傳和下載 64
3.1.3 WebSocket 65
3.2 實戰:簡單的socket聊天小程式 68
3.2.1 伺服器端開發 68
3.2.2 客戶端開發 70
3.3 小程式的基礎API——更新和設備信息 77
3.3.1 小程式的自動更新 77
3.3.2 獲取用戶終端信息 79
3.3.3 獲取小程式相關信息 81
3.3.4 獲取設備Wi-Fi狀態 81
3.3.5 獲取設備加速計、陀螺儀和方向 83
3.3.6 獲取設備藍牙和NFC 84
3.3.7 設備螢幕API 86
3.3.8 設備的掃碼和振動 87
3.3.9 獲取設備的剪貼簿 88
3.3.10 獲取設備位置的API 88
3.4 路由頁面跳轉和數據快取API 90
3.4.1 頁面之間的跳轉 90
3.4.2 數據快取添加和獲取API 92
3.4.3 數據快取刪除API 94
3.5 小程式界面互動API 95
3.5.1 提示框和模態框 95
3.5.2 導航欄的單獨設定 97
3.5.3 Tab Bar的設定 98
3.5.4 字型和滾動 101
3.5.5 其他顯示API 102
3.6 媒體和檔案 102
3.6.1 圖片相關API 102
3.6.2 視頻相關API 104
3.6.3 錄音相關API 105
3.6.4 檔案相關API 106
3.7 其他開放接口 108
3.7.1 客服API 108
3.7.2 轉發API 110
3.7.3 收貨地址 111
3.8 小結和練習 112
3.8.1 小結 112
3.8.2 練習 112
第4章 微信小程式的伺服器端 113
4.1 後台API編寫入門 113
4.1.1 後台技術的選擇 114
4.1.2 後台技術環境搭建 114
4.1.3 直接上手的框架 117
4.1.4 搭建一個簡單的框架伺服器 117
4.1.5 MySQL的使用 120
4.1.6 對於後端技術的說明 121
4.1.7 路由創建 121
4.2 用戶系統的搭建 122
4.2.1 用戶系統的邏輯 122
4.2.2 用戶系統的實現編碼 124
4.2.3 用戶系統的測試 132
4.3 其他常用伺服器API 135
4.3.1 二維碼API 135
4.3.2 運動數據API 140
4.3.3 獲取用戶手機號 148
4.4 小結與練習 151
4.4.1 小結 151
4.4.2 練習 151
第5章 實戰:問卷小程式 152
5.1 問卷小程式簡介 152
5.1.1 為什麼需要問卷調查 153
5.1.2 需求分析 153
5.2 問卷小程式具體編碼 154
5.2.1 後端編寫 154
5.2.2 小程式編寫 162
5.3 小結和練習 168
5.3.1 小結 168
5.3.2 練習 168
第6章 實戰:搖一搖遊戲 169
6.1 項目分析 169
6.1.1 搖一搖功能分析 170
6.1.2 搖一搖項目規劃 171
6.1.3 搖一搖接口定義 172
6.2 項目編碼 173
6.2.1 搖一搖小程式的後台 173
6.2.2 搖一搖小程式的首頁 185
6.2.3 搖一搖小程式的填寫頁面 188
6.2.4 搖一搖小程式的搖動頁面 194
6.2.5 搖一搖小程式排行榜 202
6.3 小結和練習 204
6.3.1 小結 204
6.3.2 練習 205
第7章 實戰:百度圖片識別API 206
7.1 項目分析 206
7.1.1 流行的識別技術 207
7.1.2 功能設計 207
7.1.3 路由設計 208
7.2 具體編碼 208
7.2.1 系統後台編碼 208
7.2.2 上傳圖片功能 215
7.2.3 小程式圖片解析顯示 219
7.3 小結和練習 221
7.3.1 小結 221
7.3.2 練習 221
第8章 實戰:文字信息發布小程式 222
8.1 項目需求 222
8.1.1 功能劃分 223
8.1.2 路由劃分 223
8.2 具體編碼 224
8.2.1 後台實現 224
8.2.2 新建小程式項目 233
8.2.3 首頁實現 234
8.2.4 首頁邏輯編寫 237
8.2.5 首頁樣式編寫 239
8.2.6 文章詳情頁實現 241
8.2.7 文章內容顯示 243
8.2.8 文章評論顯示 246
8.2.9 文章點讚功能 248
8.3 小結和練習 251
8.3.1 小結 251
8.3.2 練習 251
第9章 實戰:使用Canvas繪製圖片 252
9.1 如何使用Canvas繪製生成圖片 252
9.1.1 為什麼需要繪製生成圖片 253
9.1.2 繪製生成圖片的必要因素 253
9.2 實戰1:在微信小程式中繪製需要的圖片 254
9.2.1 需求分析 254
9.2.2 創建小程式 255
9.2.3 創建組件 256
9.2.4 圖片主頁 257
9.2.5 繪製圖片 261
9.3 實戰2:流行的手機背景生成小程式 262
9.3.1 系統規劃設計 262
9.3.2 後台路由設計 264
9.3.3 系統後台編碼 264
9.3.4 小程式頁面編寫 266
9.3.5 小程式邏輯編寫 269
9.3.6 小程式繪製邏輯編寫 273
9.4 小結和練習 275
9.4.1 小結 275
9.4.2 練習 275
第10章 實戰:使用mpvue實現“歷史今日”小程式 276
10.1 支持Vue.js語法的mpvue框架 276
10.1.1 mpvue框架基礎 277
10.1.2 mpvue框架環境搭建 277
10.1.3 mpvue快速入門 280
10.1.4 項目工程檔案說明 281
10.2 使用mpvue創建“歷史今日”小程式 285
10.2.1 項目規劃 285
10.2.2 項目新建頁面 287
10.2.3 請求接口邏輯編寫 288
10.2.4 項目顯示編寫 291
10.2.5 項目生成 295
10.3 小結和練習 296
10.3.1 小結 296
10.3.2 練習 297
第11章 實戰:使用Taro實現星座測試小程式 298
11.1 支持React語法的Taro框架 299
11.1.1 什麼是Taro 299
11.1.2 Taro快速入門 300
11.2 使用Taro框架創建星座測試小程式 303
11.2.1 接口說明 303
11.2.2 新建Taro小程式 304
11.2.3 星座測試小程式主頁 305
11.2.4 星座測試小程式主頁的組件 307
11.2.5 星座測試詳情頁 310
11.3 項目編譯與生成 314
11.3.1 編譯為微信小程式 314
11.3.2 編譯為百度小程式 315
11.3.3 編譯為支付寶小程式 318
11.3.4 編譯為其他小程式 321
11.4 小結和練習 321
11.4.1 小結 321
11.4.2 練習 321