微信小程序開發項目教程（慕課版）

劉剛，參與過多個軟件項目的研發、設計和管理工作，擁有項目管理師*級認證、項目監理師中級認證，出版過《原型設計大師：Aure RP網站與APP設計從入門到精通》、《Aure RP原型設計圖解微課視頻教程（Web+App）》書籍。
在中國擎天公司、神州軟件子公司任職過，在項目管理和項目實踐、軟件設計等方面有一定經驗。
曾負責過紀檢監察廉政監督監管平台產品的設計與開發、國家郵政局項目的設計與開發、政務大數據項目的設計與開發等等項目。

1 章 
微信小程序概述................. 1 
1.1 微信小程序介紹......................1 
1.1.1 初識微信小程序....................... 1 
1.1.2 微信小程序的功能....................2 
1.1.3 微信小程序的使用場景.............3 
1.1.4 微信小程序的發展歷程.............3 
1.1.5 微信小程序帶來的機會............ 4 
1.2 微信小程序環境搭建............... 4 
1.2.1 小程序環境搭建...................... 4 
1.2.2 基礎技術準備......................... 6 
1.3 微信小程序*發者工具的使用... 6 
1.3.1 如何創建項目......................... 6 
1.3.2 微信*發者工具界面............... 8 
1.3.3 常用快捷鍵...........................16 
1.4 項目實戰：創建莫凡商城小程序...............................16 
1.5 小結..................................18 

2 章 莫凡商城小程序項目任務.... 19 
2.1 “我的”模塊功能介紹............19 
2.1.1 任務1—實現底部標籤導航功能....................................19 
2.1.2 任務2—實現註冊功能....... 20 
2.1.3 任務3—實現登錄功能....... 20 
2.1.4 任務4—實現“我的”界面列表式導航功能................... 20 
2.1.5 任務5—實現修改密碼功能.................................... 21 
2.1.6 任務6—實現意見反饋功能.................................... 21 
2.1.7 任務7—實現清除緩存功能....................................22 
2.1.8 任務8—實現我的訂單功能....................................22 
2.2 “首頁”模塊功能介紹............22 
2.2.1 任務9—實現搜索區域佈局與海報輪播功能.......................22 
2.2.2 任務10—實現圖書列表顯示功能靜態佈局與動態渲染.......23 
2.2.3 任務11—實現圖書搜索功能....................................23 
2.2.4 任務12—實現圖書更多列表顯示功能.............................23 
2.3 “購買商品”模塊功能介紹......24 
2.3.1 任務13—實現商品詳情頁功能....................................24 
2.3.2 任務14—實現商品加入購物車功能..........................25 
2.3.3 任務15—實現購物車列表功能....................................25 
2.3.4 任務16—實現商品立即購買頁功能..........................25 
2.3.5 任務17—實現收貨地址列表功能.............................25 
2.3.6 任務18—實現新增和編輯地址功能.............................26 
2.3.7 任務19—實現支付功能......26 
2.3.8 任務20—實現支付完成頁功能....................................27 
2.3.9 任務21—實現訂單詳情頁功能................................... 27 
2.4 “圖書分類”模塊功能介紹.......28 
2.4.1 任務22—實現圖書分類功能................................... 28 
2.4.2 任務23—實現圖書分類結果列表功能............................. 29 
2.5 小結..................................29 

3 章 莫凡商城小程序的項目結構............................. 30 
3.1 項目目錄樹結構介紹..............30 
3.1.1 框架全局文件....................... 30 
3.1.2 項目實戰：任務1—實現底部標籤導航功能................ 36 
3.1.3 工具類文件.......................... 38 
3.1.4 框架頁面文件...................... 38 
3.2 微信小程序邏輯層框架接口.....39 
3.2.1 使用App()函數註冊小程序... 39 
3.2.2 使用Page()函數註冊頁面.... 40 
3.3 微信小程序WXML 視圖層.....42 
3.3.1 WXML 標籤語言................. 42 
3.3.2 動態綁定數據...................... 42 
3.3.3 組件屬性動態綁定數據.......... 42 
3.3.4 控制屬性動態綁定數據.......... 43 
3.3.5 關鍵字動態綁定數據............. 43 
3.3.6 運算................................... 43 
3.4 微信小程序WXSS 樣式渲染....44 
3.4.1 尺寸單位............................. 44 
3.4.2 樣式導入............................ 44 
3.4.3 內聯樣式............................ 45 
3.4.4 選擇器............................... 45 
3.4.5 常用樣式屬性...................... 45 
3.5 微信小程序條件渲染..............49 
3.5.1 使用w: if 判斷單個組件.......49 
3.5.2 使用block w: if 判斷多個組件....................................49 
3.6 微信小程序列表渲染..............49 
3.6.1 使用w: for 列表渲染單個組件....................................49 
3.6.2 使用block w: for 列表渲染多個組件.............................50 
3.6.3 使用w: key 指定唯*標識符.................................50 
3.7 項目實戰：任務4—實現“我的”界面列表式導航功能（1）...51 
3.8 小結..................................54 

