第 1章　初識(shí)微信小程序　1 任務(wù)1.1　介紹微信小程序　3 1.1.1　體驗(yàn)微信小程序　3 1.1.2　微信小程序與其他類型應(yīng)用的區(qū)別　3 1.1.3　微信小程序的發(fā)展歷程　4 1.1.4　微信小程序生態(tài)　5 1.1.5　微信小程序帶來的機(jī)會(huì)　6 任務(wù)1.2　注冊(cè)微信小程序　6 任務(wù)1.3　安裝微信開發(fā)者工具　9 任務(wù)1.4　創(chuàng)建第 一個(gè)微信小程序　10 任務(wù)1.5　詳解微信開發(fā)者工具　12 1.5.1　菜單欄　13 1.5.2　工具欄　14 1.5.3　模擬器　18 1.5.4　編輯器　19 1.5.5　調(diào)試器　19 任務(wù)1.6　介紹項(xiàng)目結(jié)構(gòu)　22 1.6.1　project.config.json　23 1.6.2　app.wxss　24 1.6.3　app.json　25 1.6.4　app.js　25 1.6.5　pages　26 1.6.6　utils　26 本章作業(yè)　27 第　2章 深入微信小程序　29 任務(wù)2.1　詳解配置文件　31 2.1.1　全局配置　31 2.1.2　頁面配置　35 任務(wù)2.2　介紹微信小程序App和Page　36 2.2.1　微信小程序注冊(cè)程序函數(shù)App()　36 2.2.2　頁面注冊(cè)函數(shù)Page()　37 2.2.3　模塊化　39 任務(wù)2.3　構(gòu)建用戶界面　40 2.3.1　數(shù)據(jù)綁定　40 2.3.2　組件屬性綁定　41 2.3.3　關(guān)鍵字綁定　41 2.3.4　控制屬性綁定　42 2.3.5　JavaScript表達(dá)式　42 任務(wù)2.4　項(xiàng)目實(shí)戰(zhàn)：祥云天氣　43 任務(wù)2.5　添加列表渲染　47 2.5.1　使用wx:for　47 2.5.2　在block上使用 wx:for　48 2.5.3　wx:key　48 2.5.4　給祥云天氣微信小程序添加列表　49 任務(wù)2.6　添加條件渲染　50 2.6.1　使用wx:if　50 2.6.2　在block上使用wx:if　50 2.6.3　使用hidden　50 2.6.4　使用條件渲染控制圖標(biāo)顯示　51 任務(wù)2.7　添加事件　52 2.7.1　如何綁定事件　52 2.7.2　事件冒泡　52 2.7.3　事件捕獲　53 本章作業(yè)　54 第3章　常用組件　55 任務(wù)3.1　掌握基本組件的使用　57 3.1.1　圖標(biāo)組件icon　57 3.1.2　文本組件text　58 3.1.3　富文本組件rich-text　58 3.1.4　進(jìn)度條組件progress　60 任務(wù)3.2　掌握視圖容器組件的使用　62 3.2.1　視圖容器組件view　62 3.2.2　滾動(dòng)視圖容器組件scroll-view　64 3.2.3　輪播圖組件swiper　65 任務(wù)3.3　掌握導(dǎo)航組件的使用　67 3.3.1　navigate　68 3.3.2　redirect　69 3.3.3　switchTab　70 3.3.4　navigateBack　71 任務(wù)3.4　掌握媒體組件的使用　71 3.4.1　圖片組件image　72 3.4.2　視頻組件video　74 3.4.3　音頻組件audio　77 任務(wù)3.5　掌握地圖組件的使用　79 任務(wù)3.6　掌握表單組件的使用　81 3.6.1　button組件　81 3.6.2　checkbox組件　84 3.6.3　input組件　85 3.6.4　label組件　87 3.6.5　picker組件　87 3.6.6　picker-view組件　90 3.6.7　radio組件　91 3.6.8　slider組件　92 3.6.9　switch組件　93 3.6.10　textarea組件　95 3.6.11　form組件　96 任務(wù)3.7　使用WeUI構(gòu)建界面　99 3.7.1　引入WeUI　99 3.7.2　WeUI:cell　100 3.7.3　WeUI:flex布局　101 本章作業(yè)　102 第4章　常用API　105 任務(wù)4.1　掌握基礎(chǔ)API的使用　107 4.1.1　wx.canIUse　107 4.1.2　獲取系統(tǒng)信息　107 任務(wù)4.2　掌握賬號(hào)相關(guān)API的使用　109 4.2.1　微信小程序登錄　109 4.2.2　獲取用戶信息　111 任務(wù)4.3　掌握交互API的使用　112 4.3.1　ActionSheet　112 4.3.2　loading提示框　113 4.3.3　Toast消息提示框　114 4.3.4　顯示模態(tài)框　115 任務(wù)4.4　掌握網(wǎng)絡(luò)請(qǐng)求API的使用　117 4.4.1　wx.request發(fā)起請(qǐng)求　117 4.4.2　wx.uploadFile文件上傳　119 4.4.3　wx.downloadFile文件下載　119 任務(wù)4.5　掌握數(shù)據(jù)緩存API的使用　120 4.5.1　存儲(chǔ)數(shù)據(jù)　121 4.5.2　獲取數(shù)據(jù)　121 4.5.3　刪除數(shù)據(jù)　121 4.5.4　清空數(shù)據(jù)　122 4.5.5　獲取storage相關(guān)信息　122 任務(wù)4.6　掌握?qǐng)D片API的使用　122 4.6.1　wx.chooseImage選擇圖片　122 4.6.2　wx.previewImage 預(yù)覽圖片　124 4.6.3　wx.getImageInfo獲取圖片信息　125 4.6.4　wx.saveImageToPhotosAlbum保存圖片到相冊(cè)　126 任務(wù)4.7　掌握位置接口API的使用　127 4.7.1　wx.getLocation獲取當(dāng)前位置　127 4.7.2　wx.openLocation查看位置　128 4.7.3　wx.chooseLocation選擇位置　130 任務(wù)4.8　掌握轉(zhuǎn)發(fā)API的使用　132 4.8.1　onShareAppMessage事件　132 4.8.2　wx.showShareMenu　133 4.8.3　wx.getShareInfo　133 任務(wù)4.9　掌握文件API的使用　134 4.9.1　wx.saveFile　134 4.9.2　wx.getSavedFileInfo　135 4.9.3　wx.getSavedFileList　136 4.9.4　wx.removeSavedFile　136 4.9.5　wx.getFileInfo　137 任務(wù)4.10　掌握設(shè)備API的使用　137 4.10.1　撥打電話　137 4.10.2　掃一掃　138 4.10.3　搖一搖換圖　139 4.10.4　我的KEEP運(yùn)動(dòng)　140 本章作業(yè)　145 第5章　綜合案例：豆瓣電影　147 任務(wù)5.1　學(xué)習(xí)微信小程序云開發(fā)　149 5.1.1　創(chuàng)建云開發(fā)微信小程序　149 5.1.2　開通云開發(fā)　150 5.1.3　云開發(fā)控制臺(tái)　150 5.1.4　云數(shù)據(jù)庫　151 5.1.5　云存儲(chǔ)　156 5.1.6　云函數(shù)　157 任務(wù)5.2　豆瓣電影項(xiàng)目初始化　159 5.2.1　需求分析　161 5.2.2　創(chuàng)建項(xiàng)目　162 5.2.3　創(chuàng)建數(shù)據(jù)庫　162 任務(wù)5.3　創(chuàng)建引導(dǎo)頁　163 5.3.1　輪播圖模塊　163 5.3.2　倒計(jì)時(shí)模塊　163 5.3.3　跳轉(zhuǎn)到首頁　164 5.3.4　完整代碼　164 任務(wù)5.4　創(chuàng)建首頁　165 5.4.1　判斷引導(dǎo)頁顯示狀態(tài)　165 5.4.2　請(qǐng)求首頁數(shù)據(jù)　166 5.4.3　首頁頁面布局　167 任務(wù)5.5　創(chuàng)建電影列表頁　169 5.5.1　請(qǐng)求電影列表數(shù)據(jù)　169 5.5.2　使用模板　170 任務(wù)5.6　創(chuàng)建電影詳情頁　171 5.6.1　請(qǐng)求電影詳情頁數(shù)據(jù)　171 5.6.2　添加加載狀態(tài)　172 5.6.3　設(shè)置用戶轉(zhuǎn)發(fā)　173 任務(wù)5.7　創(chuàng)建搜索頁　173 任務(wù)5.8　創(chuàng)建“我的”頁面　176 5.8.1　配置標(biāo)簽導(dǎo)航　176 5.8.2　實(shí)現(xiàn)“我的”頁面　177 任務(wù)5.9　發(fā)布上線　179 5.9.1　上傳代碼　179 5.9.2　提交審核　179 5.9.3　訪問微信小程序　181 本章作業(yè)　181 第6章　使用WePY開發(fā)微信小程序　183 任務(wù)6.1　使用WePY創(chuàng)建項(xiàng)目　185 6.1.1　WePY和其他框架的對(duì)比　185 6.1.2　安裝WePY并創(chuàng)建項(xiàng)目　185 6.1.3　使用微信開發(fā)者工具調(diào)試微信小程序　187 6.1.4　開發(fā)注意事項(xiàng)　187 6.1.5　配置編輯器　189 任務(wù)6.2　學(xué)習(xí)WePY框架的基礎(chǔ)　189 6.2.1　.wpy文件說明　190 6.2.2　微信小程序入口app.wpy　190 6.2.3　頁面　191 6.2.4　組件　192 任務(wù)6.3　學(xué)習(xí)WePY框架的核心　193 6.3.1　數(shù)據(jù)綁定　193 6.3.2　計(jì)算屬性　194 6.3.3　props傳值　194 6.3.4　循環(huán)渲染　196 6.3.5　事件綁定　197 任務(wù)6.4　使用WePY開發(fā)小豬基金　198 6.4.1　項(xiàng)目介紹　198 6.4.2　需求分析　198 6.4.3　項(xiàng)目創(chuàng)建　198 6.4.4　實(shí)現(xiàn)首頁頁面布局　199 任務(wù)6.5　使用wx-charts實(shí)現(xiàn)圖表　201 6.5.1　介紹wx-charts　201 6.5.2　獲取wx-charts　202 6.5.3　使用wx-charts　202 任務(wù)6.6　實(shí)現(xiàn)小豬基金詳情頁　205 6.6.1　完成詳情頁頭部布局　205 6.6.2　完成詳情頁圖表　205 本章作業(yè)　207 第7章　微信小游戲開發(fā)　209 任務(wù)7.1　介紹微信小游戲　211 7.1.1　什么是微信小游戲　211 7.1.2　微信小游戲的發(fā)展歷史　211 7.1.3　微信小游戲和H5游戲的對(duì)比　211 7.1.4　第 一個(gè)微信小游戲　212 7.1.5　真機(jī)預(yù)覽　213 任務(wù)7.2　學(xué)習(xí)微信小游戲開發(fā)基礎(chǔ)　213 7.2.1　目錄結(jié)構(gòu)詳解　213 7.2.2　微信小游戲配置　214 7.2.3　創(chuàng)建畫布　215 7.2.4　繪制文本　215 7.2.5　繪制圖像　216 任務(wù)7.3　學(xué)習(xí)微信小游戲開發(fā)核心　216 7.3.1　創(chuàng)建多個(gè)Canvas　216 7.3.2　實(shí)現(xiàn)動(dòng)畫　217 7.3.3　觸摸事件　218 7.3.4　全局對(duì)象　219 任務(wù)7.4　開發(fā)微信小游戲：海底大闖關(guān)-1　219 7.4.1　項(xiàng)目介紹　219 7.4.2　開發(fā)流程　220 7.4.3　項(xiàng)目創(chuàng)建　221 7.4.4　創(chuàng)建databus文件　221 7.4.5　創(chuàng)建游戲主類　222 7.4.6　創(chuàng)建海底背景類　222 7.4.7　創(chuàng)建海底　223 7.4.8　添加開始按鈕　224 任務(wù)7.5　開發(fā)微信小游戲：海底大闖關(guān)-2　224 7.5.1　添加小魚　224 7.5.2　在頁面中顯示元素　225 7.5.3　添加漁網(wǎng)　227 7.5.4　碰撞檢測(cè)　229 7.5.5　添加分?jǐn)?shù)　230 7.5.6　結(jié)束和重新開始　231 7.5.7　添加音效　232 任務(wù)7.6　微信小游戲發(fā)布　233 7.6.1　上傳代碼　233 7.6.2　提交審核　233 本章作業(yè)　234 第8章　使用Cocos Creator開發(fā)微信小游戲　235 任務(wù)8.1　介紹Cocos Creator　237 8.1.1　安裝　237 8.1.2　使用Dashboard　238 8.1.3　第 一個(gè)項(xiàng)目　239 8.1.4　場(chǎng)景預(yù)覽　240 8.1.5　項(xiàng)目結(jié)構(gòu)　241 任務(wù)8.2　學(xué)習(xí)編輯器基礎(chǔ)　242 8.2.1　資源管理器　242 8.2.2　層級(jí)管理器　243 8.2.3　場(chǎng)景編輯器　244 8.2.4　屬性檢查器　246 8.2.5　控件庫　248 8.2.6　動(dòng)畫編輯器　248 任務(wù)8.3　游戲開發(fā)實(shí)戰(zhàn)1：項(xiàng)目創(chuàng)建　249 8.3.1　初始化項(xiàng)目　249 8.3.2　創(chuàng)建游戲場(chǎng)景　249 8.3.3　添加背景　250 8.3.4　添加地面　251 任務(wù)8.4　游戲開發(fā)實(shí)戰(zhàn)2：添加主角　251 8.4.1　添加主角　251 8.4.2　編寫主角腳本　252 8.4.3　跳躍和移動(dòng)　254 8.4.4　移動(dòng)控制　255 任務(wù)8.5　游戲開發(fā)實(shí)戰(zhàn)3：添加糖果　257 8.5.1　制作糖果　257 8.5.2　添加游戲控制腳本　258 8.5.3　隨機(jī)生成糖果　260 8.5.4　主角收集糖果　261 任務(wù)8.6　游戲開發(fā)實(shí)戰(zhàn)4：游戲邏輯實(shí)現(xiàn)　262 8.6.1　添加得分　262 8.6.2　得分邏輯實(shí)現(xiàn)　263 8.6.3　失敗判定和重新開始　264 8.6.4　添加音效　265 任務(wù)8.7　發(fā)布到微信小游戲平臺(tái)　267