小程式開發圖解案例教程

《小程式開發圖解案例教程》是2021年人民郵電出版社出版的圖書。

基本介紹

• 中文名：小程式開發圖解案例教程
• 作者：劉剛
• 出版社：人民郵電出版社
• 出版時間：2021年10月1日
• 開本：16 開
• 裝幀：平裝
• ISBN：9787115547484

內容簡介

本書分兩篇，分別介紹了微信小程式設計的基礎知識和實戰案例。第1篇為微信小程式快速入門，包括認識微信小程式、微信小程式框架分析、用微信小程式組件構建UI界面、必備的微信小程式API、微信小程式雲開發；第2篇為綜合案例套用，包括仿“中國婚博會”微信小程式、仿“華為商城”微信小程式、記賬本微信小程式雲開發3個綜合實戰案例。本書採用圖、表與詳細的示例代碼相結合的敘述方式，講解微信小程式設計的基本原理和知識，簡單易懂。書中還提供了豐富詳盡的實戰案例，帶讀者邊做邊學，以使讀者快速掌握微信小程式的設計和實現。

本書可作為對微信小程式開發有興趣的讀者的自學用書，也可作為院校、培訓機構微信小程式開發相關課程的教材。

作者簡介

劉剛，參與過多個軟體項目的研發、設計和管理工作，擁有項目管理師認證、項目監理師中級認證，出版過《原型設計大師：Axure RP網站與APP設計從入門到精通》、《Axure RP原型設計圖解微課視頻教程（Web+App）》書籍。在中國擎天公司、神州軟體子公司任職過，在項目管理和項目實踐、軟體設計等方面有一定經驗。曾負責過紀檢監察廉政監督監管平台產品的設計與開發、國家郵政局項目的設計與開發、政務大數據項目的設計與開發等等項目。

圖書目錄

第 1篇　微信小程式快速入門

第 1章 認識微信小程式 1

1．1　微信小程式介紹 1

1．1．1　初識微信小程式 1

1．1．2　微信小程式的功能 2

1．1．3　微信小程式的使用場景 3

1．1．4　微信小程式能取代App嗎 3

1．1．5　微信小程式的發展歷程 3

1．1．6　微信小程式帶來的機會 4

1．2　微信小程式開發準備 5

1．2．1　基礎技術準備 5

1．2．2　開發準備 5

1．3　微信小程式開發工具的使用 6

1．3．1　創建項目 6

1．3．2　開發者工具界面 8

1．3．3　選單欄 9

1．3．4　模擬器區域 9

1．3．5　編輯器區域 10

1．3．6　調試器區域 11

1．3．7　工具列區域 13

1．3．8　常用快捷鍵 16

1．4　沙場大練兵：Hello World的創建 17

1．5　小結 18

第 2章 微信小程式框架分析 19

2．1　微信小程式目錄結構介紹 19

2．1．1　框架全局檔案 19

2．1．2　工具類檔案 24

2．1．3　框架頁面檔案 25

2．1．4　小試牛刀：製作“貓眼電影”底部標籤導航 26

2．2　微信小程式註冊程式的套用 27

2．3　微信小程式註冊頁面的使用 28

2．3．1　頁面初始化數據 29

2．3．2　生命周期函式 30

2．3．3　頁面相關事件處理函式 30

2．3．4　頁面路由管理 31

2．3．5　自定義函式 32

2．3．6　setData設值函式 32

2．4　微信小程式如何綁定數據 33

2．4．1　組件屬性綁定 33

2．4．2　控制屬性綁定 34

2．4．3　關鍵字綁定 34

2．4．4　運算 34

2．4．5　小試牛刀：天氣微信小程式 35

2．5　微信小程式條件渲染 37

2．5．1　wx：if判斷單個組件 37

2．5．2　block wx：if判斷多個組件 37

2．6　微信小程式列表渲染 37

2．6．1　wx：for列表渲染單個組件 37

2．6．2　block wx：for列表渲染多個組件 38

2．6．3　wx：key指定唯一標識符 38

2．7　微信小程式定義模板 39

2．7．1　定義模板 39

2．7．2　使用模板 39

2．8　微信小程式的引用功能 39

2．8．1　import引用 39

2．8．2　include引用 40

2．9　WXS小程式腳本語言 40

2．9．1　模組化 41

2．9．2　變數與數據類型 41

