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
