第 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.6setData設值函數 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.1wx:if判斷單個組件 37

2.5.2block wx:if判斷多個組件 37

2.6微信小程序列表渲染 37

2.6.1wx:for列表渲染單個組件 37

2.6.2block wx:for列表渲染多個組件 38

2.6.3wx:key指定標識符 38

2.7微信小程序定義模板 39

2.7.1定義模板 39

2.7.2使用模板 39

2.8微信小程序的引用功能 39

2.8.1import引用 39

2.8.2include引用 40

2.9WXS小程序腳本語言 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.1view視圖容器 61

3.1.2scroll-view可滾動視圖區域 62

3.1.3swiper滑塊視圖容器 65

3.1.4movable-view可移動視圖容器 68

3.1.5cover-view、cover-image覆蓋原生組件的視圖容器 70

3.2基礎內容組件 71

3.2.1icon圖標 71

3.2.2text文本 72

3.2.3progress進度條 73

3.2.4rich-text富文本 74

3.3表單組件 75

3.3.1button按鈕 75

3.3.2checkbox多項選擇器 78

3.3.3radio單項選擇器 79

3.3.4input單行輸入框 79

3.3.5textarea多行輸入框 82

3.3.6label改進表單可用性 83

3.3.7picker滾動選擇器 85

3.3.8slider滑動選擇器 94

3.3.9switch開關選擇器 95

3.3.10form表單 96

3.3.11editor富文本編輯器 98

3.4導航組件 99

3.4.1navigator頁面鏈接組件 100

3.4.2wx.navigateTo保留當前頁跳轉 102

3.4.3wx.redirectTo關閉當前頁跳轉 103

3.4.4wx.switchTab跳轉到tabBar頁面 104

3.4.5wx.navigateBack返回上一頁 105

3.4.6設置導航條 106

3.5媒體組件 107

3.5.1audio音頻 108

3.5.2image圖片 109

3.5.3video視頻 113

3.5.4camera相機 115

3.5.5live-player實時音視頻播放 117

3.5.6live-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.1wx.uploadFile文件上傳API 142

4.2.2wx.downloadFile文件下載API 144

4.3WebSocket會話API 145

4.4圖片處理API 148

4.4.1wx.chooseImage選擇圖片API 148

4.4.2wx.previewImage預覽圖片API 149

4.4.3wx.getImageInfo獲得圖片信息API 150

4.4.4wx.saveImageToPhotosAlbum保存圖片到相冊API 151

4.4.5wx.compressImage壓縮圖片API 152

4.4.6wx.chooseMessageFile從客戶端會話選擇文件API 152

4.5文件操作API 153

4.5.1wx.saveFile保存文件到本地API 153

4.5.2wx.getSavedFileList獲取本地文件列表API 154

4.5.3wx.getSavedFileInfo獲取本地文件信息API 155

4.5.4wx.removeSavedFile刪除本地文件API 156

4.5.5wx.openDocument打開文檔API 157

4.5.6wx.getFileInfo獲取文件信息API 157

4.5.7FileSystemManager文件管理器 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.3Promise風格 221

5.3.4npm的安裝與使用 223

5.3.5雲函數本地調試 224

5.3.6雲函數定時器 225

5.4雲開發文件存儲 226

5.4.1uploadFile文件上傳API 226

5.4.2downloadFile文件下載API 227

5.4.3deleteFile文件刪除API 227

5.4.4getTempFileURL獲取文件臨時路徑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