本書是針對Web前端開發(fā)人員編寫的一本快速掌握微信小程序開發(fā)的教程。本書通過通俗易懂的語言、豐富實用的案例,講解微信小程序的開發(fā)技術(shù)。
本書共8章,第1章講解微信小程序的入門知識,介紹微信小程序的特點和發(fā)展前景;第2章和第3章分別講解微信小程序的頁面制作和頁面交互;第4章和第5章講解微信小程序的常用API;第6章講解綜合項目“點餐”微信小程序;第7章講解微信小程序開發(fā)進階;第8章講解基于uni-app開發(fā)的“短視頻”微信小程序。
本書適合作為高等教育本、?圃盒S嬎銠C相關(guān)專業(yè)的教材,也可作為廣大計算機編程愛好者的參考書。
1.本書已入選江蘇省“十四五”規(guī)劃教材;
2.本書配套豐富的教學資源,包括教學PPT、教學大綱、教學設(shè)計、教學視頻、練習題庫、課后習題及答案;
3.本書在第1版的基礎(chǔ)上,對技術(shù)內(nèi)容做了調(diào)整,移除了mpvue和WePY框架,增加了新的Vant Weapp組件庫和uni-app框架,同時增加了一個綜合案例,更加突出對讀者動手能力的培養(yǎng)。
黑馬程序員,傳智教育旗下高端IT教育品牌,由中國Java培訓先行者人張孝祥老師發(fā)起,聯(lián)合全球最大的中文IT社區(qū)CSDN、中關(guān)村軟件園共同創(chuàng)辦的一家專業(yè)教育機構(gòu)。辦學至今,我們一直堅守著“為千萬人少走彎路而著書,為中華軟件之崛起而講課”的辦學理念,堅持培養(yǎng)優(yōu)秀軟件應用工程師的宏偉目標,在累計培養(yǎng)的十萬余名學員中,其中90%的學員均已在北、上、廣等一線城市高薪就業(yè)。為了迎合軟件市場的需求,我們陸續(xù)開設(shè)了Java、網(wǎng)頁平面、PHP、.Net、iOS、C/C++、Android等9個專業(yè)方向的課程,并且未來將逐漸開設(shè)其他專業(yè)方向的課程。隨著傳智播客的日益壯大,除了北京總部,我們在上海、廣州、武漢、成都、深圳等地也創(chuàng)立了直營分支機構(gòu),傳智播客儼然已成為了國內(nèi)具有專業(yè)口碑的IT教育機構(gòu)。
第 1章 微信小程序入門 1
1.1 初識微信小程序 1
1.1.1 什么是微信小程序 2
1.1.2 微信小程序的特點 2
1.1.3 微信小程序的發(fā)展前景 3
1.1.4 微信小程序的宿主環(huán)境 4
1.2 微信小程序開發(fā)前準備 5
1.2.1 注冊微信小程序開發(fā)賬號 5
1.2.2 獲取微信小程序AppID 8
1.2.3 安裝微信開發(fā)者工具 9
1.2.4 創(chuàng)建微信小程序項目 10
1.3 微信小程序開發(fā)基礎(chǔ) 12
1.3.1 微信小程序的項目結(jié)構(gòu) 12
1.3.2 微信小程序的頁面組成 12
1.3.3 微信小程序的通信模型 13
1.4 微信開發(fā)者工具的使用 13
1.4.1 認識微信開發(fā)者工具 13
1.4.2 微信小程序的項目設(shè)置 17
1.4.3 微信小程序開發(fā)常用快捷鍵 18
1.5 微信小程序的項目成員 20
1.5.1 項目成員的組織結(jié)構(gòu) 20
1.5.2 項目成員的分工 21
1.5.3 項目成員和體驗成員的管理 21
1.5.4 項目成員的權(quán)限 22
1.5.5 添加項目成員和體驗成員 23
1.6 微信小程序的發(fā)布上線 24
1.6.1 微信小程序的版本 24
1.6.2 微信小程序的上線流程 25
本章小結(jié) 27
課后練習 27
第 2章 微信小程序頁面制作 29
【案例2-1】個人信息 29
案例分析 30
知識儲備 30
1. WXML簡介 30
2. WXSS簡介 31
3. 常用組件 31
4. 頁面路徑配置 31
5. view組件 32
6. image組件 33
7. rpx單位 35
8. 樣式導入 35
案例實現(xiàn) 36
【案例2-2】本地生活 37
案例分析 37
知識儲備 38
1. swiper和swiper-item組件 38
2. text組件 39
3. Flex布局 40
案例實現(xiàn) 42
【案例2-3】婚禮邀請函 45
案例分析 45
知識儲備 47
1. 導航欄配置 47
2. 標簽欄配置 47
3. vw、vh單位 49
4. video組件 49
5. 表單組件 50
案例實現(xiàn) 54
本章小結(jié) 64
課后練習 64
第3章 微信小程序頁面交互 65
【案例3-1】比較數(shù)字大小 66
案例分析 66
知識儲備 66
1. Page( )函數(shù) 66
2. 數(shù)據(jù)綁定 68
3. 事件綁定 69
4. 事件對象 70
5. this關(guān)鍵字 71
6. setData( )方法 71
7. 條件渲染 72
8. 標簽 72
9. hidden屬性 73
案例實現(xiàn) 73
【案例3-2】計算器 75
案例分析 75
知識儲備 76
1. data-*自定義屬性 76
2. 模塊 77
案例實現(xiàn) 77
【案例3-3】美食列表 85
案例分析 85
知識儲備 86
1. 列表渲染 86
2. 網(wǎng)絡請求 87
3. 提示框 88
4. WXS 89
5. 上拉觸底 91
6. 下拉刷新 91
案例實現(xiàn) 92
【案例3-4】調(diào)查問卷 97
案例分析 98
知識儲備 98
雙向數(shù)據(jù)綁定 98
案例實現(xiàn) 98
本章小結(jié) 102
課后練習 102
第4章 微信小程序常用API(上) 104
【案例4-1】音樂播放器 104
案例分析 104
知識儲備 106
1. scroll-view組件 106
2. slider組件 107
3. 標簽 108
4. 背景音頻API 109
案例實現(xiàn) 110
【案例4-2】錄音機 121
案例分析 121
知識儲備 122
1. 錄音API 122
2. 音頻API 123
案例實現(xiàn) 124
【案例4-3】頭像上傳下載 127
案例分析 128
知識儲備 128
1. 選擇媒體API 128
2. 圖片預覽API 129
3. 文件上傳API 130
4. 文件下載API 131
案例實現(xiàn) 131
【案例4-4】模擬時鐘 134
案例分析 134
知識儲備 134
1. canvas組件 134
2. 畫布API 135
案例實現(xiàn) 137
本章小結(jié) 142
課后練習 143
第5章 微信小程序常用API(下) 144
【案例5-1】羅盤動畫 144
案例分析 144
知識儲備 145
動畫API 145
案例實現(xiàn) 147
【案例5-2】用戶登錄 151
案例分析 151
知識儲備 151
1. 登錄流程時序 151
2. 登錄API 153
3. 數(shù)據(jù)緩存API 154
4. 頭像昵稱填寫 155
5. App( )函數(shù) 157
案例實現(xiàn) 158
【案例5-3】查看附近美食餐廳 162
案例分析 163
知識儲備 163
1. 騰訊地圖SDK 163
2. map組件 168
3. 地圖API 169
4. 位置API 170
5. 路由API 170
案例實現(xiàn) 172
【案例5-4】在線聊天 176
案例分析 176
知識儲備 177
1. WebSocket API 177
2. SocketTask 178
案例實現(xiàn) 179
本章小結(jié) 184
課后練習 184
第6章 綜合項目——“點餐”微信小程序 186
【任務6-1】項目開發(fā)準備 186
開發(fā)背景 186
項目模塊劃分 187
項目初始化 187
【任務6-2】封裝網(wǎng)絡請求 189
任務分析 189
任務實現(xiàn) 189
【任務6-3】用戶登錄 192
任務分析 192
任務實現(xiàn) 193
【任務6-4】商家首頁 196
任務分析 196
任務實現(xiàn) 196
【任務6-5】菜單列表頁 201
任務分析 201
任務實現(xiàn) 202
【任務6-6】購物車 209
任務分析 209
任務實現(xiàn) 210
【任務6-7】訂單確認頁 220
任務分析 220
任務實現(xiàn) 220
【任務6-8】訂單詳情頁 227
任務分析 227
任務實現(xiàn) 228
【任務6-9】訂單列表頁 231
任務分析 231
任務實現(xiàn) 232
【任務6-10】消費記錄頁 238
任務分析 238
任務實現(xiàn) 238
本章小結(jié) 241
課后練習 241
第7章 微信小程序開發(fā)進階 243
【案例7-1】自定義標簽欄 243
案例分析 244
知識儲備 245
1. 創(chuàng)建自定義組件 245
2. 使用自定義組件 246
3. 使用自定義組件渲染標簽欄 247
4. Vant Weapp組件庫 248
案例實現(xiàn) 249
【案例7-2】電影列表 253
案例分析 253
知識儲備 254
1. WeUI組件庫 254
2. navigator組件 256
案例實現(xiàn) 257
【案例7-3】待辦事項 262
案例分析 262
知識儲備 263
1. uni-app框架概述 263
2. HBuilder X開發(fā)工具 264
3. 創(chuàng)建uni-app項目 265
4. uni-app項目的目錄結(jié)構(gòu) 266
5. 將uni-app項目運行至微信小程序 266
6. uni-app項目的全局配置文件 267
案例實現(xiàn) 268
本章小結(jié) 272
課后練習 272
第8章 uni-app項目——“短視頻”微信小程序 274
【任務8-1】項目開發(fā)準備 274
項目展示 274
項目初始化 276
【任務8-2】公共頭部區(qū)域 277
任務分析 277
任務實現(xiàn) 277
【任務8-3】導航欄區(qū)域 279
任務分析 279
任務實現(xiàn) 279
【任務8-4】輪播圖區(qū)域 281
任務分析 281
任務實現(xiàn) 281
【任務8-5】視頻列表區(qū)域 283
任務分析 283
任務實現(xiàn) 283
【任務8-6】視頻詳情頁 285
任務分析 285
任務實現(xiàn) 286
本章小結(jié) 292
課后練習 292