第 1 章 微信小程序概述.................　1 1.1　微信小程序介紹......................1 1.1.1　初識(shí)微信小程序.......................　1 1.1.2　微信小程序的功能....................2 1.1.3　微信小程序的使用場(chǎng)景.............3 1.1.4　微信小程序的發(fā)展歷程.............3 1.1.5　微信小程序帶來的機(jī)會(huì)............　4 1.2　微信小程序環(huán)境搭建...............　4 1.2.1　小程序環(huán)境搭建......................　4 1.2.2　基礎(chǔ)技術(shù)準(zhǔn)備.........................　6 1.3　微信小程序開發(fā)者工具的使用...　6 1.3.1　如何創(chuàng)建項(xiàng)目.........................　6 1.3.2　微信開發(fā)者工具界面...............　8 1.3.3　常用快捷鍵...........................16 1.4　項(xiàng)目實(shí)戰(zhàn)：創(chuàng)建莫凡商城小程序...............................16 1.5　小結(jié)..................................18 第　2 章 莫凡商城小程序項(xiàng)目任務(wù)....　19 2.1　“我的”模塊功能介紹............19 2.1.1　任務(wù)1—實(shí)現(xiàn)底部標(biāo)簽導(dǎo)航功能....................................19 2.1.2　任務(wù)2—實(shí)現(xiàn)注冊(cè)功能.......　20 2.1.3　任務(wù)3—實(shí)現(xiàn)登錄功能.......　20 2.1.4　任務(wù)4—實(shí)現(xiàn)“我的”界面列表式導(dǎo)航功能...................　20 2.1.5　任務(wù)5—實(shí)現(xiàn)修改密碼功能....................................　21 2.1.6　任務(wù)6—實(shí)現(xiàn)意見反饋功能....................................　21 2.1.7　任務(wù)7—實(shí)現(xiàn)清除緩存功能....................................22 2.1.8　任務(wù)8—實(shí)現(xiàn)我的訂單功能....................................22 2.2　“首頁”模塊功能介紹............22 2.2.1　任務(wù)9—實(shí)現(xiàn)搜索區(qū)域布局與海報(bào)輪播功能.......................22 2.2.2　任務(wù)10—實(shí)現(xiàn)圖書列表顯示功能靜態(tài)布局與動(dòng)態(tài)渲染.......23 2.2.3　任務(wù)11—實(shí)現(xiàn)圖書搜索功能....................................23 2.2.4　任務(wù)12—實(shí)現(xiàn)圖書更多列表顯示功能.............................23 2.3　“購買商品”模塊功能介紹......24 2.3.1　任務(wù)13—實(shí)現(xiàn)商品詳情頁功能....................................24 2.3.2　任務(wù)14—實(shí)現(xiàn)商品加入購物車功能..........................25 2.3.3　任務(wù)15—實(shí)現(xiàn)購物車列表功能....................................25 2.3.4　任務(wù)16—實(shí)現(xiàn)商品立即購買頁功能..........................25 2.3.5　任務(wù)17—實(shí)現(xiàn)收貨地址列表功能.............................25 2.3.6　任務(wù)18—實(shí)現(xiàn)新增和編輯地址功能.............................26 2.3.7　任務(wù)19—實(shí)現(xiàn)支付功能......26 2.3.8　任務(wù)20—實(shí)現(xiàn)支付完成頁功能....................................27 2.3.9　任務(wù)21—實(shí)現(xiàn)訂單詳情頁功能...................................　27 2.4　“圖書分類”模塊功能介紹.......28 2.4.1　任務(wù)22—實(shí)現(xiàn)圖書分類功能...................................　28 2.4.2　任務(wù)23—實(shí)現(xiàn)圖書分類結(jié)果列表功能.............................　29 2.5　小結(jié)..................................29 第3　章 莫凡商城小程序的項(xiàng)目結(jié)構(gòu).............................　30 3.1　項(xiàng)目目錄樹結(jié)構(gòu)介紹..............30 3.1.1　框架全局文件.......................　30 3.1.2　項(xiàng)目實(shí)戰(zhàn)：任務(wù)1—實(shí)現(xiàn)底部標(biāo)簽導(dǎo)航功能................　36 3.1.3　工具類文件..........................　38 3.1.4　框架頁面文件......................　38 3.2　微信小程序邏輯層框架接口.....39 3.2.1　使用App()函數(shù)注冊(cè)小程序...　39 3.2.2　使用Page()函數(shù)注冊(cè)頁面....　40 3.3　微信小程序WXML 視圖層.....42 3.3.1　WXML 標(biāo)簽語言.................　42 3.3.2　動(dòng)態(tài)綁定數(shù)據(jù)......................　42 3.3.3　組件屬性動(dòng)態(tài)綁定數(shù)據(jù)..........　42 3.3.4　控制屬性動(dòng)態(tài)綁定數(shù)據(jù)..........　43 3.3.5　關(guān)鍵字動(dòng)態(tài)綁定數(shù)據(jù).............　43 3.3.6　運(yùn)算...................................　43 3.4　微信小程序WXSS 樣式渲染....44 3.4.1　尺寸單位.............................　44 3.4.2　樣式導(dǎo)入............................　44 3.4.3　內(nèi)聯(lián)樣式............................　45 3.4.4　選擇器...............................　45 3.4.5　常用樣式屬性......................　45 3.5　微信小程序條件渲染..............49 3.5.1　使用wx: if 判斷單個(gè)組件.......49 3.5.2　使用block wx: if 判斷多個(gè)組件....................................49 3.6　微信小程序列表渲染..............49 3.6.1　使用wx: for 列表渲染單個(gè)組件....................................49 3.6.2　使用block wx: for 列表渲染多個(gè)組件.............................50 3.6.3　使用wx: key 指定唯一標(biāo)識(shí)符.................................50 3.7　項(xiàng)目實(shí)戰(zhàn)：任務(wù)4—實(shí)現(xiàn)“我的”界面列表式導(dǎo)航功能（1）...51 3.8　小結(jié)..................................54 第4　章 莫凡商城首頁靜態(tài)布局設(shè)計(jì).............................　55 4.1　首頁需求分析與知識(shí)點(diǎn)...........55 4.2　視圖容器組件在首頁中的應(yīng)用..................................55 4.2.1　view 視圖容器組件...............56 4.2.2　scroll-view 可滾動(dòng)視圖容器組件....................................57 4.2.3　swiper 滑塊視圖容器組件.....59 4.2.4　movable-view 可移動(dòng)視容器組件.............................62 4.2.5　cover-view 覆蓋原生組件的視圖容器組件.......................64 4.2.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)9—實(shí)現(xiàn)搜索區(qū)域布局與海報(bào)輪播功能.......65 4.3　基礎(chǔ)內(nèi)容組件......................68 4.3.1　icon 圖標(biāo)組件......................68 4.3.2　text 文本組件......................70 4.3.3　progress 進(jìn)度條組件...........　71 4.3.4　rich-text 富文本組件...........　71 4.3.5　editor 富文本編輯器及API ...　73 4.4　image 圖片組件及圖片API 的應(yīng)用..................................76 4.4.1　image 圖片組件..................　76 4.4.2　圖片API 的應(yīng)用..................　79 4.4.3　項(xiàng)目實(shí)戰(zhàn)：任務(wù)10（1）—實(shí)現(xiàn)圖書列表顯示功能靜態(tài)布局....　84 4.5　導(dǎo)航組件和導(dǎo)航API .............88 4.5.1　navigator 頁面鏈接組件......　88 4.5.2　wx.navigateTo 保留當(dāng)前頁跳轉(zhuǎn)API ............................　90 4.5.3　wx.redirectTo 關(guān)閉當(dāng)前頁跳轉(zhuǎn)API .............................91 4.5.4　wx.switchTab 跳轉(zhuǎn)到tabBar頁面API ............................　92 4.5.5　wx.navigateBack 返回上一頁API .........................　93 4.5.6　wx.reLaunch 關(guān)閉所有頁面，打開某個(gè)頁面API................　94 4.5.7　導(dǎo)航條API .........................　94 4.5.8　Tab Bar 標(biāo)簽導(dǎo)航API ........　96 4.5.9　項(xiàng)目實(shí)戰(zhàn)：任務(wù)11—實(shí)現(xiàn)圖書搜索功能......................　98 4.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)12—實(shí)現(xiàn)圖書更多列表顯示功能靜態(tài)布局.....　102 4.7　小結(jié)................................107 第5　章 莫凡商城首頁動(dòng)態(tài)綁定設(shè)計(jì)...........................　108 5.1　微信小程序函數(shù)處理............108 5.1.1　生命周期函數(shù)......................108 5.1.2　頁面事件函數(shù)......................110 5.1.3　頁面路由管理......................110 5.1.4　自定義函數(shù).........................　111 5.1.5　setData 設(shè)值函數(shù)...............112 5.2　微信小程序網(wǎng)絡(luò)請(qǐng)求............　113 5.2.1　網(wǎng)絡(luò)訪問配置......................113 5.2.2　wx.request 請(qǐng)求數(shù)據(jù)API ....116 5.2.3　wx.uploadFile 文件上傳API ............................118 5.2.4　wx.downloadFile 文件下載API ...........................　120 5.2.5　WebSocket 會(huì)話API ........121 5.2.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)10（2）—實(shí)現(xiàn)圖書列表顯示功能動(dòng)態(tài)渲染....　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　變量與數(shù)據(jù)類型..................　129 5.5.3　注釋.................................　130 5.5.4　語句..................................131 5.6　下拉刷新及窗口設(shè)置............　132 5.6.1　下拉刷新API 及事件...........　132 5.6.2　wx.setBackgroundColor動(dòng)態(tài)設(shè)置窗口的背景色.........　134 5.6.3　wx.setBackgroundTextStyle動(dòng)態(tài)設(shè)置下拉背景字體.........　135 5.6.4　wx.loadFontFace 引入第三方字體..................................　136 5.6.5　wx.pageScrollTo 將頁面滾動(dòng)到目標(biāo)位置..................　137 5.7　小結(jié)................................　137 第6　章 莫凡商城的注冊(cè)、登錄功能...........................　138 6.1　微信小程序表單組件............138 6.1.1　button 按鈕組件.................138 6.1.2　checkbox 多選項(xiàng)目組件.....　141 6.1.3　radio 單選項(xiàng)目組件.............143 6.1.4　input 輸入框組件................143 6.1.5　textarea 多行輸入框組件....146 6.1.6　label 改進(jìn)表單可用性組件....148 6.1.7　picker 滾動(dòng)選擇器組件........149 6.1.8　slider 滑動(dòng)選擇器組件.........158 6.1.9　switch 開關(guān)選擇器組件.......160 6.1.10　form 表單組件..................162 6.1.11　項(xiàng)目實(shí)戰(zhàn)：任務(wù)2—實(shí)現(xiàn)注冊(cè)功能............................163 6.2　微信小程序界面交互API .....167 6.2.1　wx.showToast/wx.hideToast顯示/隱藏消息提示框API.....168 6.2.2　wx.showModal 顯示模態(tài)對(duì)話框API ........................169 6.2.3　wx.showLoading/wx.hideLoading 顯示/隱藏loading 提示API............170 6.2.4　wx.showActionSheet 顯示操作菜單API .....................170 6.3　定時(shí)器API ......................　171 6.4　數(shù)據(jù)緩存API 的獲取..........　172 6.4.1　將數(shù)據(jù)緩存到本地...............173 6.4.2　獲取本地緩存數(shù)據(jù)...............174 6.4.3　清理本地緩存數(shù)據(jù)...............177 6.4.4　從緩存獲取圖書列表數(shù)據(jù).....178 6.5　登錄相關(guān)API....................179 6.5.1　登錄API ...........................179 6.5.2　獲取賬號(hào)信息API...............　181 6.5.3　獲取用戶信息API ...............181 6.5.4　授權(quán)API...........................　182 6.5.5　設(shè)置API...........................　184 6.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)3—實(shí)現(xiàn)登錄功能................................　185 6.7　項(xiàng)目實(shí)戰(zhàn)：任務(wù)4—實(shí)現(xiàn)“我的”界面列表式導(dǎo)航功能（2） ....　191 6.8　項(xiàng)目實(shí)戰(zhàn)：任務(wù)5—實(shí)現(xiàn)修改密碼功能..........................　195 6.9　項(xiàng)目實(shí)戰(zhàn)：任務(wù)6—實(shí)現(xiàn)意見反饋功能..........................　199 6.10　項(xiàng)目實(shí)戰(zhàn)：任務(wù)7—實(shí)現(xiàn)清除緩存功能........................　201 6.11　小結(jié)..............................　202 第7　章 莫凡商城商品詳情頁設(shè)計(jì)...........................　203 7.1　頁面間傳遞數(shù)據(jù).................203 7.2　媒體組件及媒體API 的應(yīng)用................................205 7.2.1　audio 音頻組件及音頻API ...........................205 7.2.2　video 視頻組件及視頻API ...........................208 7.2.3　camera 相機(jī)組件及相機(jī)API ...........................　210 7.2.4　live-player 實(shí)時(shí)音視頻播放...................................211 7.2.5　live-pusher 實(shí)時(shí)音視頻錄制..................................　212 7.3　項(xiàng)目實(shí)戰(zhàn)：任務(wù)13—實(shí)現(xiàn)商品詳情頁功能..................　213 7.4　項(xiàng)目實(shí)戰(zhàn)：任務(wù)14—實(shí)現(xiàn)商品加入購物車功能............　221 7.5　項(xiàng)目實(shí)戰(zhàn)：任務(wù)15—實(shí)現(xiàn)購物車列表功能..................224 7.6　商品詳情頁分享與轉(zhuǎn)發(fā)API 的應(yīng)用................................228 7.7　小結(jié)................................229 第8　章 莫凡商城獲取收貨地址功能設(shè)計(jì)...........................　230 8.1　位置API .........................230 8.1.1　查看位置、獲得位置、打開位置.................................　230 8.1.2　開啟/停止接收位置信息.......　232 8.1.3　監(jiān)聽實(shí)時(shí)地理位置..............　232 8.2　收貨地址API....................233 8.3　地圖組件及地圖API ...........234 8.3.1　map 地圖組件...................　234 8.3.2　地圖API 的應(yīng)用................　237 8.4　項(xiàng)目實(shí)戰(zhàn)：任務(wù)16—實(shí)現(xiàn)商品立即購買頁功能...........238 8.5　項(xiàng)目實(shí)戰(zhàn)：任務(wù)17—實(shí)現(xiàn)收貨地址列表功能..............244 8.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)18—實(shí)現(xiàn)新增和編輯地址功能...........247 8.7　小結(jié)................................252 第9　章 莫凡商城支付功能及訂單詳情頁設(shè)計(jì)...................　253 9.1　支付API .........................253 9.2　項(xiàng)目實(shí)戰(zhàn)：任務(wù)19—實(shí)現(xiàn)支付功能..........................254 9.3　畫布組件及畫布API 的應(yīng)用...257 9.4　項(xiàng)目實(shí)戰(zhàn)：任務(wù)20—實(shí)現(xiàn)支付完成頁功能..................　261 9.5　項(xiàng)目實(shí)戰(zhàn)：任務(wù)8—實(shí)現(xiàn)我的訂單功能.....................　262 9.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)21—實(shí)現(xiàn)訂單詳情頁功能..................269 9.7　小結(jié)...............................276 第　10 章 小程序擴(kuò)展應(yīng)用.............　277 10.1　設(shè)備應(yīng)用API ..................277 10.1.1　獲得系統(tǒng)信息....................277 10.1.2　獲取網(wǎng)絡(luò)狀態(tài)....................278 10.1.3　加速度計(jì)..........................279 10.1.4　羅盤................................279 10.1.5　撥打電話..........................280 10.1.6　掃碼................................280 10.1.7　剪貼板.............................　281 10.1.8　藍(lán)牙................................　281 10.1.9　屏幕亮度..........................282 10.1.10　震動(dòng)..............................282 10.1.11　手機(jī)聯(lián)系人......................282 10.2　文件操作API..................283 10.2.1　wx.saveFile 保存文件到本地..................................283 10.2.2　wx.getSavedFileList 獲取本地文件列表....................284 10.2.3　wx.getSavedFileInfo 獲取本地文件信息....................284 10.2.4　wx.removeSavedFile 刪除本地文件..........................285 10.2.5　wx.openDocument 打開文檔...............................　285 10.2.6　wx.getFileInfo 獲取文件信息...............................　286 10.3　窗口API........................286 10.4　微信運(yùn)動(dòng)API ..................286 10.5　項(xiàng)目實(shí)戰(zhàn)：任務(wù)22—實(shí)現(xiàn)圖書分類功能..................287 10.6　項(xiàng)目實(shí)戰(zhàn)：任務(wù)23—實(shí)現(xiàn)圖書分類結(jié)果列表功能.......290 10.7　小結(jié)..............................293