2．9．3　注釋 43

2．9．4　語句 44

2．10　微信小程式WXSS樣式渲染 45

2．10．1　尺寸單位 45

2．10．2　樣式導入 45

2．10．3　內聯樣式 46

2．10．4　選擇器 46

2．10．5　常用樣式屬性 46

2．11　沙場大練兵：仿“香哈菜譜”微信小程式 50

2．11．1　底部標籤導航設計 51

2．11．2　宮格導航設計 53

2．11．3　香哈頭條初始化數據 54

2．11．4　香哈頭條列表渲染及綁定數據 55

2．11．5　香哈頭條模板引用 59

2．12　小結 60

第3章 用微信小程式組件構建UI界面 61

3．1　視圖容器組件 61

3．1．1　view視圖容器 61

3．1．2　scroll-view可滾動視圖區域 62

3．1．3　swiper滑塊視圖容器 65

3．1．4　movable-view可移動視圖容器 68

3．1．5　cover-view、cover-image覆蓋原生組件的視圖容器 70

3．2　基礎內容組件 71

3．2．1　icon圖示 71

3．2．2　text文本 72

3．2．3　progress進度條 73

3．2．4　rich-text富文本 74

3．3　表單組件 75

3．3．1　button按鈕 75

3．3．2　checkbox多項選擇器 78

3．3．3　radio單項選擇器 79

3．3．4　input單行輸入框 79

3．3．5　textarea多行輸入框 82

3．3．6　label改進表單可用性 83

3．3．7　picker滾動選擇器 85

3．3．8　slider滑動選擇器 94

3．3．9　switch開關選擇器 95

3．3．10　form表單 96

3．3．11　editor富文本編輯器 98

3．4　導航組件 99

3．4．1　navigator頁面連結組件 100

3．4．2　wx．navigateTo保留當前頁跳轉 102

3．4．3　wx．redirectTo關閉當前頁跳轉 103

3．4．4　wx．switchTab跳轉到tabBar頁面 104

3．4．5　wx．navigateBack返回上一頁 105

3．4．6　設定導航條 106

3．5　媒體組件 107

3．5．1　audio音頻 108

3．5．2　image圖片 109

3．5．3　video視頻 113

3．5．4　camera相機 115

3．5．5　live-player實時音視頻播放 117

3．5．6　live-pusher實時音視頻錄製 117

3．6　地圖組件 119

3．7　畫布組件 123

3．8　沙場大練兵：表單登錄註冊微信小程式 125

3．8．1　登錄設計 126

3．8．2　手機號註冊設計 129

3．8．3　企業用戶註冊設計 132

3．9　小結 138

第4章 必備的微信小程式API 139

4．1　請求伺服器數據API 139

4．2　檔案上傳與下載API 142

4．2．1　wx．uploadFile檔案上傳API 142

4．2．2　wx．downloadFile檔案下載API 144

4．3　WebSocket會話API 145

4．4　圖片處理API 148

4．4．1　wx．chooseImage選擇圖片API 148

4．4．2　wx．previewImage預覽圖片API 149

4．4．3　wx．getImageInfo獲得圖片信息API 150

4．4．4　wx．saveImageToPhotosAlbum保存圖片到相冊API 151

4．4．5　wx．compressImage壓縮圖片API 152

4．4．6　wx．chooseMessageFile從客戶端會話選擇檔案API 152

4．5　檔案操作API 153

4．5．1　wx．saveFile保存檔案到本地API 153

4．5．2　wx．getSavedFileList獲取本地檔案列表API 154

4．5．3　wx．getSavedFileInfo獲取本地檔案信息API 155

4．5．4　wx．removeSavedFile刪除本地檔案API 156

4．5．5　wx．openDocument打開文檔API 157

4．5．6　wx．getFileInfo獲取檔案信息API 157

4．5．7　FileSystemManager檔案管理器 158

4．6　數據快取API 159

4．6．1　數據快取到本地 159

4．6．2　獲取本地快取數據 161

4．6．3　移除和清理本地快取數據 164

4．7　位置信息API 165

4．7．1　獲得位置、選擇位置、打開位置 166

4．7．2　監聽位置事件 169

4．7．3　地圖組件控制API 169

4．7．4　收貨地址API 170

4．8　設備套用API 171

4．8．1　獲得系統信息 171

