●目  錄 章 創建項目 1 1.1 注冊小程序開發者 1 1.2 安裝環境 7 1.3 創建小程序 7 1.4 開發工具介紹 9 1.4.1 概覽 9 1.4.2 編輯 10 1.4.3 調試 16 1.4.4 項目 20 1.4.5 運行預覽 22 第二章 小程序詳細介紹 23 2.1 小程序、原生App、 WebApp的區別 23 2.2 應用場景 26 2.3 全局配置（app.json）和 頁面配置（*.json） 27 2.3.1 全局配置app.json 詳解 27 2.3.2 頁面配置（*.json） 32 2.4 小程序架構 32 2.4.1 框架介紹 32 2.4.2 邏輯層 34 2.4.3 視圖層（WXML和 WXSS 介紹） 40 2.4.4 數據層 40 2.5 視圖層WXML 介紹 50 2.6 視圖層WXSS 介紹 63 2.7 WXML與HTML的區別 65 2.8 小程序調試、上傳、發布 66 2.8.1 事前準備：Https 66 2.8.2 預覽及調試 67 2.8.3 發布 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 基礎內容 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 導航 （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 客服會話 （contact-button） 191 3.11 開放數據（open-data） 192 第四章 API 193 4.1 網絡 193 4.1.1 wx.request（OBJECT） 發起請求 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 數據緩存 229 4.5 位置 234 4.5.1 獲取位置 234 4.5.2 查看位置 237 4.5.3 地圖組件控制 238 4.6 設備 239 4.6.1 繫統信息 239 4.6.2 網絡狀態 243 4.6.3 重力感應-加速度計 244 4.6.4 羅盤 245 4.6.5 撥打電話 247 4.6.6 掃碼 247 4.6.7 剪貼板 248 4.6.8 藍牙 250 4.6.9 iBeacon 264 4.6.10 屏幕亮度 267 4.6.11 用戶截屏事件 269 4.6.12 震動 269 4.6.13 手機聯繫人 270 4.7 界面交互 272 4.7.1 交互反饋 272 4.7.2 頁面導航（設置導航條、 導航） 275 4.7.3 動畫 281 4.7.4 下拉刷新 285 4.7.5 位置 285 4.8 繪圖 288 4.8.1 坐標繫介紹 （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 文字（設置字號/繪制 文本） 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 授權 326 5.4 用戶信息 327 5.5 微信支付 329 5.6 模板消息 330 5.6.1 使用說明 330 5.6.2 接口說明 331 5.7 客服消息 335 5.7.1 接收消息和事件 335 5.7.2 發送客服消息 338 5.7.3 臨時素材接口 339 5.7.4 接入指引 341 5.8 分享 343 5.9 二維碼 347 5.10 收貨地址 348 5.11 卡券 349 5.12 設置 351 5.13 微信運動 352 5.14 打開小程序 354 第六章 項目實戰 356 6.1 仿新聞小應用 356 6.1.1 通過tabBar實現頁面 之間的切換 357 6.1.2 頂部滑動菜單的實現 358 6.1.3 新聞列表的實現 361 6.1.4 首頁完整代碼 363 6.1.5 用戶中心界面實現 369 6.1.6 用戶中心界面完整 代碼 372 6.2 書架功能 376 6.2.1 精彩推薦模塊實現 377 6.2.2 熱門書籍模塊實現 377 6.2.3 精品書籍模塊實現 378 6.3 錄音功能 385 6.4 二維碼生成器 391 6.5 圖片濾鏡 393 6.5.1 模糊、懷舊、復古、美白 功能的實現 394 6.5.2 飽和度、亮度、對比度 功能的實現 396 6.5.3 動態濾鏡的實現 397 6.6 仿電影小應用 398 6.6.1 電影列表頁面的實現 399 6.6.2 電影詳情頁面的實現 405 6.6.3 搜索頁面的實現 408 附件1 微信小程序相關規範及常見 問題 417 附件2 資源 418