4 章 莫凡商城首頁靜態佈局設計............................. 55 
4.1 首頁需求分析與知識點...........55 
4.2 視圖容器組件在首頁中的應用..................................55 
4.2.1 view 視圖容器組件...............56 
4.2.2 scroll-view 可滾動視圖容器組件....................................57 
4.2.3 swiper 滑塊視圖容器組件.....59 
4.2.4 movable-view 可移動視容器組件.............................62 
4.2.5 cover-view 覆蓋原生組件的視圖容器組件.......................64 
4.2.6 項目實戰：任務9—實現搜索區域佈局與海報輪播功能.......65 
4.3 基礎內容組件......................68 
4.3.1 icon 圖標組件......................68 
4.3.2 tet 文本組件......................70 
4.3.3 progress 進度條組件........... 71 
4.3.4 rich-tet 富文本組件........... 71 
4.3.5 editor 富文本編輯器及API ... 73 
4.4 image 圖片組件及圖片API 的應用..................................76 
4.4.1 image 圖片組件.................. 76 
4.4.2 圖片API 的應用.................. 79 
4.4.3 項目實戰：任務10（1）—實現圖書列表顯示功能靜態佈局.... 84 
4.5 導航組件和導航API .............88 
4.5.1 navigator 頁面鏈接組件...... 88 
4.5.2 w.navigateTo 保留當前頁跳轉API ............................ 90 
4.5.3 w.redirectTo 關閉當前頁跳轉API .............................91 
4.5.4 w.switchTab 跳轉到tabBar頁面API ............................ 92 
4.5.5 w.navigateBack 返回上一頁API ......................... 93 
4.5.6 w.reLaunch 關閉所有頁面，打開某個頁面API................ 94 
4.5.7 導航條API ......................... 94 
4.5.8 Tab Bar 標籤導航API ........ 96 
4.5.9 項目實戰：任務11—實現圖書搜索功能...................... 98 
4.6 項目實戰：任務12—實現圖書更多列表顯示功能靜態佈局..... 102 
4.7 小結................................107 

5 章 莫凡商城首頁動態綁定設計........................... 108 
5.1 微信小程序函數處理............108 
5.1.1 生命週期函數......................108 
5.1.2 頁面事件函數......................110 
5.1.3 頁面路由管理......................110 
5.1.4 自定義函數......................... 111 
5.1.5 setData 設值函數...............112 
5.2 微信小程序網絡請求............ 113 
5.2.1 網絡訪問配置......................113 
5.2.2 w.request 請求數據API ....116 
5.2.3 w.uploadFile 文件上傳API ............................118 
5.2.4 w.downloadFile 文件下載API ........................... 120 
5.2.5 WebSocket 會話API ........121 
5.2.6 項目實戰：任務10（2）—實現圖書列表顯示功能動態渲染.... 124 
5.3 微信小程序定義模板............ 126 
5.3.1 定義模板............................ 126 
5.3.2 使用模板........................... 126 
5.4 微信小程序的引用功能......... 127 
5.4.1 import 引用....................... 127 
5.4.2 include 引用..................... 127 
5.5 WXS 小程序腳本語言......... 127 
5.5.1 模塊化............................... 128 
5.5.2 變量與數據類型.................. 129 
5.5.3 註釋................................. 130 
5.5.4 語句..................................131 
5.6 下拉刷新及窗口設置............ 132 
5.6.1 下拉刷新API 及事件........... 132 
5.6.2 w.setBackgroundColor動態設置窗口的背景色......... 134 
5.6.3 w.setBackgroundTetStyle動態設置下拉背景字體......... 135 
5.6.4 w.loadFontFace 引入三方字體.................................. 136 
5.6.5 w.pageScrollTo 將頁面滾動到目標位置.................. 137 
5.7 小結................................ 137 

