微信小程序與雲開發從入門到實踐

目    錄

第 1 章  準備 1

1.1  認識微信小程序 1

1.1.1  小程序的特點 1

1.1.2  小程序的成長之路 2

1.2  如何設計一款小程序 3

1.2.1  小程序的設計原則 3

1.2.2  小程序的適配原則 4

1.3  微信小程序開發前的環境準備 4

1.3.1  註冊小程序賬號 4

1.3.2  安裝開發者工具 7

1.4  小程序版的HelloWorld程序 8

1.4.1  創建一個小程序項目 8

1.4.2  開發者工具的功能詳解 10

1.4.3  小程序的真機體驗與發布 11

1.4.4  小程序的開發流程 13

1.5  小結與練習 14

1.5.1  小結 14

1.5.2  練習 14

第 2 章  微信小程序的構成 15

2.1  小程序項目的基本結構 15

2.1.1  項目目錄結構 16

2.1.2  小程序全局配置文件 17

2.1.3  小程序中的頁面配置文件 22

2.2  小程序的開發架構 23

2.2.1  註冊小程序 23

2.2.2  小程序中頁面的註冊 24

2.2.3  頁面的生命周期 25

2.3  路由與模塊化 26

2.3.1  頁面路由 27

2.3.2  模塊化開發 29

2.4  WXML與WXSS 29

2.4.1  WXML簡介 29

2.4.2  WXSS簡介 31

2.5  組件與小程序API基礎 32

2.5.1  認識組件 32

2.5.2  小程序框架API 33

2.6  小結與練習 34

2.6.1  小結 34

2.6.2  練習 34

第 3 章  小程序中的視圖容器組件 35

3.1  基礎視圖組件與滾動視圖組件 36

3.1.1  測試工程搭建 36

3.1.2  view（視圖）組件 36

3.1.3  scroll-view（滾動視圖）組件 38

3.2  滑塊容器組件 41

3.2.1  swiper-item組件介紹 41

3.2.2  swiper組件的應用 41

3.3  頁面容器組件 43

3.3.1  page-container頁面容器示例 43

3.3.2  page-container屬性解析 44

3.4  可拖曳容器組件 45

3.4.1  可拖曳容器組件示例 45

3.4.2  movable-area組件與movable-view組件 46

3.5  條件元素容器組件與共享元素容器組件 47

3.5.1  條件元素容器組件的使用 47

3.5.2  共享元素容器組件的使用 48

3.6  組件的佈局 49

3.6.1  佈局的兩個重要概念 49

3.6.2  幾種常用的定位方式 50

3.6.3  display屬性使用詳解 53

3.6.4  控制元素尺寸的標準盒模型 57

3.7  小結與練習 58

3.7.1  小結 58

3.7.2  練習 58

第 4 章  小程序中的功能組件 59

4.1  基礎功能組件 59

4.1.1  icon組件的應用 59

4.1.2  progress組件的應用 61

4.1.3  text組件的應用 61

4.1.4  rich-text組件的應用 62

4.2  提供用戶交互功能的組件 66

4.2.1  button（按鈕）組件及應用 66

4.2.2  switch（開關）組件及應用 69

4.2.3  checkbox組件與checkbox-group組件的應用 69

4.2.4  radio組件與radio-group組件及應用 70

4.2.5  input組件與textarea組件及應用 71

4.2.6  editor組件及應用 73

4.2.7  label組件、keyboard-accessory組件與form組件及應用 79

4.2.8  slider（滑塊）組件及應用 82

4.2.9  picker組件及應用 83

4.3  動手練習：實現一個簡單的小程序登錄頁面 87

4.4  小結與練習 90

4.4.1  小結 90

4.4.2  練習 90

第 5 章  導航、多媒體與高級視圖組件 91

5.1  導航組件與頁面配置節點組件 91

5.1.1  使用navigator組件 92

5.1.2  頁面配置組件 93

5.2  多媒體組件 95

