這篇文章主要講解了“如何使用Hbuilder打包WebApp”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用Hbuilder打包WebApp”吧！

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)蓮都免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

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

unpackage文件夾是放置app圖標和啟動界面的圖片。

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

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

如下圖自己拷貝的項目：

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

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

5，圖標配置：點擊頁面下方的圖標配置，配置APP顯示圖標。

1)點擊"+"號的正方形方框，選擇圖標素材的路徑找到圖標素材，再點擊" 自動生成所有圖標并替換"按鈕，完成圖標生成和替換。

2),生成的圖標自動在unpackage文件夾下

6，啟動圖片（splash）配置，點擊切換到啟動圖片配置

1)，啟動選項：默認

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

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

4），在啟動圖片設(shè)置里點擊"選擇"，找到剛放進來的啟動圖片

7，SDK配置：有需要就配置，沒有就默認就行。

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

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

首先點擊“掃描代碼”，再點擊左邊index.html文件

該功能是什么意思：點擊左側(cè)html文件，右側(cè)會顯示不同的文件，圖片等。可以表示左側(cè)html文件加載時所需要的資源。

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

11，設(shè)置好配置選項，正式進入打包階段

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

這里介紹一下iOS打包

1），這里如果選擇越獄包就不需要蘋果證書，一路默認設(shè)置就可以打包成功，但是打包的App只能安裝在越獄過的手機，沒越獄安裝不了。

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

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

免開發(fā)者賬號申請iOS證書教程：http://www.applicationloader.net/blog/zh/1073.html

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

等打包成功，就可以點手動下載，通過第三方工具 蘋果助手安裝到ipad上了。

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

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

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

感謝各位的閱讀，以上就是“如何使用Hbuilder打包WebApp”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何使用Hbuilder打包WebApp這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)頁題目：如何使用Hbuilder打包WebApp-創(chuàng)新互聯(lián)
標題鏈接：http://weahome.cn/article/shdss.html