微信小程序以一種極度輕量化、無處不在、用完即走的方式全面連接到了用戶與服務(wù),在給用戶帶來更好體驗(yàn)的同時(shí),大幅降低了自身開發(fā)的門檻和成本。本書不局限于原生微信小程序開發(fā),還涉及微信生態(tài)技術(shù)圈中的WePY框架應(yīng)用、微信小游戲開發(fā)、使用Cocos Creator開發(fā)小游戲等內(nèi)容,是讀者從微信小程序入門到實(shí)戰(zhàn)開發(fā)的極佳讀物。
本書實(shí)用性強(qiáng)、示例豐富、側(cè)重實(shí)戰(zhàn)、與新技術(shù)結(jié)合緊密,可作為剛接觸或即將接觸微信小程序的開發(fā)者的指導(dǎo)用書,也適合有微信小程序開發(fā)經(jīng)驗(yàn),但還需進(jìn)一步提升自我能力的開發(fā)者使用。
(1)廣泛涉及微信生態(tài)圈技術(shù)
①以原生的微信小程序技術(shù)為根基;
②使用 WePY 框架幫讀者快速開發(fā)小程序;
③學(xué)習(xí)并使用原生微信小游戲技術(shù)開發(fā)微信小游戲;
④使用 Cocos Creator 快速開發(fā)微信小游戲。
?(2)豐富多樣的教學(xué)資料
①配套素材及示例代碼;
②每章課后作業(yè)及答案;
③重難點(diǎn)內(nèi)容視頻講解。
?(3)隨時(shí)可測學(xué)習(xí)成果
①每章提供“本章技能目標(biāo)”及“本章知識梳理”,助力讀者確定學(xué)習(xí)要點(diǎn);
②課后作業(yè)輔助讀者鞏固階段性學(xué)習(xí)內(nèi)容;
③課工場題庫助力在線測試。
肖睿,課工場創(chuàng)始人,北京大學(xué)教育學(xué)博士,北京大學(xué)軟件學(xué)院特約講師,北京大學(xué)學(xué)習(xí)科學(xué)實(shí)驗(yàn)室特約顧問。作為北大青鳥 Aptech 的聯(lián)合創(chuàng)始人,歷任學(xué)術(shù)總監(jiān)、研究院院長、公司副總裁等核心崗位,擁有20多年的IT職業(yè)教育產(chǎn)品管理和企業(yè)管理經(jīng)驗(yàn)。于2015年創(chuàng)辦課工場,兼任總經(jīng)理,旨在為大學(xué)生提供更可靠的 IT 就業(yè)教育及服務(wù)。
第 1章 初識微信小程序 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 注冊微信小程序 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 微信小程序注冊程序函數(shù)App() 36
2.2.2 頁面注冊函數(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 掌握賬號相關(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ò)請求API的使用 117
4.4.1 wx.request發(fā)起請求 117
4.4.2 wx.uploadFile文件上傳 119
4.4.3 wx.downloadFile文件下載 119
任務(wù)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相關(guān)信息 122
任務(wù)4.6 掌握圖片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保存圖片到相冊 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ā)控制臺 150
5.1.4 云數(shù)據(jù)庫 151
5.1.5 云存儲 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 請求首頁數(shù)據(jù) 166
5.4.3 首頁頁面布局 167
任務(wù)5.5 創(chuàng)建電影列表頁 169
5.5.1 請求電影列表數(shù)據(jù) 169
5.5.2 使用模板 170
任務(wù)5.6 創(chuàng)建電影詳情頁 171
5.6.1 請求電影詳情頁數(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和其他框架的對比 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游戲的對比 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 全局對象 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 碰撞檢測 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 場景預(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 層級管理器 243
8.2.3 場景編輯器 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)建游戲場景 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ā)布到微信小游戲平臺 267