如果你是一個前端新手锦茁，如果你被網(wǎng)上的“HBuilder打包手機app的教程”氣的想砸電腦，那么建議你看看這篇教程，希望你有耐心讀完胚吁，因為它的詳細程度絕對是小白級別；

HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE愁憔。該軟件既可以支持web代碼編寫腕扶，也可以將已經(jīng)編寫好的項目代碼打包為手機APP，本文主要講解使用Hbuilder將項目代碼打包為手機APP的使用方法吨掌；

步驟如下：

1半抱、先在官網(wǎng)下載Hbuilder工具：也可以用360軟件管家直接搜索Hbuilder脓恕，進行下載；

官網(wǎng)下載地址：http://www.dcloud.io/

2窿侈、下載完成之后炼幔，需要先進行注冊，不注冊也可以打開史简，但是打包生成手機APP的時候乃秀，appid會報錯，注冊非常簡單圆兵，直接用郵箱注冊并登錄即可：

3跺讯、 注冊并登錄后，Hbuilder入門是講解怎么快速編寫代碼的殉农，可以不用看刀脏。首先打開“文件”-“新建”-“移動APP”，輸入“應用名稱”超凳，“位置”可以根據(jù)需要自己選擇即可愈污，“選擇模板”建議選擇空模板；

4轮傍、 新建完成之后钙畔，打開文件夾所在的路徑，默認會新建很多空文件：

5金麸、 Hbuilder會顯示新建的項目文件夾：

6擎析、 打開新建的本地文件夾后，該文件夾中的子文件夾不是必須的挥下，如果你用的sass或者less編譯的css文件揍魂，可以直接將css文件夾刪除，再將自己項目中的sass或者less文件夾復制過來即可棚瘟；其他的html现斋，ls，img文件夾偎蘸，將自己的項目文件對應復制到文件夾中庄蹋，注意html中的引用路徑需要保持正確；

7迷雪、 文件復制完成后限书，打開HBuilder，打開manifest.json文件：應用名稱和版本號根據(jù)需要編輯章咧，appid點擊云端獲取倦西，頁面入口默認是index.html，根據(jù)自己項目需要赁严，更改APP的啟動頁面扰柠；

8粉铐、 配置完成后，點擊頁面下方的圖標配置：配置APP在手機上的顯示圖標卤档；默認是HBuilder的圖標：

配置圖標后蝙泼，點擊：自動生成所有圖標并替換，這樣app的顯示圖標就都更換為我們上傳的圖片了劝枣；

9踱承、 “啟動圖片配置”，“SDK配置”和“模塊權限配置”默認即可哨免，在“頁面引用關系”界面茎活，需要理解該功能是什么意思：

點擊左側html文件，右側會顯示不同的文件琢唾，圖片等：表示左側html加載時所需要的資源载荔；

下面的表示該頁面能跳轉到的頁面：

理解該功能的含義之后，分別點擊左側html文件采桃，查看需要加載的資源和跳轉的頁面是否正常即可懒熙；

注：一般點擊到“頁面引用關系”的時候，就會自動生成所有的頁面關系信息普办，但是有時候點開是空白的工扎，這就需要自己手動點擊該頁面上方的“掃描代碼”了。

也可能點擊一次掃描代碼還是空白衔蹲，再多次點擊依然空白（我覺得這是一個bug肢娘，我已經(jīng)多次碰到該問題）。運氣好的點擊幾次會正常加載舆驶，如果你點背橱健，那就只能先手動添加資源，然后再點擊“掃描代碼”沙廉，一般會正常拘荡；

10、 “代碼視圖”頁面撬陵，顯示的是該app的具體信息珊皿，可以瀏覽一下，不需要更改巨税。

11蟋定、 所有信息更改完成后，點擊導航欄的“發(fā)行”-“發(fā)行為原生安裝包”：

12垢夹、 點擊“打包”后會提示“是否配置unpackage文件清單以減小包體積”溢吻；可以忽略該信息，但是為了減少下載所耗流量果元，我們還是配置一下比較合適促王；

13、 點開“配置unpackage文件清單”后而晒，會發(fā)現(xiàn)蝇狼，里面是一些sass組件，編譯文件和無用的圖片（如果你清理過圖片倡怎，就不會顯示無用的圖片迅耘，但是sass文件肯定會有），將文件夾打鉤监署，點擊“加入unpackage清單”即可颤专。

至于該操作是什么意思，自己查看HBuilder的解釋钠乏；

14栖秕、 配置完成后，再次點擊“打包”晓避，發(fā)現(xiàn)還是有提示簇捍，這個提示就根據(jù)自己app的需要來選擇了。通俗解釋權限配置就是：你安裝app時提示的“是否允許讀取本手機聯(lián)系人”俏拱，“是否允許讀取短信”等操作暑塑。

15、 點擊“繼續(xù)打包”锅必，一路確定后事格，彈出查看app打包狀態(tài)：

打包成功后會顯示一個安卓的app，一個蘋果的app搞隐；

16分蓖、 點擊“打開下載目錄”，找到app所在目錄尔许，剩下的就是將你的app給你的產(chǎn)品經(jīng)理么鹤，讓他放到各大應用商店供用戶下載了。

17味廊、 如果你只是需要將該app安裝到手機進行調(diào)試蒸甜，那就直接用數(shù)據(jù)線連接到電腦，點擊Hbuilder的“運行”-“手機運行”余佛，連接到手機柠新，再根據(jù)手機對應下載手機助手即可。

我是一枚正直辉巡、純潔恨憎、善良的web程序員；

web自學，項目實戰(zhàn)請點擊猛戳這里有驚喜憔恳！