●第1篇 小程序基礎
第1章 初識小程序 2
1.1 小程序開發工具 2
1.1.1 獲取開發工具 2
1.1.2 安裝開發工具 3
1.2 開發第一個小程序 5
1.2.1 獲取小程序的AppID 5
1.2.2 創建項目 5
1.2.3 小程序主要文件 8
1.3 認識開發工具 9
1.3.1 開發工具界面 9
1.3.2 程序調試 9
1.3.3 代碼編輯 15
1.4 查看小程序效果 19
1.4.1 在開發工具中查看效果 19
1.4.2 在手機中查看效果 19
第2章 小程序架構分析 21
2.1 小程序框架結構 21
2.1.1 目錄結構 22
2.1.2 主體文件 23
2.1.3 頁面文件 23
2.1.4 其他文件 24
2.2 配置文件詳解 24
2.2.1 主配置文件app.json 24
2.2.2 頁面配置文件 29
2.3 邏輯層js文件 29
2.3.1 用App函數注冊小程序 30
2.3.2 用Page函數注冊頁面 31
2.4 頁面描述文件wxml 34
2.4.1 初識組件 34
2.4.2 數據綁定 35
2.4.3 條件渲染 39
2.4.4 列表渲染 40
2.4.5 使用模板 42
2.4.6 引用其他頁面文件 45
2.5 頁面的事件 46
2.5.1 事件類型 46
2.5.2 事件綁定 47
2.5.3 事件對像 47
2.6 頁面樣式文件wxss 50
2.6.1 尺寸單位 50
2.6.2 樣式導入 50
第2篇 小程序常用模塊
第3章 快速開發UI界面 54
3.1 認識小程序的組件 54
3.1.1 小程序的組件 54
3.1.2 組件的使用 56
3.1.3 組件的通用屬性 57
3.2 加法計算器 59
3.2.1 認識view組件 60
3.2.2 認識input組件 62
3.2.3 認識button組件 64
3.2.4 計算機器界面UI 69
3.2.5 編寫計算代碼 71
3.2.6 測試加法計算器 72
3.3 另一種輸入數據的方式 73
3.3.1 認識slider組件 74
3.3.2 用slider輸入整數 74
第4章 美化UI界面 76
4.1 計算器功能需求 76
4.2 設計計算器界面 77
4.2.1 計算器小程序布局設計 77
4.2.2 搭建計算器小程序開發框架 77
4.2.3 用組件實現布局 78
4.2.4 設計組件的樣式 79
4.3 編寫計算器代碼 84
4.3.1 初始化數據 84
4.3.2 編寫按鈕代碼 88
4.3.3 編寫計算代碼 89
4.3.4 測試計算器小程序 92
4.4 美化計算器界面 93
4.4.1 認識icon組件 93
4.4.2 用icon美化計算器界面 94
4.4.3 小程序提供的icon組件 94
第5章 保存數據到本地 97
5.1 保存計算歷史界面設計 97
5.1.1 認識switch組件 97
5.1.2 switch組件簡單案例 98
5.2 修改計算器UI 99
5.2.1 添加switch組件 99
5.2.2 獲取switch的選擇 100
5.3 保存計算到本地緩存 101
5.3.1 保存數據的API接口函數 101
5.3.2 本地緩存計算過程 103
5.4 從本地緩存讀取數據 108
5.4.1 顯示歷史記錄的界面設計 108
5.4.2 頁面切換的相關接口函數 110
5.4.3 獲取本地緩存數據 111
5.5 保存多條歷史記錄 112
5.5.1 使用數組保存多條歷史記錄 113
5.5.2 清理本地緩存 115
第6章 旅行計劃調查 116
6.1 用form組件收集信息 116
6.1.1 認識form組件 116
6.1.2 表單的提交 118
6.1.3 表單的重置 120
6.2 設計旅行計劃調查 121
6.3 選擇性別（單選） 122
6.3.1 認識radio和radio-group組件 122
6.3.2 用radio組件列出性別 122
6.3.3 獲取性別內容 124
6.3.4 根據數據生成radio組件 125
6.4 選擇想去的國家（多選） 126
6.4.1 認識checkbox和checkbox-group組件 127
6.4.2 國家名稱的多選 127
6.4.3 獲取選中的數據 128
6.5 選擇日期和時間 129
6.5.1 認識picker組件 129
6.5.2 picker組件小案例 131
6.5.3 收集出發日期 135
6.5.4 獲取picker選擇的日期 135
6.6 輸入建議 137
6.7 廣告輪播 138
6.7.1 認識swiper組件 139
6.7.2 swiper組件案例 139
6.7.3 測試案例 143
第7章 小程序的交互反饋 144
7.1 等待提示 144
7.1.1 認識loading組件 145
7.1.2 修改旅行計劃調查表單 148
7.2 用toast顯示提示信息 150
7.3 使用新版API顯示提示 153
7.3.1 接口函數wx.showToast 153
7.3.2 顯示loading提示信息 153
7.3.3 顯示toast提示信息 155
7.4 用modal組件顯示彈出框 156
7.4.1 認識modal組件 157
7.4.2 修改彈出框 159
7.4.3 在彈出框中輸入內容 160
7.5 使用新版API顯示彈出框 163
7.6 底部彈出菜單 164
7.6.1 認識action-sheet組件 165
7.6.2 使用新版API顯示底部菜單 168
第8章 用多媒體展示更多 171
8.1 用audio組件播放音樂 171
8.1.1 認識audio組件 171
8.1.2 控制audio組件 173
8.2 使用audio API播放音樂 175
8.2.1 audio API簡介 175
8.2.2 audio API播放音樂示例 177
8.3 用video組件播放視頻 180
8.3.1 認識video組件 180
8.3.2 獲取視頻上下文 182
8.3.3 給視頻添加彈幕 182
第9章 與後臺交互 187
9.1 網絡訪問API 187
9.1.1 認識wx.request接口函數 188
9.1.2 獲取網上信息 188
9.2 手機歸屬地查詢 191
9.2.1 了解手機歸屬地查詢接口 191
9.2.2 編寫小程序代碼 195
9.2.3 調試修改小程序 198
第10章 使用手機設備 203
10.1 拍照 203
10.1.1 了解wx.chooseImage函數 203
10.1.2 編寫實例代碼 204
10.1.3 在電腦端測試選擇照片 206
10.1.4 在手機端測試選擇照片 207
10.2 錄音 210
10.2.1 認識wx.startRecord函數 210
10.2.2 認識wx.stopRecord函數 210
10.2.3 認識wx.playVoice函數 210
10.2.4 編寫錄音實例 211
10.2.5 測試錄音實例 213
10.3 獲取地理位置 214
10.3.1 認識wx.openLocation函數 214
10.3.2 認識wx.getLocation函數 215
10.3.3 獲取地理位置實例 215
10.3.4 在電腦中測試獲取地理位置實例 217
10.3.5 在手機中測試獲取地理位置實例 219
10.4 獲取網絡狀態 220
10.5 獲取繫統信息 223
第3篇 小程序綜合案例
第11章 綜合案例――微天氣 228
11.1 天氣預報API 228
11.1.1 中國天氣網天氣預報接口 229
11.1.2 中華萬年歷的天氣預報接口 234
11.2 界面設計 236
11.3 編寫界面代碼 236
11.3.1 創建項目 237
11.3.2 編寫界面代碼 237
11.3.3 編寫界面樣式代碼 239
11.4 編寫邏輯層代碼 242
11.4.1 編寫數據初始化代碼 242
11.4.2 獲取當前位置的城市名稱 244
11.4.3 根據城市名稱獲取天氣預報 246
11.4.4 查詢天氣預報 248
第12章 綜合案例――微音樂 250
12.1 QQ音樂API 250
12.1.1 認識易源接口網站 250
12.1.2 QQ音樂接口 251
12.2 界面設計 255
12.3 創建項目 257
12.3.1 準備資源 257
12.3.2 創建項目 257
12.3.3 創建配置文件 259
12.4 音樂分類列表 260
12.4.1 開發頁面文件 260
12.4.2 開發頁面樣式文件 261
12.4.3 開發頁面邏輯代碼 261
12.5 音樂列表 263
12.5.1 開發頁面文件 263
12.5.2 開發頁面樣式文件 264
12.5.3 開發頁面邏輯代碼 265
12.6 播放音樂 267
12.6.1 開發頁面文件 267
12.6.2 開發頁面樣式文件 268
12.6.3 開發頁面邏輯代碼 269
12.7 搜索音樂 271
12.7.1 開發頁面文件 271
12.7.2 開發頁面樣式文件 272
12.7.3 開發頁面邏輯代碼 273
