HTML5移動(dòng)前端開(kāi)發(fā)基礎(chǔ)與實(shí)戰(zhàn)第8章課件

1、第8章 移動(dòng)App開(kāi)發(fā)基于HTML5的混合式移動(dòng)App開(kāi)發(fā)可跨平臺(tái)部署、大幅降低開(kāi)發(fā)成本。本章簡(jiǎn)要介紹使用HBuilder開(kāi)發(fā)移動(dòng)App的流程，并在Android模擬器（海馬玩）上進(jìn)行測(cè)試，希望讀者借此打開(kāi)通向混合式移動(dòng)App開(kāi)發(fā)的道路。HTML5移動(dòng)前端開(kāi)發(fā)基礎(chǔ)與實(shí)戰(zhàn)（微課版）1掌握Hbuilder安裝及使用。2掌握海馬玩模擬器安裝及使用。學(xué)習(xí)目標(biāo)3掌握在Hbuilder下開(kāi)發(fā)移動(dòng)App的流程。HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE。配合其MUI前端框架和5+Runtime產(chǎn)品，可以快速地開(kāi)發(fā)移動(dòng)App（Android和iOS）。8.1 Hbui

2、lder8.1.1 Hbuilder特點(diǎn)HBuilder本身主體由Java編寫(xiě)，基于Eclipse，兼容Eclipse插件。HBuilder通過(guò)完整的語(yǔ)法提示、代碼輸入法、代碼塊等大幅提升HTML、JavaScript、CSS的編寫(xiě)效率?？稍贖Builder官網(wǎng)下載最新版的HBuilder。HBuilder目前有兩個(gè)版本，一個(gè)是Windows版，一個(gè)是Mac版。下載的時(shí)候根據(jù)自己的電腦選擇合適的版本。8.1.2 Hbuilder安裝Hbuilder下載安裝。演練8.1海馬玩模擬器（Droid4X）是一款安卓模擬器軟件。該模擬器支持在電腦上安裝運(yùn)行安卓手機(jī)應(yīng)用。8.2 海馬玩模擬器8.2.1 海

3、馬玩模擬器特點(diǎn)海馬玩模擬器同時(shí)支持Windows和Mac OS兩大平臺(tái)。海馬玩模擬器支持多點(diǎn)觸控，只需簡(jiǎn)單設(shè)置快捷鍵，就可以充分體驗(yàn)游戲過(guò)程中鍵盤(pán)操作的快感。海馬玩支持虛擬多核，能兼容市面上絕大多數(shù)安卓游戲和應(yīng)用。8.2.2 海馬玩模擬器安裝海馬玩模擬器下載安裝。演練8.2本節(jié)簡(jiǎn)要介紹使用HBuilder開(kāi)發(fā)移動(dòng)App的流程，并部署在海馬玩模擬器上進(jìn)行測(cè)試。關(guān)于如何詳細(xì)開(kāi)發(fā)移動(dòng)App，請(qǐng)關(guān)注編者后續(xù)圖書(shū)。8.3 移動(dòng)App開(kāi)發(fā)流程8.3.1 創(chuàng)建移動(dòng)App模板項(xiàng)目5G使用HBuilder創(chuàng)建移動(dòng)App模板項(xiàng)目。演練8.38.3.2 帶底部導(dǎo)航、輪播圖和新聞列表的App本節(jié)創(chuàng)建一個(gè)帶底部導(dǎo)航、輪播圖和新聞列表的入門(mén)App。輪播圖使用的是MUI的gallery（圖片輪播）組件，新聞列表使用的是MUI的media list（圖文列表）組件。因?yàn)楸緯?shū)不講述后端代碼，新聞列表只是從自定義變量中組合數(shù)據(jù)顯示。實(shí)際開(kāi)發(fā)中一般通過(guò)后臺(tái)從數(shù)據(jù)庫(kù)動(dòng)態(tài)獲取數(shù)據(jù)并顯示。使用HBuilder創(chuàng)建一個(gè)帶底部導(dǎo)航、輪播圖和新聞列表的移動(dòng)App項(xiàng)目。演練8.4本章思考喜歡Hbuilder嗎？如果喜歡，那就深入了解并學(xué)習(xí)。類(lèi)似Hbuilder這樣的開(kāi)發(fā)工具還有