微信小程序開發實戰

肖睿

課工場創始人，北京大學教育學博士，北京大學軟件學院特約講師，北京大學學習科學實驗室特約顧問。
作為北大青鳥Aptech的聯合創始人，歷任學術總監、研究院院長、公司副總裁等核心崗位，
擁有20多年的IT職業教育產品管理和企業管理經驗。
於2015年創辦課工場，兼任總經理，旨在為大學生提供更可靠的IT就業教育及服務。
 

目錄：
第1章初識微信小程序1
任務1.1介紹微信小程序3
1.1.1體驗微信小程序3
1.1.2微信小程序與其他類型應用的區別3
1.1.3微信小程序的發展歷程4
1.1.4微信小程序生態5
1.1.5微信小程序帶來的機會6
任務1.2註冊微信小程序6
任務1.3安裝微信*發者工具9
任務1.4創建第一個微信小程序10
任務1.5詳解微信*發者工具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
本章作業27

第2章深入微信小程序29
任務2.1詳解配置文件31
2.1.1全局配置31
2.1.2頁面配置35
任務2.2介紹微信小程序App和Page 36
2.2.1微信小程序註冊程序函數App() 36
2.2.2頁面註冊函數Page() 37
2.2.3模塊化39
任務2.3構建用戶界面40
2.3.1數據綁定40
2.3.2組件屬性綁定41
2.3.3關鍵字綁定41
2.3.4控制屬性綁定42
2.3.5 JavaScript表達式42
任務2.4項目實戰：祥雲天氣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
本章作業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
本章作業102

第4章常用API 105
任務4.1掌握基礎API的使用107
4.1.1 wx.canIUse 107
4.1.2獲取系統信息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顯示模態框115
任務4.4掌握網絡請求API的使用117
4.4.1 wx.request發起請求117
4.4.2 wx.uploadFile文件上傳119
4.4.3 wx.downloadFile文件下載119
任務4.5掌握數據緩存API的使用120
4.5.1存儲數據121
4.5.2獲取數據121
4.5. 3刪除數據121
4.5.4清空數據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掌握轉發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
本章作業145

第5章綜合案例：豆瓣電影147
任務5.1學習微信小程序云開發149
5.1.1創建雲開發微信小程序149
5.1.2開通雲開發150
5.1.3雲開發控制台150
5.1.4雲數據庫151
5.1.5雲存儲156
5.1.6雲函數157
任務5.2豆瓣電影項目初始化159
5.2.1需求分析161
5.2.2創建項目162
5.2.3創建數據庫162
任務5.3創建引導頁163
5.3.1輪播圖模塊163
5.3.2倒*時模塊163
5.3.3跳轉到首頁164
5.3. 4完整代碼164
任務5.4創建首頁165
5.4.1判斷引導頁顯示狀態165
5.4.2請求首頁數據166
5.4.3首頁頁面佈局167
任務5.5創建電影列表頁169
5.5.1請求電影列表數據169
5.5.2使用模板170
任務5.6創建電影詳情頁171
5.6.1請求電影詳情頁數據171
5.6.2添加加載狀態172
5.6.3設置用戶轉發173
任務5.7創建搜索頁173
任務5.8創建“我的”頁面176
5.8. 1配置標籤導航176
5.8.2實現“我的”頁面177
任務5.9發布上線179
5.9.1上傳代碼179
5.9.2提交審核179
5.9.3訪問微信小程序181
本章作業181

第6章使用WePY開發微信小程序183
任務6.1使用WePY創建項目185
6.1.1 WePY和其他框架的對比185
6.1.2安裝WePY並創建項目185
6.1.3使用微信*發者工具調試微信小程序187
6.1.4開發注意事項187
6.1.5配置編輯器189
任務6.2學習WePY框架的基礎189
6.2.1 .wpy文件說明190
6.2.2微信小程序入口app. wpy 190
6.2.3頁面191
6.2.4組件192
任務6.3學習WePY框架的核心193
6.3.1數據綁定193
6.3.2計算屬性194
6.3.3 props傳值194
6.3.4循環渲染196
6.3.5事件綁定197
任務6.4使用WePY開發小豬基金198
6.4.1項目介紹198
6.4.2需求分析198
6.4.3項目創建198
6.4.4實現首頁頁面佈局199
任務6.5使用wx-charts實現圖表201
6.5.1介紹wx-charts 201
6.5.2獲取wx-charts 202
6.5.3使用wx-charts 202
任務6.6實現小豬基金詳情頁205
6.6.1完成詳情頁頭部佈局205
6.6.2完成詳情頁圖表205
本章作業207

第7章微信小遊戲開發209
任務7.1介紹微信小遊戲211
7.1.1什麼是微信小遊戲211
7.1.2微信小遊戲的發展歷史211
7.1.3微信小遊戲和H5遊戲的對比211
7.1.4第一個微信小遊戲212
7.1.5真機預覽213
任務7.2學習微信小遊戲開發基礎213
7.2.1目錄結構詳解213
7.2.2微信小遊戲配置214
7.2.3創建畫布215
7.2.4繪製文本215
7.2.5繪製圖像216
任務7.3學習微信小遊戲開發核心216
7.3.1創建多個Canvas 216
7.3.2實現動畫217
7.3.3觸摸事件218
7.3.4全局對象219
任務7.4開發微信小遊戲：海底大闖關-1 219
7.4.1項目介紹219
7.4.2開發流程220
7.4.3項目創建221
7.4.4創建databus文件221
7.4.5創建遊戲主類222
7.4.6創建海底背景類222
7.4.7創建海底223
7.4.8添加開始按鈕224
任務7.5開發微信小遊戲：海底大闖關-2 224
7.5.1添加小魚224
7.5 .2在頁面中顯示元素225
7.5.3添加漁網227
7.5.4碰撞檢測229
7.5.5添加分數230
7.5.6結束和重新開始231
7.5.7添加音效232
任務7.6微信小遊戲發布233
7.6.1上傳代碼233
7.6.2提交審核233
本章作業234

第8章使用Cocos Creator開發微信小遊戲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遊戲開發實戰1：項目創建249
8.3.1初始化項目249
8.3.2創建遊戲場景249
8.3.3添加背景250
8.3.4添加地面251
任務8.4遊戲開發實戰2：添加主角251
8.4.1添加主角251
8.4.2編寫主角腳本252
8.4.3跳躍和移動254
8.4.4移動控制255
任務8.5遊戲開發實戰3：添加糖果257
8.5.1製作糖果257
8.5.2添加遊戲控制腳本258
8.5.3隨機生成糖果260
8.5.4主角收集糖果261
任務8.6遊戲開發實戰4：遊戲邏輯實現262
8.6.1添加得分262
8.6.2得分邏輯實現263
8.6.3失敗判定和重新開始264
8.6.4添加音效265
任務8.7發佈到微信小遊戲平台267