Jamal123
以下內容由“健談IT”回答
前端開發技術蓬勃發展，手機性能不斷優化提高，目前有些場景完全可以採用Web開發好頁面，然後“加殼”打包成手機APP。目前，有很多混合開發的框架，比如cordova、HBuilder等，在使用這些技術開發APP時，可以使用其內置的打包功能。
但有一些場合，對於一些功能少、項目比較小的APP，完全可以利用WebView控件自己進行打包。下面給出一個案例：如下圖，是github上的一個開源的分頁插件。我們以此為案例演示整個過程。
我們下載項目，裡面有個
nofresh.html
文件，如下圖所示。
接下來我們正式開始打包步驟：
一、使用Eclipse建立一個Android項目
使用Eclipse新建一個Android項目，當然，使用Android studio也可以的。
將HTML項目複製到Android項目中
將下載的motypager插件複製粘貼到Android項目的assets文件夾裡面。
修改layout文件，加入WebView控件
在
activity_main.xml
的佈局文件中，加入一個WebView控件，如下：
使用WebView打開HTML頁面
在MainActivity中的OnCreate方法中使用WebView加載打開指定的HTML頁面。需要注意的是：頁面地址格式是以file:///android_asset開始，後面是你HTML頁面的相對地址
打包
完成上面的步驟之後，基本上一個最基本的項目就建立好了。接下來就是將項目打包成apk文件，也就是手機APP的安裝包。
在項目文件夾上右擊，彈出的菜單選擇Export
然後選擇下圖所示項
此時需要你生成一個打包的keystore,選擇好key的保存地址，然後輸入2次密碼
然後輸入key的基本信息
然後輸入完成這一切之後，就能選擇保存apk文件了
可以看到在桌面上生成了剛才的key和APP安裝包文件
在手機上安裝測試
到此為止，一個HTML頁面就成功打包成APP了。雖然步驟繁瑣，但是整個過程是我們自己可控的。希望我的回答對你有所步驟，如果喜歡，請關注我：“健談IT”
健談IT
這裡介紹一個打包工具HBuilder，可以直接將html打包成手機app，下面我介紹一下這個工具的安裝和簡單使用，如下：
1.下載HBuilder，這個直接到官網下載就行，地址http://www.dcloud.io/，如下：
2.下載成功後，隨便解壓到一個目錄下邊，主要內容如下：
3.打開HBuilder，新建一個移動App應用，依次點擊“文件”->“新建”->“移動App”就行，我這裡創建了一個Test應用，這裡需要勾選“Hello H5+”，如下：
創建成功後，Test應用主要目錄結構如下：
4.為了方便測試，我這裡新建了一個html文件—test.html，主要內容如下：
用瀏覽器打開後的效果如下：
5.下面我們就可以對這個html文件進行打包，雙擊打開manifest.json文件，設置test.html文件為入口文件，如下：
接著右擊Test應用，選擇“發行”->“雲打包-打原生安裝包”，這裡我以打包安卓程序為例，勾選“Android”，點擊打包就行，如下：
打包成功後，如下：
apk所在目錄（在unpackage目錄裡邊），如下：
至此，html就已打包成功，可以直接安裝到安卓手機上，如下，成功安裝後的界面：
到此，我們就完成了將一個html打包成一個手機app，就整個過程來看，其實不難，就是步驟有些繁瑣，網上也有相關教程和資料，感興趣的可以搜一下，希望以上分享的內容能對你有所幫助吧。
小小猿愛嘻嘻
推薦使用Cordova，一個框架打遍天下，不但可以將html移植到APP中，還可以平滑移植到公眾號和小程序中，支持在微信中自動獲取粉絲的頭像和暱稱，以及自動加粉。需要做的，就是在html對應Javascript中多加一些判斷，如：
if(is_in_weixin_browser && !is_in_wxa_browser){//公眾號更換頭像console.log(is_in_weixin_browser);console.log(is_in_wxa_browser);$scope.get_weixin_jssdk_params();
可以參考這裡的代碼：
//請求接口，獲取微信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();}
萬能的CTO
很多做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吧。
web開發技術分享
試試iapp吧，非常簡單，可視化編程
寒月蘭雅
可以用cordova 支持iOS和Android