4．8．2　獲取網路狀態 173

4．8．3　加速度計 174

4．8．4　羅盤 175

4．8．5　撥打電話 176

4．8．6　掃碼 176

4．8．7　剪貼簿 177

4．8．8　藍牙 177

4．8．9　螢幕亮度 181

4．8．10　用戶截屏事件 181

4．8．11　振動 181

4．8．12　手機聯繫人 182

4．9　互動反饋API 183

4．9．1　訊息提示框 183

4．9．2　模態彈窗 185

4．9．3　操作選單 186

4．10　用戶及授權設定API 186

4．10．1　登錄API 186

4．10．2　用戶信息API 190

4．10．3　授權API 191

4．10．4　設定API 192

4．11　微信支付API 193

4．11．1　微信小程式支付介紹 193

4．11．2　微信小程式支付實戰 195

4．12　分享轉發API 196

4．13 沙場大練兵：仿“豆瓣電影”微信小程式 197

4．13．1　電影頂部頁簽切換效果 197

4．13．2　電影海報輪播效果 200

4．13．3　電影列表方式布局 202

4．13．4　電影詳情介紹頁布局 205

4．13．5　項目上傳與預覽 211

4．14　小結 212

第5章 微信小程式雲開發 213

5．1　認識小程式雲開發 213

5．1．1　雲開發和傳統開發的對比 213

5．1．2　創建小程式雲開發項目 213

5．2　雲開發控制台的使用 215

5．2．1　運營分析 215

5．2．2　資料庫 216

5．2．3　存儲 217

5．2．4　雲函式 218

5．2．5　設定 218

5．2．6　費用和工單 219

5．3　雲函式 219

5．3．1　雲函式介紹 219

5．3．2　雲函式的使用 220

5．3．3　Promise風格 221

5．3．4　npm的安裝與使用 223

5．3．5　雲函式本地調試 224

5．3．6　雲函式定時器 225

5．4　雲開發檔案存儲 226

5．4．1　uploadFile檔案上傳API 226

5．4．2　downloadFile檔案下載API 227

5．4．3　deleteFile檔案刪除API 227

5．4．4　getTempFileURL獲取檔案臨時路徑API 228

5．5　雲開發資料庫 228

5．5．1　資料庫介紹 228

5．5．2　資料庫初始化 229

5．5．3　數據新增操作 229

5．5．4　數據查詢操作 230

5．5．5　數據修改操作 231

5．5．6　數據刪除操作 231

5．5．7　資料庫操作符 232

5．6　沙場大練兵：地址管理雲開發 234

5．6．1　資料庫設計 234

5．6．2　地址列表及刪除地址雲開發 235

5．6．3　新增地址及編輯地址雲開發 239

5．7　小結 245

第 2篇　綜合案例套用

第6章 綜合案例：仿“中國婚博會”微信小程式 246

6．1　需求描述 246

6．2　設計思路 247

6．3　相關知識點 247

6．4　準備工作 248

6．5　設計流程 249

6．5．1　底部標籤導航設計 249

6．5．2　海報輪播效果設計 251

6．5．3　宮格導航設計 252

6．5．4　“全部分類”導航設計 256

6．5．5　“現金券”下拉選單篩選條件設計 261

6．5．6　“現金券”列表頁設計 263

6．5．7　婚博會索票界面設計 267

6．5．8　獲知渠道彈出層設計 271

6．6　小結 276

第7章 綜合案例：仿“華為商城”微信小程式 277

7．1　需求描述 277

7．2　設計思路 278

7．3　相關知識點 278

7．4　準備工作 279

7．5　設計流程 279

7．5．1　“我的”界面列表導航設計 279

7．5．2　賬號登錄 284

7．5．3　用戶註冊 291

7．5．4　首頁布局設計及動態獲取數據 294

7．5．5　分類導航設計及動態獲取數據 299

7．6　小結 302

第8章 綜合案例：記賬本微信小程式雲開發 303

8．1　需求描述 303

8．2　設計思路 304

8．3　相關知識點 304

8．4　準備工作 305

8．5　設計流程 306

8．5．1　賬戶列表 306

8．5．2　創建賬戶 311

8．5．3　賬戶明細列表 314

8．5．4　記一筆賬戶明細 317

8．5．5　分頁獲取賬本列表 322

8．5．6　創建記賬本 325

8．6　小結 328