-HTML5移動(dòng)前端開發(fā)基礎(chǔ)與實(shí)戰(zhàn)（第2版）（微課版）-PPT 模塊8

模塊8移動(dòng)App演練基于HTML5的混合式移動(dòng)App開發(fā)可跨平臺(tái)部署、大幅降低開發(fā)成本。本模塊簡(jiǎn)要介紹使用HBuilder開發(fā)移動(dòng)App的流程，并在夜神模擬器上進(jìn)行測(cè)試。HTML5移動(dòng)前端開發(fā)基礎(chǔ)與實(shí)戰(zhàn)（微課版）了解HTML5跨平臺(tái)開發(fā)的優(yōu)勢(shì)。知識(shí)目標(biāo)1掌握HBuilderX的安裝及使用。職業(yè)目標(biāo)2掌握夜神模擬器的安裝及使用。掌握在HBuilderX下開發(fā)移動(dòng)App的流程。3培養(yǎng)團(tuán)隊(duì)協(xié)同工作能力。培養(yǎng)銳意進(jìn)取的精神。素質(zhì)目標(biāo)HBuilderX是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。配合其MUI前端框架和5+Runtime產(chǎn)品，可以快速地開發(fā)移動(dòng)App（Android和iOS）。8.1HBuilderX8.1.1HBuilderX特點(diǎn)HBuilder本身主體由Java編寫，基于Eclipse，兼容Eclipse插件。HBuilder通過完整的語法提示、代碼輸入法、代碼塊等大幅提升HTML、JavaScript、CSS的編寫效率?？稍贒Cloud官網(wǎng)下載最新版的HBuilderX。HBuilderX目前有兩個(gè)版本，一個(gè)是Windows版，一個(gè)是Mac版。下載的時(shí)候根據(jù)自己的電腦選擇合適的版本。8.1.2HBuilderX安裝HbuilderX下載安裝。演練8.1夜神玩模擬器是一款安卓模擬器軟件。該模擬器支持在電腦上安裝運(yùn)行安卓手機(jī)應(yīng)用。8.2

夜神玩模擬器8.2.1夜神模擬器特點(diǎn)夜神模擬器同時(shí)支持Windows和MacOS兩大平臺(tái)。夜神模擬器支持多點(diǎn)觸控，只需簡(jiǎn)單設(shè)置快捷鍵，就可以充分體驗(yàn)游戲過程中鍵盤操作的快感。夜神支持虛擬多核，能兼容市面上絕大多數(shù)安卓游戲和應(yīng)用。8.2.2夜神模擬器安裝夜神模擬器下載安裝。演練8.2本節(jié)簡(jiǎn)要介紹使用HBuilder開發(fā)移動(dòng)App的流程，并部署在海馬玩模擬器上進(jìn)行測(cè)試。關(guān)于如何詳細(xì)開發(fā)移動(dòng)App，請(qǐng)關(guān)注編者后續(xù)圖書。8.3

移動(dòng)App開發(fā)流程8.3.1創(chuàng)建移動(dòng)App模板項(xiàng)目5G使用HBuilderX創(chuàng)建移動(dòng)App模板項(xiàng)目。演練8.38.3.2帶底部導(dǎo)航、輪播圖和新聞列表的App本節(jié)創(chuàng)建一個(gè)帶底部導(dǎo)航、輪播圖和新聞列表的入門App。輪播圖使用的是MUI的gallery（圖片輪播）組件，新聞列表使用的是MUI的medialist（圖文列表）組件。因?yàn)楸緯恢v述后端代碼，新聞列表只是從自定義變量中組合數(shù)據(jù)顯示。實(shí)際開發(fā)中一般通過后臺(tái)從數(shù)據(jù)庫(kù)動(dòng)態(tài)獲取數(shù)據(jù)并顯示。使用HBuilderX創(chuàng)建一個(gè)帶底部導(dǎo)航、輪播圖和新聞列表的移動(dòng)App項(xiàng)目。演練8.4思考喜歡HbuilderX嗎？如果喜歡，那就深入了解并學(xué)習(xí)吧。類似HbuilderX這樣的開發(fā)工