如何將html打包成一個app？

很多做web前端或者h5開發app的人，都想自己做一個app安裝到自己的手機上，app改成自己的名字或者使用自己的頭像做圖標，

感覺是不是很xx，今天，我來教大家如何使用前端工具打包自己的app；

首先，我們先下載工具HBuilderX，官網下載地址：https://www.dcloud.io/hbuilderx.html；

打開官網后我們點擊下載：

在彈出的界面中選擇自己電腦版本的軟件下載：

下載后直接下一步，下一步安裝即可，由于我的電腦已經安裝了，就不再演示安裝過程，很簡單的，安裝過后是這個樣子的：

雙擊打開軟件；新建項目，根據圖中的步驟來操作，

1、我們選擇第二個uni-app

2、寫好項目名稱

3、選擇保存路徑

4、選擇默認模板

點擊創建，這時我們得到一個創建的項目結構：

這里簡單說一下，因為uni-app基于vue.js來開發的，所以會vue的小伙伴們使用起來會很容易上手。我們需要編輯的頁面就是在pages目錄中，這里我們修改index.vue文件如下圖

再點開manifest.json文件，修改基礎配置，把app修改成自己的名字和使用自己頭像做圖標，

我們這里填寫應用名稱和描述，第一項app應用標識是云端獲取的，不需要我們手動填寫；

配置安裝到手機上的圖標，因為小編手機是安卓機，所以這里選擇了安卓圖標配置，選擇的圖標根據指定的尺寸大小做好對應的圖標：

如果需要修改默認啟動圖標可以自己區設置修改。和修改app圖標配置一樣；

這樣就差不多了，點擊保存；

最后點擊項目名，然后再工具欄上點擊“發行——原生app云端打包”，然后在彈出的界面取消iOS勾選，Android使用共用證書，最下面是廣告，如果勾選廣告的話可以賺收益的，最后我們點擊“打包”

打包需要幾分鐘，等一會我們就可以看到下載的界面：

點擊鏈接就可以下載apk包了：

這時我們把下載下來的apk包傳到手機上就可以安裝了。這是我已經安裝好了的截圖：

這里因為uni-app默認使用流動布局，所以這里所有的li都顯示到了一行；

以前開發一個app，需要一個安卓和一個IOS原生開發，各自開發一套以適應不同的手機操作系統，這樣做帶來的問題就是需要開發兩套一樣的app，而且開發成本和維護成本會大大提高；而近幾年隨著前端技術的不斷發展，這一問題可以在前端完美解決；這給我們web前端的小伙伴帶來了福音，開發一套代碼可以多端（安卓，iOS，微信小程序，h5）運行；

是不是很棒，小伙伴們，趕緊拿著自己的手機安裝一個屬于自己的app吧。