5.2.1  渲染圖像的image組件 95

5.2.2  播放音頻的audio組件 97

5.2.3  播放視頻的video組件 101

5.2.4  捕獲影像的camera組件 105

5.2.5  直播與音視頻通信相關組件 107

5.3  地圖與畫布組件 111

5.3.1  map（地圖）組件的應用 111

5.3.2  canvas（畫布）組件及應用 123

5.4  與微信開放能力相關的組件 125

5.4.1  展示微信開放數據的open-data組件 125

5.4.2  web-view（網頁視圖）組件 126

5.5  動手練習：開發音樂播放器軟件 128

5.5.1  開發音樂播放器首頁 128

5.5.2  音頻播放頁面 132

5.6  小結與練習 135

5.6.1  小結 135

5.6.2  練習 136

第 6 章  WeUI組件庫 137

6.1  體驗WeUI基礎組件 137

6.1.1  使用WeUI組件庫 138

6.1.2  關於badge組件 138

6.1.3  體驗gallery組件 139

6.1.4  體驗loading組件 140

6.1.5  體驗icon組件 140

6.2  WeUI表單類組件介紹 142

6.2.1  體驗WeUI開發的表單頁面 142

6.2.2  關於FormPage組件 143

6.2.3  關於Form組件 144

6.2.4  關於Cell與Cells組件 145

6.2.5  關於Checkbox-group與Checkbox組件 146

6.2.6  關於Slideview組件 146

6.2.7  關於Uploader組件 147

6.3  WeUI庫中的彈窗和提示類組件 148

6.3.1  Dialog彈窗組件 148

6.3.2  HalfScreenDialog半屏彈窗組件 149

6.3.3  ActionSheet抽屜視圖組件 150

6.3.4  Msg組件與TopTips組件 151

6.4  WeUI庫中的導航欄與搜索欄組件 153

6.4.1  NavigationBar組件 153

6.4.2  Tabbar組件 154

6.4.3  Searchbar組件 155

6.5  小結與練習 156

6.5.1  小結 156

6.5.1  練習 156

第 7 章  自定義組件 157

7.1  自定義組件基礎 157

7.1.1  創建一個自定義組件 158

7.1.2  關於Component組件構造器 159

7.1.3  組件的生命周期 161

7.2  關於自定義組件的高級用法 162

7.2.1  自定義組件的模板和樣式 162

7.2.2  組件間的通信 165

7.2.3  組件間的依賴關系 167

7.2.4  Behaviors的應用 170

7.2.5  數據監聽器 172

7.2.6  關於純數據字段 173

7.2.7  關於抽象節點 174

7.2.8  自定義組件的性能測試 175

7.3  動手練習：開發一款多Tab頁自定義組件 175

7.3.1  動手開發自定義組件 176

7.3.2  使用自定義組件 178

7.4  小結與練習 179

7.4.1  小結 179

7.4.2  練習 179

第 8 章  界面相關接口與動畫 180

8.1  界面交互相關API的使用 180

8.1.1  關於Toast與Loading組件 181

8.1.2  可交互的用戶彈窗和抽屜功能接口 182

8.2  頁面尺寸控制與自定義字體 185

8.2.1  調整小程序頁面尺寸 185

8.2.2  在小程序中使用自定義字體 186

8.3  頁面滾動與下拉刷新相關接口 187

8.3.1  通過API接口使頁面滾動到指定的位置 187

8.3.2  下拉刷新相關接口 189

8.4  在小程序中使用動畫 190

8.4.1  使用WXSS實現動畫效果 190

8.4.2  使用小程序框架接口創建動畫效果 192

8.4.3  交互式動畫 194

8.5  小結與練習 195

8.5.1  小結 195

8.5.2  練習 196

第 9 章  網絡與數據存儲 197

9.1  在小程序中進行網絡數據請求 197

9.1.1  申請接口服務 198

9.1.2  在小程序中調用天氣預報API服務 200

9.1.3  請求方法詳解 203

