這裡介紹一個打包工具HBuilder，可以直接將html打包成手機app，下面我介紹一下這個工具的安裝和簡單使用，如下：

1.下載HBuilder，這個直接到官網下載就行，地址http://www.dcloud.io/，如下：

2.下載成功後，隨便解壓到一個目錄下邊，主要內容如下：

建立成功後，Test應用主要目錄結構如下：

4.為了方便測試，我這裡新建了一個html檔案—test.html，主要內容如下：

用瀏覽器開啟後的效果如下：

5.下面我們就可以對這個html檔案進行打包，雙擊開啟manifest.json檔案，設定test.html檔案為入口檔案，如下：

打包成功後，如下：

apk所在目錄（在unpackage目錄裡邊），如下：

至此，html就已打包成功，可以直接安裝到安卓手機上，如下，成功安裝後的介面：

很多做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圖示配置一樣；

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

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

這裡因為uni-app預設使用流動佈局，所以這裡所有的li都顯示到了一行；

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

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

前端開發技術蓬勃發展，手機效能不斷最佳化提高，目前有些場景完全可以採用Web開發好頁面，然後“加殼”打包成手機APP。目前，有很多混合開發的框架，比如cordova、HBuilder等，在使用這些技術開發APP時，可以使用其內建的打包功能。

但有一些場合，對於一些功能少、專案比較小的APP，完全可以利用WebView控制元件自己進行打包。下面給出一個案例：如下圖，是github上的一個開源的分頁外掛。我們以此為案例演示整個過程。

我們下載專案，裡面有個

nofresh.html

接下來我們正式開始打包步驟：

使用Eclipse新建一個Android專案，當然，使用Android studio也可以的。

將下載的motypager外掛複製貼上到Android專案的assets資料夾裡面。

在

activity_main.xml

在MainActivity中的OnCreate方法中使用WebView載入開啟指定的HTML頁面。需要注意的是：頁面地址格式是以file:///android_asset開始，後面是你HTML頁面的相對地址

完成上面的步驟之後，基本上一個最基本的專案就建立好了。接下來就是將專案打包成apk檔案，也就是手機APP的安裝包。

在專案資料夾上右擊，彈出的選單選擇Export

然後選擇下圖所示項

此時需要你生成一個打包的keystore,選擇好key的儲存地址，然後輸入2次密碼

然後輸入key的基本資訊

然後輸入完成這一切之後，就能選擇儲存apk檔案了

可以看到在桌面上生成了剛才的key和APP安裝包檔案

//請求介面，獲取微信JSSDK引數$scope.get_weixin_jssdk_params = function () {var current_url = document.location.href;$http({method: ‘post’,//請求方式url: http_server + “/index.php?g=Yanyubao&m=Kuaicar&a=weixin_jssdk_params”,//請求地址data: {‘sellerid’: 123, ‘userid’: 456, ‘checkstr’: 789, ‘current_url’:current_url}//請求引數，如果使用JSON格式的物件則可為 data: JSON.stringify(obj),//timeout: 8000//請求等待時間}).success(function (data) {// console.log(1111111);// console.log(data);// console.log(1111111);if (data.code == ‘1’) {if (typeof WeixinJSBridge == “undefined”){if( document.addEventListener ){document.addEventListener(‘WeixinJSBridgeReady’, onBridgeReady, false);}else if (document.attachEvent){document.attachEvent(‘WeixinJSBridgeReady’, onBridgeReady);document.attachEvent(‘onWeixinJSBridgeReady’, onBridgeReady);}}else{onBridgeReady();}

現在有各式各樣的生成apk 或者 ipa 的方式，不過基於平臺差異性，我推薦以下幾種方式進行打包（都以打包Android 為例，如遇webview相關打包，IOS參考WKwebview打包方式，UIwebview有記憶體洩漏，慎用！）：

在專案進行完畢後，肯定是用伺服器在跑前端頁面，這裡只需要用Android studio建立一個空專案，在mainActivity裡面引入webview，寫一個訪問地址連結就可以了直接使用了。

直接使用Dcloud 的Hbuildx 進行生成空專案，然後將自己的html 相關檔案放到生成的專案中對應的目錄中去，其圖如下所示：

專案目錄已經為我們分好了js , css ，直接將相對檔案的目錄放入即可：

或者嫌麻煩的話，將自己專案目錄整體放入此處，然後在

index.html中配置mata跳轉到你自己專案中的index.html裡，這樣非常方便。

這裡以vue專案做介紹，直接在config目錄下的 index.js 檔案如下配置：

將此進行配好後做直接build處理

打包出來的www目錄直接替換掉新建立的cordova專案中的www目錄

然後輸入指令 "cordova platform add android" 、"cordova platform build android" 即可。

開心app平臺是我們開發的一個打包網站的工具，可以非常方便的把一個手機網站做成APP，也可以直接打包h5程式碼，免費使用！

下面介紹使用開心app平臺怎麼將網站快速打包成APP

分七步進行

1、註冊開心app平臺賬號

2、建立APP、配置基本資訊

3、配置擴充套件外掛

4、配置打包專案

5、配置安卓證書

6、配置ios證書

7、編譯APP

一、註冊開心app平臺賬號

二、建立一個app

2、填寫APP基本資訊

設定好儲存下一步

3、設定應用圖示和啟動圖。

設定好儲存下一步

三、設定外掛

根據app需求，選擇外掛配置。

四、選擇打包專案

可選擇打包網址，或者直接打包程式碼。

二、打包程式碼配置

kxapp.com可以直接打包H5程式碼，如果沒有搭建域名，只有程式碼也可以很方便的打包成APP。

1、選擇程式碼打包，下載程式碼模板，解壓有兩個資料夾。

2、複製程式碼到程式碼模板

3、重新壓縮為zip包，上傳打包

五、配置安卓證書

可以申請自定義證書配置，也可以使用系統自帶證書打包。

六、設定ios證書

ios證書申請比較複雜，需要蘋果開發者賬號才能申請。如有越獄手機，可以直接使用系統ios證書打包越獄版安裝測試。

ios證書申請比較複雜，耐心看下。

申請ios證書需要一個蘋果開發者賬號

ios證書分開發證書和釋出證書，這裡首先申請個開發證書，先打包安裝到自己手機測試。

iOS開發證書申請教程（真機除錯測試）

iOS釋出證書申請教程（上架App Store）

申請好證書會得到兩個證書檔案.p12和..mobileprovision，這是一套證書。

選擇.p12和.mobileprovision檔案上傳，輸入之前建立ios證書設定的密碼，儲存！

七、打包編譯APP

可選打包安卓或者ios