本書通過一個(gè)完整的示例項(xiàng)目社區(qū)維修App展開介紹,內(nèi)容由淺入深,從零開始一步步介紹H5移動(dòng)應(yīng)用開發(fā),書中所使用的開發(fā)工具是HBuilder,項(xiàng)目采用的技術(shù)主要是HTML5、5 、MUI和Vue.js等。
本書適合對(duì)HTML5和js有一定了解,但沒有H5移動(dòng)應(yīng)用開發(fā)經(jīng)驗(yàn),或者正準(zhǔn)備學(xué)習(xí)H5移動(dòng)開發(fā)的初學(xué)者。
全書以項(xiàng)目驅(qū)動(dòng)的形式來貫穿各個(gè)技術(shù)知識(shí)點(diǎn),從而讓讀者能夠快速上手開發(fā),并且使讀者在閱讀過程中不會(huì)覺得枯燥乏味。
本書旨在通過模擬一個(gè)社區(qū)的維修功能模塊來介紹如何進(jìn)行H5 跨平臺(tái)移動(dòng)應(yīng)用的開發(fā)。全書以項(xiàng)目驅(qū)動(dòng)的形式來貫穿各個(gè)技術(shù)知識(shí)點(diǎn),從而讓讀者能夠快速上手開發(fā),并且使讀者在閱讀過程中不會(huì)覺得枯燥乏味。
因?yàn)楸緯饕捎玫氖荕UI前端框架,所以本書中的項(xiàng)目并沒有采用時(shí)下非常流行的SPA(單頁(yè)應(yīng)用)技術(shù)進(jìn)行組件模塊化開發(fā)。如果進(jìn)行SPA開發(fā),讀者可能需要儲(chǔ)備更多的知識(shí),如node.js、webpack、vue全家桶以及和vue相配套的模塊化UI庫(kù),如由餓了么公司提供的elementUI。
在寫本書之時(shí),Dcloud又開發(fā)出了新一代的跨平臺(tái)前端框架uniApp,它正是基于組件化的方式開發(fā)的,而且它在支持iOS和Android系統(tǒng)的同時(shí)又兼容了微信小程序,由于是新出來的框架,因此目前還處于不斷的完善過程中。uniApp官網(wǎng)地址: http://uniApp.dcloud.io/。
如何閱讀本書
由于書中內(nèi)容環(huán)環(huán)相扣,因此我建議讀者盡量按照順序閱讀,然后按照書中的步驟,自己動(dòng)手來實(shí)現(xiàn)。在這個(gè)過程中,可以根據(jù)自己的需要修改和新增一些需求,從而實(shí)現(xiàn)一個(gè)屬于自己的App項(xiàng)目。
源碼及勘誤
本書附帶源代碼供讀者參考,源碼下載地址: https://dev.tencent.com/u/zouyujie/p/h5_app/git/archive/master。
如果下載有問題,請(qǐng)發(fā)電子郵件至: zouyujie@126.com,郵件主題為H5。
希望本書能給讀者帶來思路上的啟發(fā)與技術(shù)上的提升,每位讀者都能夠從中獲益。同時(shí),也非常希望借此機(jī)會(huì)能與國(guó)內(nèi)熱衷于H5移動(dòng)應(yīng)用的開發(fā)者進(jìn)行交流。
由于時(shí)間和本人水平有限,書中難免存在一些紕漏和錯(cuò)誤,希望大家批評(píng)、指正。如果大家發(fā)現(xiàn)了問題,可以直接和我聯(lián)系,我會(huì)第一時(shí)間在本人的技術(shù)博客(http://www.cnblogs.com/jiekzou)中發(fā)表并加以改正,萬分感謝。另外,有興趣的讀者可加入QQ技術(shù)交流群: 773766020。
致謝
本書能順利的出版,首先要感謝劇艷婕編輯,其次是北航出版社的其他編輯,正是他們?cè)谖覍懽鞯倪^程中提供協(xié)助,才使得整個(gè)創(chuàng)作不斷地被完善,從而確保了本書順利完稿。
寫一本書所費(fèi)的時(shí)間和精力都是巨大的,在寫書期間,我占用了太多本該陪家人的時(shí)間,在這里要特別感謝我的愛人王麗麗,謝謝你幫我處理了許多生活上面的瑣事;還有我的兒子鄒宇峰,作為一名父親,我沒能好好陪伴在你身邊,這是我最大的遺憾。人生很無奈的一件事就是:
寶貝,放下工作就養(yǎng)不起你,拿起工作卻陪不了你!還要感謝我的父母,是他們含辛茹苦地把我培養(yǎng)成人,同時(shí)感謝公司給我提供了一個(gè)自我提升的發(fā)展平臺(tái),正是由于這一切的一切,才促使我順利完成本書的編寫。
鄒瓊俊,全棧工程師,專注于web開發(fā),擁有十年軟件開發(fā)經(jīng)驗(yàn)。著有《ASP.NET MVC企業(yè)及實(shí)戰(zhàn)》一書,CSDN學(xué)院講師。
第1章技術(shù)背景及知識(shí)儲(chǔ)備1
1.1H5 介紹1
1.2Hbuilder介紹1
1.3MUI介紹7
1.4Vue.js介紹9
1.5阿里巴巴矢量庫(kù)介紹13
1.6開發(fā)前注意事項(xiàng)19
1.7相關(guān)學(xué)習(xí)資料的網(wǎng)址21
第2章項(xiàng)目介紹及框架搭建22
2.1項(xiàng)目介紹22
2.2技術(shù)選型31
2.3框架搭建32
2.4Mock數(shù)據(jù)39
第3章App啟動(dòng)頁(yè)和引導(dǎo)圖42
3.1App啟動(dòng)頁(yè)42
3.2App引導(dǎo)圖45
第4章登錄52
4.1登錄功能介紹53
4.2登錄界面設(shè)計(jì)54
4.3登錄編碼實(shí)現(xiàn)55
4.4角色菜單權(quán)限63
4.5自動(dòng)登錄68
4.6運(yùn)行69
第5章首頁(yè)及底部導(dǎo)航70
5.1底部菜單導(dǎo)航實(shí)現(xiàn)70
5.2首頁(yè)界面設(shè)計(jì)及展示78
第6章故障報(bào)修83
第7章列表和詳情111
7.1工單列表111
7.2工單詳情118
目錄
H5 跨平臺(tái)移動(dòng)應(yīng)用實(shí)戰(zhàn)開發(fā)第8章?lián)寙闻晒ず灥?24
8.1搶單124
8.2派工與轉(zhuǎn)單128
8.3簽到132
8.4退單134
第9章完工與跟蹤記錄137
9.1完工137
9.2跟蹤記錄141
第10章個(gè)人設(shè)置144
10.1頭像設(shè)置144
10.2當(dāng)前版本158
第11章通訊錄162
11.1查看通訊錄列表162
11.2撥號(hào)呼叫165
第12章數(shù)據(jù)統(tǒng)計(jì)167
12.1echarts報(bào)表介紹167
12.2統(tǒng)計(jì)工單完成情況170
第13章離線操作176
13.1let
和const176
13.2H5本地存儲(chǔ)178
13.3js異步編程182
13.4離線操作表結(jié)構(gòu)187
13.5批量下載工單190
13.6批量上傳工單194
第14章發(fā)布應(yīng)用203
14.1App打包203
14.2發(fā)布到應(yīng)用市場(chǎng)207
第15章植入廣告210
15.1開屏廣告210
15.2懸浮紅包廣告211
15.3push廣告211
15.4開通步驟212
15.5問題答疑213
第16章消息推送216
16.1使用須知216
16.2個(gè)推應(yīng)用信息申請(qǐng)步驟217
16.3常見問題223
第17章其他224
17.1評(píng)價(jià)224
17.2意見和反饋225
參 考
文 獻(xiàn)226