微信小程序?qū)崙?zhàn)入門（內(nèi)含完整實(shí)例解析）

目　錄
第一章 創(chuàng)建項(xiàng)目 1
1．1 注冊(cè)小程序開發(fā)者 1
1．2 安裝環(huán)境 7
1．3 創(chuàng)建小程序 7
1．4 開發(fā)工具介紹 9
1．4．1 概覽 9
1．4．2 編輯 10
1．4．3 調(diào)試 16
1．4．4 項(xiàng)目 20
1．4．5 運(yùn)行預(yù)覽 22
第二章 小程序詳細(xì)介紹 23
2．1 小程序、原生App、
WebApp的區(qū)別 23
2．2 應(yīng)用場(chǎng)景 26
2．3 全局配置（app．json）和
頁(yè)面配置（*．json） 27
2．3．1 全局配置app．json
詳解 27
2．3．2 頁(yè)面配置（*．json） 32
2．4 小程序架構(gòu) 32
2．4．1 框架介紹 32
2．4．2 邏輯層 34
2．4．3 視圖層（WXML和
WXSS 介紹） 40
2．4．4 數(shù)據(jù)層 40
2．5 視圖層WXML 介紹 50
2．6 視圖層WXSS 介紹 63
2．7 WXML與HTML的區(qū)別 65
2．8 小程序調(diào)試、上傳、發(fā)布 66
2．8．1 事前準(zhǔn)備：Https 66
2．8．2 預(yù)覽及調(diào)試 67
2．8．3 發(fā)布 69
第三章 框架組件 73
3．1 框架組件介紹 73
3．2 視圖容器 76
3．2．1 view 76
3．2．2 scroll-view 96
3．2．3 swiper 與
swiper-item 100
3．2．4 movable-area與
movable-view 106
3．2．5 cover-view 與
cover-image 108
3．3 基礎(chǔ)內(nèi)容 110
3．3．1 icon 110
3．3．2 text 113
3．3．3 rich-text 116
3．3．4 progress 118
3．4 表單組件 119
3．4．1 button 119
3．4．2 checkbox與
checkbox-group 123
3．4．3 form 124
3．4．4 input 126
3．4．5 label 133
3．4．6 picker 136
3．4．7 picker-view 146
3．4．8 radio 149
3．4．9 slider 152
3．4．10 switch 153
3．4．11 textarea 156
3．5 操作反饋 160
3．5．1 action-sheet 160
3．5．2 modal 163
3．5．3 toast 165
3．5．4 loading 167
3．6 導(dǎo)航 （navigator） 169
3．7 媒體組件 171
3．7．1 audio 171
3．7．2 image 174
3．7．3 video 178
3．8 地圖（map） 183
3．9 畫布（canvas） 190
3．10 客服會(huì)話
（contact-button） 191
3．11 開放數(shù)據(jù)（open-data） 192
第四章 API 193
4．1 網(wǎng)絡(luò) 193
4．1．1 wx．request（OBJECT）
發(fā)起請(qǐng)求 194
4．1．2 上傳、下載 197
4．1．3 Websocket 201
4．2 媒體 205
4．2．1 圖片 205
4．2．2 錄音 210
4．2．3 音頻播放控制 211
4．2．4 音樂播放控制 213
4．2．5 視頻和視頻組件控制 220
4．3 文件 224
4．4 數(shù)據(jù)緩存 229
4．5 位置 234
4．5．1 獲取位置 234
4．5．2 查看位置 237
4．5．3 地圖組件控制 238
4．6 設(shè)備 239
4．6．1 系統(tǒng)信息 239
4．6．2 網(wǎng)絡(luò)狀態(tài) 243
4．6．3 重力感應(yīng)-加速度計(jì) 244
4．6．4 羅盤 245
4．6．5 撥打電話 247
4．6．6 掃碼 247
4．6．7 剪貼板 248
4．6．8 藍(lán)牙 250
4．6．9 iBeacon 264
4．6．10 屏幕亮度 267
4．6．11 用戶截屏事件 269
4．6．12 震動(dòng) 269
4．6．13 手機(jī)聯(lián)系人 270
4．7 界面交互 272
4．7．1 交互反饋 272
4．7．2 頁(yè)面導(dǎo)航（設(shè)置導(dǎo)航條、
導(dǎo)航） 275
4．7．3 動(dòng)畫 281
4．7．4 下拉刷新 285
4．7．5 位置 285
4．8 繪圖 288
4．8．1 坐標(biāo)系介紹
（coordinates） 289
4．8．2 繪圖主接口 290
4．8．3 填充顏色、線條、陰影 293
4．8．4 漸變 294
4．8．5 線條樣式 297
4．8．6 矩形 300
4．8．7 路徑 302
4．8．8 變形 311
4．8．9 文字（設(shè)置字號(hào)/繪制
文本） 312
4．8．10 圖片（drawImage） 314
4．8．11 全局畫筆透明度
（setGlobalAlpha） 315
4．8．12 其他 316
4．9 拓展接口 317
4．10 開放接口 318
第五章 開放API 319
5．1 登錄 319
5．2 簽名加密 324
5．3 授權(quán) 326
5．4 用戶信息 327
5．5 微信支付 329
5．6 模板消息 330
5．6．1 使用說(shuō)明 330
5．6．2 接口說(shuō)明 331
5．7 客服消息 335
5．7．1 接收消息和事件 335
5．7．2 發(fā)送客服消息 338
5．7．3 臨時(shí)素材接口 339
5．7．4 接入指引 341
5．8 分享 343
5．9 二維碼 347
5．10 收貨地址 348
5．11 卡券 349
5．12 設(shè)置 351
5．13 微信運(yùn)動(dòng) 352
5．14 打開小程序 354
第六章 項(xiàng)目實(shí)戰(zhàn) 356
6．1 仿新聞小應(yīng)用 356
6．1．1 通過(guò)tabBar實(shí)現(xiàn)頁(yè)面
之間的切換 357
6．1．2 頂部滑動(dòng)菜單的實(shí)現(xiàn) 358
6．1．3 新聞列表的實(shí)現(xiàn) 361
6．1．4 首頁(yè)完整代碼 363
6．1．5 用戶中心界面實(shí)現(xiàn) 369
6．1．6 用戶中心界面完整
代碼 372
6．2 書架功能 376
6．2．1 精彩推薦模塊實(shí)現(xiàn) 377
6．2．2 熱門書籍模塊實(shí)現(xiàn) 377
6．2．3 精品書籍模塊實(shí)現(xiàn) 378
6．3 錄音功能 385
6．4 二維碼生成器 391
6．5 圖片濾鏡 393
6．5．1 模糊、懷舊、復(fù)古、美白
功能的實(shí)現(xiàn) 394
6．5．2 飽和度、亮度、對(duì)比度
功能的實(shí)現(xiàn) 396
6．5．3 動(dòng)態(tài)濾鏡的實(shí)現(xiàn) 397
6．6 仿電影小應(yīng)用 398
6．6．1 電影列表頁(yè)面的實(shí)現(xiàn) 399
6．6．2 電影詳情頁(yè)面的實(shí)現(xiàn) 405
6．6．3 搜索頁(yè)面的實(shí)現(xiàn) 408
附件1 微信小程序相關(guān)規(guī)范及常見
問題 417
附件2 資源下載 418