小編給大家分享一下怎么使用Hbuilder打包WebApp，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、青縣網(wǎng)站維護(hù)、網(wǎng)站推廣。

HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE。該軟件既可以支持web代碼編寫(xiě)，也可以將已經(jīng)編寫(xiě)好的項(xiàng)目代碼打包為手機(jī)APP。

HBuilder提供的打包有云端打包和本地打包兩種，云端打包的特點(diǎn)是DCloud官方配置好了原生的打包環(huán)境，可以把HTML等文件編譯為原生安裝包。

1，下載HBuilder，注冊(cè)并登陸。首先打開(kāi)“文件”-“新建”-“移動(dòng)APP”，輸入“應(yīng)用名稱(chēng)”，“位置”可以根據(jù)需要自己選擇即可，“選擇模板”建議選擇空模板；

2，新建完成后， 在項(xiàng)目管理器會(huì)顯示新建的項(xiàng)目目錄，其中css，img，js和index.html這幾個(gè)文件可刪可改可替換。

unpackage文件夾是放置app圖標(biāo)和啟動(dòng)界面的圖片。

manifest.json文件是移動(dòng)App的配置文件，用于指定應(yīng)用的顯示名稱(chēng)、圖標(biāo)、應(yīng)用入口文件地址及需要使用的設(shè)備權(quán)限等信息，用戶(hù)可通過(guò)HBuilder的可視化界面視圖或者源碼視圖來(lái)配置移動(dòng)App的信息。

3，如果刪除了css，img，js文件夾和index.html文件，就把其他自己的項(xiàng)目文件對(duì)應(yīng)復(fù)制到文件夾中，注意html文件中的引用路徑需要保持正確。

如下圖自己拷貝的項(xiàng)目：

4， 文件復(fù)制完成后，刷新更新下，雙擊打開(kāi)manifest.json文件來(lái)配置App。

appid：點(diǎn)擊云端獲取。版本號(hào)：根據(jù)需要來(lái)編輯。頁(yè)面入口：默認(rèn)是index.html，根據(jù)自己項(xiàng)目需要，更改APP的啟動(dòng)頁(yè)面。應(yīng)用描述：自己隨便填。應(yīng)用是否全屏顯示：勾上就全屏顯示。

5，圖標(biāo)配置：點(diǎn)擊頁(yè)面下方的圖標(biāo)配置，配置APP顯示圖標(biāo)。

1)點(diǎn)擊"+"號(hào)的正方形方框，選擇圖標(biāo)素材的路徑找到圖標(biāo)素材，再點(diǎn)擊" 自動(dòng)生成所有圖標(biāo)并替換"按鈕，完成圖標(biāo)生成和替換。

6，啟動(dòng)圖片（splash）配置，點(diǎn)擊切換到啟動(dòng)圖片配置

1)，啟動(dòng)選項(xiàng)：默認(rèn)

2)，啟動(dòng)圖片設(shè)置，根據(jù)自己需要是Android還是iOS平臺(tái)，再根據(jù)不同設(shè)備對(duì)應(yīng)做出啟動(dòng)圖片

3），在unpackage→res文件下新建個(gè)文件命名"splash"，把做好的啟動(dòng)圖片放到這個(gè)文件里面。

4），在啟動(dòng)圖片設(shè)置里點(diǎn)擊"選擇"，找到剛放進(jìn)來(lái)的啟動(dòng)圖片

7，SDK配置：有需要就配置，沒(méi)有就默認(rèn)就行。

8，模塊權(quán)限配置：有需要就配置，沒(méi)有就默認(rèn)就行。

9，頁(yè)面引用關(guān)系：

首先點(diǎn)擊“掃描代碼”，再點(diǎn)擊左邊index.html文件

該功能是什么意思：點(diǎn)擊左側(cè)html文件，右側(cè)會(huì)顯示不同的文件，圖片等?？梢员硎咀髠?cè)html文件加載時(shí)所需要的資源。

10，代碼視圖：在代碼視圖里查看設(shè)置是否正確，確定后ctrl+s保存好。

11，設(shè)置好配置選項(xiàng)，正式進(jìn)入打包階段

HBuilder里點(diǎn)："發(fā)行"-"發(fā)行為原生安裝包"開(kāi)始打包

這里介紹一下iOS打包

1），這里如果選擇越獄包就不需要蘋(píng)果證書(shū)，一路默認(rèn)設(shè)置就可以打包成功，但是打包的App只能安裝在越獄過(guò)的手機(jī)，沒(méi)越獄安裝不了。

2），如果使用蘋(píng)果證書(shū)，這里推薦一個(gè)申請(qǐng)iOS證書(shū)的工具 Appuploader。免蘋(píng)果付費(fèi)開(kāi)發(fā)者賬號(hào)，直接使用普通蘋(píng)果id，就能使用Appuploader申請(qǐng)ios測(cè)試證書(shū)，打包ipa安裝到非越獄設(shè)備。

工具的安裝網(wǎng)址：http://www.applicationloader.net/blog/zh/72.html

免開(kāi)發(fā)者賬號(hào)申請(qǐng)iOS證書(shū)教程：http://www.applicationloader.net/blog/zh/1073.html

12，提交成功后點(diǎn)擊確定，就可以查看App打包狀態(tài)

等打包成功，就可以點(diǎn)手動(dòng)下載，通過(guò)第三方工具 蘋(píng)果助手安裝到ipad上了。

13，調(diào)試和安裝模擬器

如果你需要在電腦本機(jī)進(jìn)行調(diào)試那就需要安裝模擬器，請(qǐng)參考http://ask.dcloud.net.cn/article/151如何安裝配置手機(jī)模擬器，或者在HBuilder里→→運(yùn)行→→手機(jī)運(yùn)行→→如何安裝配置手機(jī)模擬器進(jìn)入查看。

如果需要安裝到手機(jī)進(jìn)行真機(jī)調(diào)試，把手機(jī)用數(shù)據(jù)線連接到電腦，然后重新啟動(dòng)HBuilder→→運(yùn)行→→手機(jī)運(yùn)行→→連接上真機(jī)。

看完了這篇文章，相信你對(duì)怎么使用Hbuilder打包WebApp有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱(chēng)欄目：怎么使用Hbuilder打包WebApp-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/ddgdjo.html