本書是針對Web前端開發(fā)人員編寫的一本快速掌握微信小程序開發(fā)的教程。本書通過通俗易懂的語言、豐富實用的案例,講解微信小程序的原理和開發(fā)技術(shù)。
全書共8章,第1、2章主要講解微信小程序的入門知識,介紹微信小程序的優(yōu)勢和發(fā)展前景,通過簡單易懂的“比較數(shù)字大小”案例幫助讀者快速熟悉開發(fā)流程;第3、4章分別講解“音樂”和“婚禮邀請函”小程序項目,通過這兩章的學(xué)習(xí),讀者可以掌握小程序的布局和各種組件的使用;第5、6章講解微信小程序的各種API,通過8個典型的案例對這些API的使用進(jìn)行演示;第7章講解微信小程序開發(fā)框架,涵蓋了微信小程序模塊開發(fā)、第三方框架(mpvue、WePY)和UI庫(WeUI);第8章講解一個綜合項目—點餐系統(tǒng),詳細(xì)講解項目從需求分析到代碼實現(xiàn)的全過程。
本書適合作為高等院校本、專科計算機(jī)相關(guān)專業(yè)的教材,也可作為廣大計算機(jī)編程愛好者的參考書。
本書采用案例驅(qū)動式編寫。微信小程序開發(fā)本身并不難,微信官方也提供了大量的文檔資料,相比國外的技術(shù)和框架學(xué)習(xí)門檻要低很多。但是對于初學(xué)者來說,僅僅閱讀官方文檔自學(xué)是不夠的,因為實際的需求往往十分復(fù)雜,關(guān)鍵是如何找到合適的思路和解決方案,這就需要積累大量的案例實踐經(jīng)驗,才能高效完成開發(fā)工作。本書選取了開發(fā)中常用的一些功能作為教學(xué)案例,希望通過這些案例幫助初學(xué)者快速入門,一方面提高了學(xué)習(xí)興趣;另一方面學(xué)到了實用的技術(shù)?紤]到企業(yè)的用人需求,本書也加入了小程序常用框架知識的講解,以及一個綜合實戰(zhàn)項目,幫助讀者開闊視野,了解實際開發(fā)中的各種問題和解決方案,具備解決實際問題的能力。
黑馬程序員,傳智播客旗下高端IT教育品牌,由中國Java培訓(xùn)先驅(qū)張孝祥老師發(fā)起,聯(lián)合全球首屈一指的中文IT社區(qū)CSDN、中關(guān)村軟件園共同創(chuàng)辦的一家專業(yè)教育機(jī)構(gòu)。辦學(xué)至今,我們一直堅守著“為千萬人少走彎路而著書,為中華軟件之崛起而講課”的辦學(xué)理念,堅持培養(yǎng)優(yōu)秀軟件應(yīng)用工程師的宏偉目標(biāo),在累計培養(yǎng)的十萬余名學(xué)員中,其中90%的學(xué)員均已在北、上、廣等一線城市高薪就業(yè)。
第1章 微信小程序入門 1
【教學(xué)導(dǎo)航】 1
1.1 初識微信小程序 1
1.1.1 什么是微信小程序 1
1.1.2 微信小程序的賬號 3
1.1.3 微信小程序的特點 4
1.1.4 微信小程序的發(fā)展前景 4
1.2 開發(fā)環(huán)境搭建 5
1.2.1 注冊微信公眾號 5
1.2.2 安裝微信開發(fā)者工具 7
1.3 小程序的開發(fā)體驗 8
1.3.1 創(chuàng)建項目 8
1.3.2 開發(fā)者工具的使用 9
1.3.3 目錄結(jié)構(gòu) 11
1.3.4 項目設(shè)置 13
1.3.5 快捷鍵 14
1.4 團(tuán)隊開發(fā)與項目上線 15
1.4.1 項目成員及權(quán)限 15
1.4.2 提交審核及發(fā)布 17
本章小結(jié) 17
課后習(xí)題 17
第2章 微信小程序開發(fā)基礎(chǔ) 19
【教學(xué)導(dǎo)航】 19
2.1 【案例1】比較數(shù)字大小 19
2.1.1 案例分析 19
2.1.2 創(chuàng)建項目 20
2.1.3 頁面組件 21
2.1.4 頁面樣式 23
2.1.5 配置文件 27
2.1.6 頁面邏輯 29
2.1.7 注冊程序 34
2.1.8 實現(xiàn)比較功能 35
2.2 【案例2】調(diào)查問卷 40
2.2.1 案例分析 40
2.2.2 編寫表單頁面 41
2.2.3 服務(wù)器數(shù)據(jù)交互 42
2.2.4 表單數(shù)據(jù)綁定 44
2.3 【案例3】計算器 46
2.3.1 案例分析 46
2.3.2 編寫計算器頁面 46
2.3.3 實現(xiàn)計算邏輯功能 50
本章小結(jié) 51
課后習(xí)題 51
第3章 “音樂”小程序項目 53
【教學(xué)導(dǎo)航】 53
3.1 開發(fā)前準(zhǔn)備 53
3.1.1 項目展示 53
3.1.2 項目分析 54
3.1.3 項目初始化 55
3.2 【任務(wù)1】標(biāo)簽頁切換 55
3.2.1 任務(wù)分析 55
3.2.2 前導(dǎo)知識 56
3.2.3 編寫頁面結(jié)構(gòu)和樣式 58
3.2.4 實現(xiàn)標(biāo)簽頁切換 60
3.3 【任務(wù)2】音樂推薦 61
3.3.1 任務(wù)分析 61
3.3.2 前導(dǎo)知識 62
3.3.3 內(nèi)容區(qū)域滾動 65
3.3.4 輪播圖 66
3.3.5 功能按鈕 67
3.3.6 熱門音樂 68
3.4 【任務(wù)3】播放器 69
3.4.1 任務(wù)分析 69
3.4.2 前導(dǎo)知識 70
3.4.3 定義基礎(chǔ)數(shù)據(jù) 72
3.4.4 實現(xiàn)音樂播放功能 73
3.4.5 編寫播放器頁面 75
3.4.6 控制播放進(jìn)度 76
3.5 【任務(wù)4】播放列表 78
3.5.1 任務(wù)分析 78
3.5.2 編寫頁面結(jié)構(gòu)和樣式 79
3.5.3 實現(xiàn)換曲功能 80
本章小結(jié) 80
課后習(xí)題 80
第4章 “婚禮邀請函”小程序
項目 82
【教學(xué)導(dǎo)航】 82
4.1 開發(fā)前準(zhǔn)備 82
4.1.1 項目展示 82
4.1.2 項目分析 84
4.1.3 項目初始化 84
4.2 【任務(wù)1】邀請函頁面 86
4.2.1 任務(wù)分析 86
4.2.2 背景音樂播放 87
4.2.3 頁面結(jié)構(gòu)和樣式 89
4.2.4 一鍵撥打電話 91
4.3 【任務(wù)2】照片頁面 92
4.3.1 任務(wù)分析 92
4.3.2 實現(xiàn)縱向輪播圖 93
4.4 【任務(wù)3】美好時光頁面 93
4.4.1 任務(wù)分析 93
4.4.2 前導(dǎo)知識 94
4.4.3 編寫頁面結(jié)構(gòu)和樣式 98
4.4.4 利用WXS增強頁面功能 98
4.5 【任務(wù)4】婚禮地點頁面 99
4.5.1 任務(wù)分析 99
4.5.2 前導(dǎo)知識 100
4.5.3 編寫婚禮地點頁面 103
4.6 【任務(wù)5】賓客信息頁面 103
4.6.1 任務(wù)分析 103
4.6.2 前導(dǎo)知識 103
4.6.3 編寫頁面結(jié)構(gòu)和樣式 106
4.6.4 表單驗證 107
4.6.5 發(fā)送婚禮請?zhí)貜?fù)通知 108
本章小結(jié) 112
課后習(xí)題 112
第5章 API應(yīng)用案例(上) 114
【教學(xué)導(dǎo)航】 114
5.1 【案例1】用戶登錄 114
5.1.1 案例分析 114
5.1.2 前導(dǎo)知識 115
5.1.3 搭建開發(fā)者服務(wù)器 117
5.1.4 實現(xiàn)用戶登錄 119
5.1.5 檢查用戶是否已經(jīng)登錄 120
5.1.6 獲取用戶信息 121
5.1.7 開放數(shù)據(jù)校驗與解密 125
5.2 【案例2】個人中心 127
5.2.1 案例分析 127
5.2.2 前導(dǎo)知識 129
5.2.3 實現(xiàn)底部標(biāo)簽頁切換 131
5.2.4 編輯個人資料 132
5.2.5 訂單物流查詢 135
5.2.6 選擇收貨地址 137
5.2.7 客服聯(lián)系電話 140
5.3 【案例3】天氣預(yù)報查詢 141
5.3.1 案例分析 141
5.3.2 前導(dǎo)知識 141
5.3.3 動態(tài)獲取輸入的城市名 142
5.3.4 請求天氣接口數(shù)據(jù) 142
5.3.5 渲染界面展示數(shù)據(jù) 143
5.4 【案例4】查看附近的
美食餐廳 143
5.4.1 案例分析 143
5.4.2 前導(dǎo)知識 144
5.4.3 設(shè)計地圖界面 147
5.4.4 單擊控件回到中心點 149
5.4.5 視野變化獲取中心點坐標(biāo) 149
本章小結(jié) 150
課后習(xí)題 150
第6章 API應(yīng)用案例(下) 152
【教學(xué)導(dǎo)航】 152
6.1 【案例5】模擬時鐘 152
6.1.1 案例分析 152
6.1.2 前導(dǎo)知識 153
6.1.3 鐘表頁面布局 156
6.1.4 鐘表頁面繪制 157
6.2 【案例6】羅盤動畫 160
6.2.1 案例分析 160
6.2.2 前導(dǎo)知識 160
6.2.3 設(shè)計羅盤界面布局 161
6.2.4 手指觸摸旋轉(zhuǎn)羅盤 162
6.2.5 單擊按鈕操作羅盤 163
6.3 【案例7】文件上傳與下載 165
6.3.1 案例分析 165
6.3.2 前導(dǎo)知識 165
6.3.3 錄音和上傳 167
6.3.4 文件的下載 168
6.4 【案例8】在線聊天系統(tǒng) 169
6.4.1 案例分析 169
6.4.2 前導(dǎo)知識 170
6.4.3 編寫Node.js服務(wù)器端代碼 172
6.4.4 實現(xiàn)通信功能 173
6.4.5 編寫聊天頁面 174
本章小結(jié) 177
課后習(xí)題 177
第7章 小程序開發(fā)框架 179
【教學(xué)導(dǎo)航】 179
7.1 小程序模塊化開發(fā) 179
7.1.1 模塊 179
7.1.2 模板 180
7.1.3 自定義組件 181
7.1.4 插件 184
7.2 小程序基礎(chǔ)樣式庫—
WeUI 187
7.2.1 初識WeUI 187
7.2.2 【案例】電影信息展示 187
7.3 使用Vue.js開發(fā)小程序—
mpvue 192
7.3.1 初識mpvue 192
7.3.2 開發(fā)工具 192
7.3.3 項目結(jié)構(gòu) 194
7.3.4 【案例】計數(shù)器 195
7.4 小程序組件化開發(fā)框架—
WePY 196
7.4.1 初識WePY 197
7.4.2 開發(fā)工具 197
7.4.3 項目結(jié)構(gòu) 198
7.4.4 【案例】商品展示 200
本章小結(jié) 201
課后習(xí)題 202
第8章 綜合項目—點餐
系統(tǒng) 203
【教學(xué)導(dǎo)航】 203
8.1 開發(fā)前準(zhǔn)備 203
8.1.1 項目展示 203
8.1.2 項目分析 205
8.1.3 項目初始化 205
8.1.4 封裝網(wǎng)絡(luò)請求 207
8.2 【任務(wù)1】商家首頁 208
8.2.1 任務(wù)分析 208
8.2.2 焦點圖切換 208
8.2.3 中間區(qū)域單擊跳轉(zhuǎn)到菜單列表 209
8.2.4 底部商品展示 210
8.3 【任務(wù)2】菜單列表 210
8.3.1 任務(wù)分析 210
8.3.2 折扣信息區(qū) 211
8.3.3 設(shè)計菜單列表布局 211
8.3.4 請求數(shù)據(jù) 213
8.3.5 實現(xiàn)菜單欄聯(lián)動單品列表功能 213
8.4 【任務(wù)3】購物車 214
8.4.1 任務(wù)分析 214
8.4.2 設(shè)計底部購物車區(qū)域 214
8.4.3 添加商品到購物車 215
8.4.4 購物車界面 216
8.4.5 增加商品數(shù)量 218
8.4.6 減少商品數(shù)量 218
8.4.7 清空購物車 218
8.4.8 滿減優(yōu)惠 219
8.4.9 跳轉(zhuǎn)到訂單確認(rèn)頁面 219
8.5 【任務(wù)4】訂單確認(rèn) 220
8.5.1 任務(wù)分析 220
8.5.2 訂單信息 220
8.5.3 備注功能實現(xiàn) 221
8.5.4 支付功能 222
8.5.5 支付成功返回訂單列表 223
8.6 【任務(wù)5】訂單詳情 224
8.6.1 任務(wù)分析 224
8.6.2 取餐部分信息展示 225
8.6.3 訂單詳情部分 225
8.6.4 訂單信息部分 226
8.7 【任務(wù)6】訂單列表 227
8.7.1 任務(wù)分析 227
8.7.2 訂單列表設(shè)計 227
8.7.3 封裝數(shù)據(jù)請求 228
8.7.4 初始化頁面 229
8.7.5 下拉刷新功能 229
8.7.6 上拉觸底功能 230
8.8 【任務(wù)7】消費記錄 230
8.8.1 任務(wù)分析 230
8.8.2 設(shè)計消費記錄列表 231
本章小結(jié) 232
課后習(xí)題 232