6 章 莫凡商城的註冊、登錄功能........................... 138 
6.1 微信小程序表單組件............138 
6.1.1 button 按鈕組件.................138 
6.1.2 checkbo 多選項目組件..... 141 
6.1.3 radio 單選項目組件.............143 
6.1.4 input 輸入框組件................143 
6.1.5 tetarea 多行輸入框組件....146 
6.1.6 label 改進表單可用性組件....148 
6.1.7 picker 滾動選擇器組件........149 
6.1.8 slider 滑動選擇器組件.........158 
6.1.9 switch 開關選擇器組件.......160 
6.1.10 form 表單組件..................162 
6.1.11 項目實戰：任務2—實現註冊功能............................163 
6.2 微信小程序界面交互API .....167 
6.2.1 w.showToast/w.hideToast顯示/隱藏消息提示框API.....168 
6.2.2 w.showModal 顯示模態對話框API ........................169 
6.2.3 w.showLoading/w.hideLoading 顯示/隱藏loading 提示API............170 
6.2.4 w.showActionSheet 顯示作菜單API .....................170 
6.3 定時器API ...................... 171 
6.4 數據緩存API 的獲取.......... 172 
6.4.1 將數據緩存到本地...............173 
6.4.2 獲取本地緩存數據...............174 
6.4.3 清理本地緩存數據...............177 
6.4.4 從緩存獲取圖書列表數據.....178 
6.5 登錄相關API....................179 
6.5.1 登錄API ...........................179 
6.5.2 獲取賬號信息API............... 181 
6.5.3 獲取用戶信息API ...............181 
6.5.4 授權API........................... 182 
6.5.5 設置API........................... 184 
6.6 項目實戰：任務3—實現登錄功能................................ 185 
6.7 項目實戰：任務4—實現“我的”界面列表式導航功能（2） .... 191 
6.8 項目實戰：任務5—實現修改密碼功能.......................... 195 
6.9 項目實戰：任務6—實現意見反饋功能.......................... 199 
6.10 項目實戰：任務7—實現清除緩存功能........................ 201 
6.11 小結.............................. 202 

7 章 莫凡商城商品詳情頁設計........................... 203 
7.1 頁面間傳遞數據.................203 
7.2 媒體組件及媒體API 的應用................................205 
7.2.1 audio 音頻組件及音頻API ...........................205 
7.2.2 video 視頻組件及視頻API ...........................208 
7.2.3 camera 相機組件及相機API ........................... 210 
7.2.4 live-player 實時音視頻播放...................................211 
7.2.5 live-pusher 實時音視頻錄製.................................. 212 
7.3 項目實戰：任務13—實現商品詳情頁功能.................. 213 
7.4 項目實戰：任務14—實現商品加入購物車功能............ 221 
7.5 項目實戰：任務15—實現購物車列表功能..................224 
7.6 商品詳情頁分享與轉發API 的應用................................228 
7.7 小結................................229 

8 章 莫凡商城獲取收貨地址功能設計........................... 230 
8.1 位置API .........................230 
8.1.1 查看位置、獲得位置、打開位置................................. 230 
8.1.2 開啟/停止接收位置信息....... 232 
8.1.3 監聽實時地理位置.............. 232 
8.2 收貨地址API....................233 
8.3 地圖組件及地圖API ...........234 
8.3.1 map 地圖組件................... 234 
8.3.2 地圖API 的應用................ 237 
8.4 項目實戰：任務16—實現商品立即購買頁功能...........238 
8.5 項目實戰：任務17—實現收貨地址列表功能..............244 
8.6 項目實戰：任務18—實現新增和編輯地址功能...........247 
8.7 小結................................252 

9 章 莫凡商城支付功能及訂單詳情頁設計................... 253 
9.1 支付API .........................253 
9.2 項目實戰：任務19—實現支付功能..........................254 
9.3 畫布組件及畫布API 的應用...257 
9.4 項目實戰：任務20—實現支付完成頁功能.................. 261 
9.5 項目實戰：任務8—實現我的訂單功能..................... 262 
9.6 項目實戰：任務21—實現訂單詳情頁功能..................269 
9.7 小結...............................276 

10 章 小程序擴展應用............. 277 
10.1 設備應用API ..................277 
10.1.1 獲得系統信息....................277 
10.1.2 獲取網絡狀態....................278 
10.1.3 加速度計..........................279 
10.1.4 羅盤................................279 
10.1.5 撥打電話..........................280 
10.1.6 掃碼................................280 
10.1.7 剪貼板............................. 281 
10.1.8 藍牙................................ 281 
10.1.9 屏幕亮度..........................282 
10.1.10 震動..............................282 
10.1.11 手機聯繫人......................282 
10.2 文件作API..................283 
10.2.1 w.saveFile 保存文件到本地..................................283 
10.2.2 w.getSavedFileList 獲取本地文件列表....................284 
10.2.3 w.getSavedFileInfo 獲取本地文件信息....................284 
10.2.4 w.removeSavedFile 刪除本地文件..........................285 
10.2.5 w.openDocument 打開文檔............................... 285 
10.2.6 w.getFileInfo 獲取文件信息............................... 286 
10.3 窗口API........................286 
10.4 微信運動API ..................286 
10.5 項目實戰：任務22—實現圖書分類功能..................287 
10.6 項目實戰：任務23—實現圖書分類結果列表功能.......290 
10.7 小結..............................293