目　錄



第1章　微信小程序入門　1
1.1　什么是微信小程序　1
1.2　原生熱布局　4
1.3　注冊小程序賬號　5
1.4　獲得AppID　6
1.5　設置小程序信息　7
1.6　開發**個微信小程序　8
1.6.1　配置開發環境　8
1.6.2　建立小程序項目　10
1.6.3　猜拳游戲的布局　11
1.6.4　控制剪子、石頭、布的快速
切換　13
1.6.5　真機測試小程序　15
1.6.6　真機調試小程序　16
1.6.7　上傳和審核小程序　17
1.7　小結　18
第2章　布局　19
2.1　水平排列　19
2.2　水平折行排列　21
2.3　垂直排列　22
2.4　垂直折列排列　24
2.5　水平排列對齊方式　24
2.6　垂直排列對齊方式　25
2.7　水平等間隔排列　28
2.8　帶邊距的水平等間隔排列　29
2.9　小結　30
第3章　視圖容器　31
3.1　滾動視圖（scroll-view）　31
3.1.1　垂直滾動視圖　31
3.1.2　水平滾動視圖　32
3.1.3　滾動到邊緣觸發事件　34
3.1.4　滾動事件　35
3.2　廣告輪詢圖視圖容器（swiper）　37
3.2.1　顯示水平和垂直滑動的廣告
頁面　37
3.2.2　自動切換廣告輪詢圖　39
3.2.3　響應輪詢圖切換事件　40
3.3　小結　40
第4章　視圖層技術　41
4.1　條件渲染　41
4.2　列表渲染　43
4.2.1　wx:for-item　43
4.2.2　wx:for-index　44
4.2.3　block wx:for　44
4.2.4　嵌套循環　45
4.2.5　wx:key　46
4.3　模板　50
4.4　引用　53
4.4.1　import　53
4.4.2　include　54
4.5　小結　54
第5章　基礎組件　55
5.1　text組件　55
5.2　系統內置圖標組件（icon）　57
5.3　progress組件　58
5.4　小結　59
第6章　表單組件　60
6.1　按鈕組件（button）　60
6.2　復選框組件（checkbox）　63
6.3　文本輸入組件（input）　65
6.4　可與其他組件綁定的文本組件
（label）　68
6.5　單選組件（radio）　71
6.6　開關組件（switch）　73
6.7　滾動組件（picker）　75
6.8　滑桿組件（slider）　77
6.9　多行輸入框組件（textarea）　79
6.10　form組件　80
6.11　小結　82
第7章　多媒體組件　83
7.1　image組件　83
7.2　audio組件　86
7.3　video組件　88
7.4　小結　91
第8章　其他組件　92
8.1　交互組件　92
8.1.1　動作表單（ActionSheet）　92
8.1.2　對話框　95
8.2　畫布　96
8.3　地圖　98
8.4　導航　100
8.4.1　頁面導航　100
8.4.2　TabBar導航　103
8.5　小結　105
第9章　網絡　106
9.1　準備工作（阿里云還是騰訊云）　106
9.2　發起HTTPS請求　109
9.3　上傳文件　111
9.4　下載文件　112
9.5　WebSocket　112
9.6　小結　115
第10章　多媒體　116
10.1　圖像　116
10.1.1　選擇圖像　116
10.1.2　預覽圖像　120
10.1.3　獲取圖像信息　121
10.2　音頻處理　122
10.2.1　錄音　123
10.2.2　播放、暫停、停止聲音　124
10.2.3　控制背景音樂　126
10.2.4　音頻組件控制　129
10.3　視頻處理　130
10.3.1　選擇視頻文件　131
10.3.2　視頻組件控制　131
10.4　小結　133
第11章　數據存取　134
11.1　文件管理　134
11.1.1　保存文件　134
11.1.2　獲取保存的文件列表　135
11.1.3　獲取文件信息　136
11.1.4　刪除永久文件　136
11.1.5　打開文檔　136
11.2　數據緩存　138
11.2.1　異步存取key-value值　138
11.2.2　同步存取key-value值　139
11.2.3　獲取key-value存儲信息　140
11.2.4　移除指定的key-value值　140
11.2.5　清除所有的key-value值　141
11.3　小結　141
第12章　位置　142
12.1　獲取經緯度　142
12.2　在地圖上選中位置　143
12.3　用微信內置的地圖顯示位置　144
12.4　與組件綁定　146
12.5　小結　147
第13章　設備　148
13.1　獲取系統信息　148
13.2　獲得網絡類型　150
13.3　獲取重力感應數據　151
13.4　獲取羅盤方向　152
13.5　撥打電話　153
13.6　掃描二維碼　154
13.7　小結　155
第14章　界面　156
14.1　信息框　156
14.1.1　顯示Toast信息框　156
14.1.2　隱藏Toast信息框　157
14.1.3　顯示模態窗口　157
14.1.4　顯示操作菜單　158
14.2　導航　159
14.2.1　為導航條添加標題　159
14.2.2　設置和隱藏導航條
動畫　160
14.2.3　導航與返回頁面　161
14.2.4　導航到指定頁面，并關閉當前
頁面　163
14.3　動畫　163
14.4　繪圖　166
14.4.1　繪制基本圖形　166
14.4.2　繪制二次方貝塞爾曲線　167
14.4.3　繪制三次方貝塞爾曲線　168
14.4.4　陰影效果　170
14.4.5　繪制圖像　170
14.4.6　圖形的縮放　171
14.4.7　圖形的旋轉　171
14.4.8　改變坐標原點　172
14.4.9　漸變　173
14.5　下拉刷新　174
14.6　小結　174
第15章　開放接口　175
15.1　微信登錄　175
15.1.1　獲取SessionKey　175
15.1.2　校驗登錄是否過期　177
15.2　獲取用戶信息　178
15.3　微信支付　179
15.4　分享　181
15.5　小結　182
第16章　徽章（Badge）　183
16.1　新消息徽章　183
16.2　圖標右上角顯示數字徽章　186
16.3　將數字徽章改成模板　186
16.4　文字右側顯示數字徽章　188
16.5　小結　189
第17章　基礎組件　190
17.1　頁腳（footer）　190
17.2　網格（grid）　192
17.3　裝載動畫（loadmore）　193
17.4　列表組件（list）　194
17.5　單選列表項　196
17.6　復選列表項　197
17.7　小結　198
第18章　高仿計算器　199
18.1　項目概述　199
18.2　設計和實現按鈕模板　200
18.3　計算器UI布局　200
18.4　編寫計算器的邏輯代碼　205
18.5　小結　208
第19章　快遞查詢　209
19.1　項目概述　209
19.2　設計UI　210
19.3　編寫業務邏輯代碼　213
19.4　小結　215
第20章　電影訂票　216
20.1　項目概述　216
20.2　設計電影列表UI的布局　217
20.3　編寫電影列表的邏輯代碼　218
20.4　電影細節展示和訂票頁面UI布局　219
20.5　電影展示和訂票邏輯實現　221
20.6　小結　222
第21章　圖表　223
21.1　曲線圖　223
21.2　柱狀圖　225
21.3　餅狀圖　226
21.4　環形圖　228
21.5　面積圖　229
21.6　小結　231