微信小程序開發(fā)實戰(zhàn)

第 1章　初識微信小程序　1
任務1．1　介紹微信小程序　3
1．1．1　體驗微信小程序　3
1．1．2　微信小程序與其他類型應用的區(qū)別　3
1．1．3　微信小程序的發(fā)展歷程　4
1．1．4　微信小程序生態(tài)　5
1．1．5　微信小程序帶來的機會　6
任務1．2　注冊微信小程序　6
任務1．3　安裝微信開發(fā)者工具　9
任務1．4　創(chuàng)建第 一個微信小程序　10
任務1．5　詳解微信開發(fā)者工具　12
1．5．1　菜單欄　13
1．5．2　工具欄　14
1．5．3　模擬器　18
1．5．4　編輯器　19
1．5．5　調試器　19
任務1．6　介紹項目結構　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
任務2．1　詳解配置文件　31
2．1．1　全局配置　31
2．1．2　頁面配置　35
任務2．2　介紹微信小程序App和Page　36
2．2．1　微信小程序注冊程序函數(shù)App()　36
2．2．2　頁面注冊函數(shù)Page()　37
2．2．3　模塊化　39
任務2．3　構建用戶界面　40
2．3．1　數(shù)據(jù)綁定　40
2．3．2　組件屬性綁定　41
2．3．3　關鍵字綁定　41
2．3．4　控制屬性綁定　42
2．3．5　JavaScript表達式　42
任務2．4　項目實戰(zhàn)：祥云天氣　43
任務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
任務2．6　添加條件渲染　50
2．6．1　使用wx：if　50
2．6．2　在block上使用wx：if　50
2．6．3　使用hidden　50
2．6．4　使用條件渲染控制圖標顯示　51
任務2．7　添加事件　52
2．7．1　如何綁定事件　52
2．7．2　事件冒泡　52
2．7．3　事件捕獲　53
本章作業(yè)　54
第3章　常用組件　55
任務3．1　掌握基本組件的使用　57
3．1．1　圖標組件icon　57
3．1．2　文本組件text　58
3．1．3　富文本組件rich-text　58
3．1．4　進度條組件progress　60
任務3．2　掌握視圖容器組件的使用　62
3．2．1　視圖容器組件view　62
3．2．2　滾動視圖容器組件scroll-view　64
3．2．3　輪播圖組件swiper　65
任務3．3　掌握導航組件的使用　67
3．3．1　navigate　68
3．3．2　redirect　69
3．3．3　switchTab　70
3．3．4　navigateBack　71
任務3．4　掌握媒體組件的使用　71
3．4．1　圖片組件image　72
3．4．2　視頻組件video　74
3．4．3　音頻組件audio　77
任務3．5　掌握地圖組件的使用　79
任務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
任務3．7　使用WeUI構建界面　99
3．7．1　引入WeUI　99
3．7．2　WeUI：cell　100
3．7．3　WeUI：flex布局　101
本章作業(yè)　102
第4章　常用API　105
任務4．1　掌握基礎API的使用　107
4．1．1　wx．canIUse　107
4．1．2　獲取系統(tǒng)信息　107
任務4．2　掌握賬號相關API的使用　109
4．2．1　微信小程序登錄　109
4．2．2　獲取用戶信息　111
任務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
任務4．4　掌握網(wǎng)絡請求API的使用　117
4．4．1　wx．request發(fā)起請求　117
4．4．2　wx．uploadFile文件上傳　119
4．4．3　wx．downloadFile文件下載　119
任務4．5　掌握數(shù)據(jù)緩存API的使用　120
4．5．1　存儲數(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相關信息　122
任務4．6　掌握圖片API的使用　122
4．6．1　wx．chooseImage選擇圖片　122
4．6．2　wx．previewImage 預覽圖片　124
4．6．3　wx．getImageInfo獲取圖片信息　125
4．6．4　wx．saveImageToPhotosAlbum保存圖片到相冊　126
任務4．7　掌握位置接口API的使用　127
4．7．1　wx．getLocation獲取當前位置　127
4．7．2　wx．openLocation查看位置　128
4．7．3　wx．chooseLocation選擇位置　130
任務4．8　掌握轉發(fā)API的使用　132
4．8．1　onShareAppMessage事件　132
4．8．2　wx．showShareMenu　133
4．8．3　wx．getShareInfo　133
任務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
任務4．10　掌握設備API的使用　137
4．10．1　撥打電話　137
4．10．2　掃一掃　138
4．10．3　搖一搖換圖　139
4．10．4　我的KEEP運動　140
本章作業(yè)　145
第5章　綜合案例：豆瓣電影　147
任務5．1　學習微信小程序云開發(fā)　149
5．1．1　創(chuàng)建云開發(fā)微信小程序　149
5．1．2　開通云開發(fā)　150
5．1．3　云開發(fā)控制臺　150
5．1．4　云數(shù)據(jù)庫　151
5．1．5　云存儲　156
5．1．6　云函數(shù)　157
任務5．2　豆瓣電影項目初始化　159
5．2．1　需求分析　161
5．2．2　創(chuàng)建項目　162
5．2．3　創(chuàng)建數(shù)據(jù)庫　162
任務5．3　創(chuàng)建引導頁　163
5．3．1　輪播圖模塊　163
5．3．2　倒計時模塊　163
5．3．3　跳轉到首頁　164
5．3．4　完整代碼　164
任務5．4　創(chuàng)建首頁　165
5．4．1　判斷引導頁顯示狀態(tài)　165
5．4．2　請求首頁數(shù)據(jù)　166
5．4．3　首頁頁面布局　167
任務5．5　創(chuàng)建電影列表頁　169
5．5．1　請求電影列表數(shù)據(jù)　169
5．5．2　使用模板　170
任務5．6　創(chuàng)建電影詳情頁　171
5．6．1　請求電影詳情頁數(shù)據(jù)　171
5．6．2　添加加載狀態(tài)　172
5．6．3　設置用戶轉發(fā)　173
任務5．7　創(chuàng)建搜索頁　173
任務5．8　創(chuàng)建“我的”頁面　176
5．8．1　配置標簽導航　176
5．8．2　實現(xiàn)“我的”頁面　177
任務5．9　發(fā)布上線　179
5．9．1　上傳代碼　179
5．9．2　提交審核　179
5．9．3　訪問微信小程序　181
本章作業(yè)　181
第6章　使用WePY開發(fā)微信小程序　183
任務6．1　使用WePY創(chuàng)建項目　185
6．1．1　WePY和其他框架的對比　185
6．1．2　安裝WePY并創(chuàng)建項目　185
6．1．3　使用微信開發(fā)者工具調試微信小程序　187
6．1．4　開發(fā)注意事項　187
6．1．5　配置編輯器　189
任務6．2　學習WePY框架的基礎　189
6．2．1?。畐py文件說明　190
6．2．2　微信小程序入口app．wpy　190
6．2．3　頁面　191
6．2．4　組件　192
任務6．3　學習WePY框架的核心　193
6．3．1　數(shù)據(jù)綁定　193
6．3．2　計算屬性　194
6．3．3　props傳值　194
6．3．4　循環(huán)渲染　196
6．3．5　事件綁定　197
任務6．4　使用WePY開發(fā)小豬基金　198
6．4．1　項目介紹　198
6．4．2　需求分析　198
6．4．3　項目創(chuàng)建　198
6．4．4　實現(xiàn)首頁頁面布局　199
任務6．5　使用wx-charts實現(xiàn)圖表　201
6．5．1　介紹wx-charts　201
6．5．2　獲取wx-charts　202
6．5．3　使用wx-charts　202
任務6．6　實現(xiàn)小豬基金詳情頁　205
6．6．1　完成詳情頁頭部布局　205
6．6．2　完成詳情頁圖表　205
本章作業(yè)　207
第7章　微信小游戲開發(fā)　209
任務7．1　介紹微信小游戲　211
7．1．1　什么是微信小游戲　211
7．1．2　微信小游戲的發(fā)展歷史　211
7．1．3　微信小游戲和H5游戲的對比　211
7．1．4　第 一個微信小游戲　212
7．1．5　真機預覽　213
任務7．2　學習微信小游戲開發(fā)基礎　213
7．2．1　目錄結構詳解　213
7．2．2　微信小游戲配置　214
7．2．3　創(chuàng)建畫布　215
7．2．4　繪制文本　215
7．2．5　繪制圖像　216
任務7．3　學習微信小游戲開發(fā)核心　216
7．3．1　創(chuàng)建多個Canvas　216
7．3．2　實現(xiàn)動畫　217
7．3．3　觸摸事件　218
7．3．4　全局對象　219
任務7．4　開發(fā)微信小游戲：海底大闖關-1　219
7．4．1　項目介紹　219
7．4．2　開發(fā)流程　220
7．4．3　項目創(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
任務7．5　開發(fā)微信小游戲：海底大闖關-2　224
7．5．1　添加小魚　224
7．5．2　在頁面中顯示元素　225
7．5．3　添加漁網(wǎng)　227
7．5．4　碰撞檢測　229
7．5．5　添加分數(shù)　230
7．5．6　結束和重新開始　231
7．5．7　添加音效　232
任務7．6　微信小游戲發(fā)布　233
7．6．1　上傳代碼　233
7．6．2　提交審核　233
本章作業(yè)　234
第8章　使用Cocos Creator開發(fā)微信小游戲　235
任務8．1　介紹Cocos Creator　237
8．1．1　安裝　237
8．1．2　使用Dashboard　238
8．1．3　第 一個項目　239
8．1．4　場景預覽　240
8．1．5　項目結構　241
任務8．2　學習編輯器基礎　242
8．2．1　資源管理器　242
8．2．2　層級管理器　243
8．2．3　場景編輯器　244
8．2．4　屬性檢查器　246
8．2．5　控件庫　248
8．2．6　動畫編輯器　248
任務8．3　游戲開發(fā)實戰(zhàn)1：項目創(chuàng)建　249
8．3．1　初始化項目　249
8．3．2　創(chuàng)建游戲場景　249
8．3．3　添加背景　250
8．3．4　添加地面　251
任務8．4　游戲開發(fā)實戰(zhàn)2：添加主角　251
8．4．1　添加主角　251
8．4．2　編寫主角腳本　252
8．4．3　跳躍和移動　254
8．4．4　移動控制　255
任務8．5　游戲開發(fā)實戰(zhàn)3：添加糖果　257
8．5．1　制作糖果　257
8．5．2　添加游戲控制腳本　258
8．5．3　隨機生成糖果　260
8．5．4　主角收集糖果　261
任務8．6　游戲開發(fā)實戰(zhàn)4：游戲邏輯實現(xiàn)　262
8．6．1　添加得分　262
8．6．2　得分邏輯實現(xiàn)　263
8．6．3　失敗判定和重新開始　264
8．6．4　添加音效　265
任務8．7　發(fā)布到微信小游戲平臺　267