本書介紹了微信小程序常用組件的使用、常用API的使用、事件的監(jiān)聽和處理、數(shù)據(jù)的交互與處理等,并提供了多個實戰(zhàn)項目的開發(fā)和講解,使讀者能夠快速學習微信小程序的知識點、開發(fā)流程、項目結(jié)構(gòu)、開發(fā)思路,熟練使用微信小程序開發(fā)工具的各個功能面板。本書適合零基礎(chǔ)的開發(fā)人員,以及想要學習微信小程序開發(fā)的其他從業(yè)人員。
微信小程序2016年由微信創(chuàng)始人張小龍?zhí)岢觯?017年第一批微信小程序正式上線。隨著互聯(lián)網(wǎng)的高速發(fā)展以及微信小程序“用完即走”的良好用戶體驗,微信小程序迅速發(fā)展、聚集了大量的用戶和開發(fā)者。越來越多的人想要開發(fā)一款屬于自己的微信小程序,微信小程序開發(fā)者也成為稀缺人才,很多相關(guān)人員和零基礎(chǔ)人員也想快速踏入微信小程序的行列。本書將幫助你快速掌握微信小程序的開發(fā)知識點,通過實戰(zhàn)項目,快速掌握微信小程序開發(fā)。
本書從微信小程序的結(jié)構(gòu)及其常用的API開始,講解了微信開發(fā)工具各面板的功能和使用、常用框架的搭建、UI組件的功能和使用、API的使用、事件的監(jiān)聽和處理、數(shù)據(jù)的交互和處理等知識點。書中包含大量的實戰(zhàn)項目,方便讀者更快地掌握微信小程序的知識運用、項目接口和各種功能模塊的編寫思路。
因作者水平和成書時間有限,書中難免有疏漏和不當之處,敬請指正。
本書特色
1.內(nèi)容覆蓋全面
本書涵蓋了微信小程序前端開發(fā)的相關(guān)技術(shù),從微信的頁面功能和框架講起,介紹了微信小程序的數(shù)據(jù)展示處理、事件處理、UI組件的功能和使用、API的使用等,并在之后的實戰(zhàn)項目中進行綜合應(yīng)用,由淺入深,從初步學習到徹底掌握,讓初學者一步一步地快速掌握微信小程序開發(fā)。
2.大量實戰(zhàn)項目
本書涵蓋了大量不同類型的實戰(zhàn)項目以及多個Demo,以便讀者根據(jù)項目的難易程度,由易到難地進行全方位的綜合練習。從項目開發(fā)的角度,引導初學者快速掌握微信小程序開發(fā)的思考方式和相關(guān)知識點的使用技巧,掌握框架的搭建以及項目的調(diào)試。
3.講解循序漸進
本書根據(jù)微信小程序的知識點進行了整體梳理,然后拆分出項目結(jié)構(gòu)、數(shù)據(jù)處理、事件處理、UI組件和API使用,分步驟、分模塊地進行講解,最后通過由易到難的項目進行綜合練習,方便初學者快速理解、掌握。
4.配有視頻講解
為了提高學習效果,作者針對書中內(nèi)容專門錄制了大量視頻(見華章官網(wǎng)),供讀者快速掌握案例開發(fā),加快學習進度。
5.讀者交流學習
讀者可以加入QQ群——21948169,群內(nèi)有眾多編程愛好者,大家可以在里面討論問題、分享經(jīng)驗、結(jié)交朋友,一起更快更好地學習。
本書內(nèi)容及體系結(jié)構(gòu)
本書分為兩篇。第一篇為基礎(chǔ)知識,包括第1~4章。
第1章主要介紹微信小程序的發(fā)展歷程以及開發(fā)微信小程序需要哪些準備工作。通過創(chuàng)建“Hello World”項目讓讀者掌握微信小程序的項目創(chuàng)建和管理,以及開發(fā)工具各功能面板的使用。
第2章主要講解微信小程序的項目配置、各文件的功能和使用。讀者可以了解數(shù)據(jù)展示和事件處理的方法,掌握微信小程序和各個頁面的生命周期,并且通過通信錄項目了解循環(huán)數(shù)據(jù)的搭建和模板的使用。
第3章主要介紹微信小程序中常用的UI組件的功能和使用,并且通過計算器項目讓讀者了解控件的使用、事件的響應(yīng)和數(shù)據(jù)的展示處理。
第4章分類介紹微信小程序提供的API及其使用,通過九宮格選圖項目,讓讀者掌握API的使用以及控件的擺放。
第二篇為實戰(zhàn)案例,包括第5~10章,通過實戰(zhàn)項目幫助讀者掌握微信小程序開發(fā),鞏固前面所學的知識。
第5章通過新聞閱讀項目,讓讀者掌握使用tabBar進行結(jié)構(gòu)搭建,掌握滾動視圖的使用、數(shù)據(jù)的獲取和處理、用戶信息的獲取以及對項目UI控件的排列和使用。
第6章通過單車共享項目,讓讀者掌握地圖API的綜合使用、項目框架的搭建,以及API的使用。
第7章通過視頻快訊項目,讓讀者掌握tabBar項目的結(jié)構(gòu)搭建、滾動視圖的使用、重復樣式的代碼抽取,熟悉項目開發(fā)的流程。
第8章通過云音樂項目,讓讀者學會使用音樂播放API、自定義音樂播放控件、了解頁面之間的跳轉(zhuǎn)邏輯、掌握項目UI控件的排列和使用、熟悉項目開發(fā)的流程。
第9章通過對商城購物的講解,讓讀者能夠根據(jù)整體項目代碼的邏輯進行拆分,學會調(diào)試項目。
第10章通過對外賣配送的講解,讓讀者加深對整體項目代碼的拆分思路的理解,學習如何對功能頁面搭建框架,以及如何調(diào)試項目。
讀者對象
* 微信小程序開發(fā)人員
* 前端設(shè)計工程師
* JavaScript程序員
* 互聯(lián)網(wǎng)創(chuàng)業(yè)人員
* 移動端程序員
豈超凡,大乘科技高級前端開發(fā)工程師,拼住聯(lián)盟社區(qū)創(chuàng)始人,擁有5年前端軟件開發(fā)經(jīng)驗。在移動開發(fā)領(lǐng)域,他先后在天繪北斗、大乘科技等公司從事前端高級開發(fā)工作,對客戶端軟件進行了架構(gòu)搭建、改良等工作,開發(fā)了短報文用戶聊天系統(tǒng)。2018年,他創(chuàng)立了“拼住聯(lián)盟”微信小程序,用戶累計10萬,日活躍量過千。
前言
第一篇 基礎(chǔ)知識
第1章 認識微信小程序1
1.1 微信小程序介紹1
1.1.1 什么是微信小程序1
1.1.2 微信小程序的發(fā)展歷史1
1.1.3 微信小程序的功能和應(yīng)用場景2
1.2 微信小程序開發(fā)準備2
1.2.1 基礎(chǔ)準備2
1.2.2 開發(fā)準備5
1.3 微信小程序開發(fā)工具介紹6
1.3.1 項目創(chuàng)建6
1.3.2 項目刪除8
1.3.3 開發(fā)工具界面介紹8
1.3.4 項目調(diào)試介紹9
1.4 項目實戰(zhàn):“Hello World”項目12
1.5 本章小結(jié)12
第2章 微信小程序項目結(jié)構(gòu)配置13
2.1 文件介紹13
2.1.1 .wxml后綴的結(jié)構(gòu)文件13
2.1.2 .wxss后綴的樣式文件13
2.1.3 .js后綴的邏輯文件13
2.1.4 .json后綴的配置文件14
2.1.5 項目結(jié)構(gòu)推薦配置14
2.2 微信小程序配置15
2.2.1 樣式配置15
2.2.2 其他配置17
2.2.3 頁面配置17
2.3 生命周期函數(shù)18
2.3.1 小程序的生命周期函數(shù)19
2.3.2 各頁面的生命周期函數(shù)19
2.4 數(shù)據(jù)渲染19
2.4.1 數(shù)據(jù)綁定19
2.4.2 條件渲染20
2.4.3 列表渲染20
2.5 事件21
2.6 模板使用22
2.7 引用23
2.8 項目實戰(zhàn):通信錄23
2.9 本章小結(jié)25
第3章 微信小程序UI組件27
3.1 基礎(chǔ)視圖組件27
3.1.1 view視圖容器27
3.1.2 scroll-view滾動視圖容器28
3.1.3 image圖片容器30
3.1.4 text文本組件32
3.1.5 cover-view覆蓋視圖容器32
3.1.6 cover-image覆蓋圖片容器32
3.1.7 icon圖標組件32
3.2 高級視圖組件33
3.2.1 swiper輪播容器33
3.2.2 progress進度條組件35
3.2.3 slider滑動選擇器組件36
3.2.4 switch開關(guān)組件37
3.2.5 map地圖組件38
3.3 表單組件42
3.3.1 form表單組件42
3.3.2 button按鈕組件43
3.3.3 checkbox多選項組件44
3.3.4 radio單選項組件45
3.3.5 label擴展組件46
3.3.6 input輸入框組件47
3.3.7 textarea多行輸入框組件49
3.3.8 picker滾動選擇器組件50
3.3.9 picker-view嵌入式滾動選擇器組件56
3.4 媒體組件58
3.4.1 camera相機組件59
3.4.2 audio音頻組件60
3.4.3 video視頻組件61
3.5 畫布組件canvas64
3.6 項目實戰(zhàn):計算器65
3.7 本章小結(jié)73
第4章 微信小程序API74
4.1 頁面導航74
4.1.1 wx.navigateTo74
4.1.2 wx.navigateBack75
4.1.3 wx.switchTab75
4.1.4 wx.redirectTo75
4.1.5 wx.reLaunch76
4.2 網(wǎng)絡(luò)請求76
4.2.1 發(fā)送網(wǎng)絡(luò)請求76
4.2.2 文件的上傳、下載77
4.3 文件的操作79
4.3.1 文件保存與打開79
4.3.2 文件信息獲取80
4.3.3 文件管理者81
4.4 圖片的操作81
4.4.1 圖片選擇81
4.4.2 圖片預覽82
4.4.3 圖片信息獲取83
4.4.4 圖片保存83
4.5 交互反饋84
4.5.1 消息提示框84
4.5.2 加載提示框85
4.5.3 模態(tài)彈窗86
4.5.4 下彈操作菜單86
4.6 獲取用戶信息87
4.6.1 用戶登錄87
4.6.2 用戶信息88
4.6.3 用戶位置90
4.6.4 用戶授權(quán)91
4.7 設(shè)備信息API92
4.7.1 獲取設(shè)備信息92
4.7.2 屏幕亮度93
4.7.3 獲取設(shè)備電量93
4.7.4 設(shè)備剪切板94
4.7.5 設(shè)備方向94
4.7.6 設(shè)備網(wǎng)絡(luò)95
4.7.7 撥打電話96
4.7.8 掃描二維碼96
4.8 其他常用的API97
4.8.1 微信支付97
4.8.2 轉(zhuǎn)發(fā)98
4.8.3 下拉刷新99
4.9 數(shù)據(jù)緩存100
4.10 項目實戰(zhàn):九宮格選圖101
4.11 本章小結(jié)107
第二篇 實戰(zhàn)案例
第5章 新聞閱讀109
5.1 需求描述109
5.2 設(shè)計思路109
5.2.1 首頁描述109
5.2.2 視頻頁描述109
5.2.3 我的描述110
5.3 準備工作111
5.4 頁面搭建113
5.4.1 首頁頁面搭建113
5.4.2 視頻頁面搭建117
5.4.3 我的頁面搭建120
5.5 邏輯搭建120
5.5.1 首頁邏輯120
5.5.2 視頻邏輯123
5.5.3 我的邏輯125
5.6 項目小結(jié)125
第6章 單車共享126
6.1 需求描述126
6.2 設(shè)計思路126
6.2.1 首頁描述126
6.2.2 故障申報描述127
6.2.3 我的描述127
6.3 準備工作128
6.4 頁面搭建129
6.4.1 首頁頁面搭建129
6.4.2 我的頁面搭建132
6.4.3 報修頁面搭建135
6.5 邏輯搭建140
6.5.1 頁面跳轉(zhuǎn)邏輯140
6.5.2 首頁邏輯141
6.5.3 車輛故障邏輯143
6.6 數(shù)據(jù)獲取148
6.7 項目小結(jié)149
第7章 視頻快訊151
7.1 需求描述151
7.2 設(shè)計思路151
7.2.1 首頁描述151
7.2.2 短視頻描述151
7.2.3 頻道描述151
7.2.4 我的描述153
7.3 準備工作154
7.4 頁面搭建155
7.4.1 首頁頁面搭建156
7.4.2 短視頻頁面搭建160
7.4.3 頻道頁面搭建165
7.4.4 我的頁面搭建1