9.1.4  關於RequestTask對象 205

9.2  文件下載與上傳 206

9.2.1  小程序的文件系統 207

9.2.2  文件下載與上傳接口 207

9.3  在小程序中使用WebSocket技術 210

9.3.1  編寫一個簡易的WebSocket服務端 210

9.3.2  編寫WebSocket客戶端示例程序 211

9.3.3  WebSocket相關接口詳解 212

9.4  小程序文件系統 214

9.4.1  以wx開頭的文件系統接口 214

9.4.2  FileSystemManager文件管理器 216

9.5  小程序緩存工具 224

9.6  動手練習：開發一個移動記事本小程序 226

9.6.1  開發應用主頁 226

9.6.2  “新建記事”頁面的開發 227

9.6.3  “我的記事”頁面的開發 229

9.7  小結與練習 231

9.7.1  小結 231

9.7.2  練習 231

第 10 章  常用功能接口 232

10.1  系統設置信息與應用級事件相關接口 232

10.1.1  系統設置相關接口 233

10.1.2  客戶端更新相關接口 235

10.1.3  獲取小程序啟動時的參數 235

10.1.4  監聽應用級事件 236

10.2  調試與性能相關接口 237

10.2.1  調試相關接口 237

10.2.2  日誌管理器與實時日誌管理器 238

10.2.3  小程序性能管控相關接口 241

10.3  小程序中的轉發相關接口 242

10.4  用戶登錄與功能授權 245

10.4.1  微信用戶登錄 245

10.4.2  功能授權相關接口 246

10.4.3  用戶授權設置 247

10.5  小結與練習 248

10.5.1  小結 248

10.5.2  練習 248

第 11 章  雲開發技術 249

11.1  雲開發基礎 249

11.2  使用雲數據庫 252

11.2.1  使用雲開發數據庫 252

11.2.2  雲數據庫支持的數據類型 254

11.2.3  新增與查詢數據 255

11.2.4  高級查詢操作 257

11.2.5  更新與刪除數據 259

11.2.6  數據庫變更實時推送 260

11.2.7  數據庫備份 261

11.3  使用雲存儲 262

11.3.1  在小程序中使用雲存儲功能 263

11.3.2  雲存儲文件管理 264

11.4  使用雲函數 265

11.4.1  初識雲函數 266

11.4.2  在雲函數中使用雲數據庫 267

11.4.3  在雲函數中使用雲存儲 270

11.4.4  在雲開發控制台管理雲函數 271

11.4.5  雲函數的定時觸發器 272

11.5  實戰：使用雲開發技術改造移動記事本應用 274

11.6  小結與練習 277

11.6.1  小結 277

11.6.2  練習 277

第 12 章  項目實戰：天氣預報小程序的開發 278

12.1  數據準備 278

12.1.1  天氣預報數據 279

12.1.2  城市列表數據 280

12.2  城市選擇模塊開發 281

12.3  當日天氣模塊開發 285

12.4  最近7天天氣模塊開發 287

12.5  生活指數模塊開發 290

第 13 章  項目實戰：迷你商城小程序的開發 292

13.1  電商應用首頁開發 292

13.1.1  使用IconFont文字圖標 293

13.1.2  應用框架的搭建 294

13.1.3  首頁頭部模塊的開發 297

13.1.4  商品列表的開發 303

13.2  分類模塊開發 308

13.2.1  二級聯動列表組件的開發 308

13.2.2  分類數據服務開發 310

13.3  商品列表與商品詳情頁開發 312

13.3.1  商品列表頁開發 312

13.3.2  商品詳情頁開發 314

13.4  加入購物車與創建訂單功能開發 317

13.4.1  購物車功能 317

13.4.2  訂單相關功能開發 321

13.4.3  地址選擇和支付功能開發 325

13.5  “我的”頁面的開發 326

13.5.1  “我的”模塊主頁開發 327

13.5.2  訂單列表頁面開發 328