HBuilder打包手機app的方法

前言：

 

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【HBuilder打包手機app的方法 】

若是你是一個前端新手，若是你被網上的「HBuilder打包手機app的教程」氣的想砸電腦，那麼建議你看看這篇教程，但願你有耐心讀完，由於它的詳細程度絕對是小白級別；

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。該軟件既能夠支持web代碼編寫，也能夠將已經編寫好的項目代碼打包爲手機APP，本文主要講解使用Hbuilder將項目代碼打包爲手機APP的使用方法；

步驟以下：

一、先在官網下載Hbuilder工具：也能夠用360軟件管家直接搜索Hbuilder，進行下載；

官網下載地址：http://www.dcloud.io/

二、下載完成以後，須要先進行註冊，不註冊也能夠打開，可是打包生成手機APP的時候，appid會報錯，註冊很是簡單，直接用郵箱註冊並登陸便可：

 

三、 註冊並登陸後，Hbuilder入門是講解怎麼快速編寫代碼的，能夠不用看。首先打開「文件」-「新建」-「移動APP」，輸入「應用名稱」，「位置」能夠根據須要本身選擇便可，「選擇模板」建議選擇空模板；

四、 新建完成以後，打開文件夾所在的路徑，默認會新建不少空文件：

五、 Hbuilder會顯示新建的項目文件夾：

六、 打開新建的本地文件夾後，該文件夾中的子文件夾不是必須的，若是你用的sass或者less編譯的css文件，能夠直接將css文件夾刪除，再將本身項目中的sass或者less文件夾複製過來便可；其餘的html，ls，img文件夾，將本身的項目文件對應複製到文件夾中，注意html中的引用路徑須要保持正確；

七、 文件複製完成後，打開HBuilder，打開manifest.json文件：應用名稱和版本號根據須要編輯，appid點擊雲端獲取，頁面入口默認是index.html，根據本身項目須要，更改APP的啓動頁面；

八、 配置完成後，點擊頁面下方的圖標配置：配置APP在手機上的顯示圖標；默認是HBuilder的圖標：

配置圖標後，點擊：自動生成全部圖標並替換，這樣app的顯示圖標就都更換爲咱們上傳的圖片了；

九、 「啓動圖片配置」，「SDK配置」和「模塊權限配置」默認便可，在「頁面引用關係」界面，須要理解該功能是什麼意思：

點擊左側html文件，右側會顯示不一樣的文件，圖片等：表示左側html加載時所須要的資源；

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

理解該功能的含義以後，分別點擊左側html文件，查看須要加載的資源和跳轉的頁面是否正常便可；

注：通常點擊到「頁面引用關係」的時候，就會自動生成全部的頁面關係信息，可是有時候點開是空白的，這就須要本身手動點擊該頁面上方的「掃描代碼」了。

也可能點擊一次掃描代碼仍是空白，再屢次點擊依然空白（我以爲這是一個bug，我已經屢次碰到該問題）。運氣好的點擊幾回會正常加載，若是你點背，那就只能先手動添加資源，而後再點擊「掃描代碼」，通常會正常；

十、 「代碼視圖」頁面，顯示的是該app的具體信息，能夠瀏覽一下，不須要更改。

十一、 全部信息更改完成後，點擊導航欄的「發行」-「發行爲原生安裝包」：

十二、 點擊「打包」後會提示「是否配置unpackage文件清單以減少包體積」；能夠忽略該信息，可是爲了減小下載所耗流量，咱們仍是配置一下比較合適；

1三、 點開「配置unpackage文件清單」後，會發現，裏面是一些sass組件，編譯文件和無用的圖片（若是你清理過圖片，就不會顯示無用的圖片，可是sass文件確定會有），將文件夾打鉤，點擊「加入unpackage清單」便可。

至於該操做是什麼意思，本身查看HBuilder的解釋；

1四、 配置完成後，再次點擊「打包」，發現仍是有提示，這個提示就根據本身app的須要來選擇了。通俗解釋權限配置就是：你安裝app時提示的「是否容許讀取本手機聯繫人」，「是否容許讀取短信」等操做。

1五、 點擊「繼續打包」，一路肯定後，彈出查看app打包狀態：

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

1六、 點擊「打開下載目錄」，找到app所在目錄，剩下的就是將你的app給你的產品經理，讓他放到各大應用商店供用戶下載了。

1七、 若是你只是須要將該app安裝到手機進行調試，那就直接用數據線鏈接到電腦，點擊Hbuilder的「運行」-「手機運行」，鏈接到手機，再根據手機對應下載手機助手便可。