所谓的webApp就是html页面跟原生app结合而成的一种应用,这种应用的开发可以节省不少的成本,做出来的app跟原生一样,webApp利用框架技术可以让你有使用app的感觉,具体可以看平安银行的app

工具/原料

 
  • 电脑
  • eclipse,git,nodejs,jdk,cordova
  • 一个完整的手机网站

方法/步骤

 
  1.  

    首页得准备好需要的东西,如eclipse,一个完整可以浏览的手机网站,而且确保电脑配置好jdk,环境变量,还要安装好cordova,这些环境等配置这里不表,可以自行百度。在这里我就自己随意写了个网站做测试,从下图可以看出来,这是一个可以在网页中浏览的手机网站

  2.  

    有了网站之后,第一步新建一个项目,打开你要保存的项目地址,比如D盘的yun文件夹,按住键盘的shift键+鼠标右键,选择“在此处打开命令窗口”,就会弹出一个终端命令窗口,打开之后在终端里面输入cordova create hello,hello为你的项目名称,如cordova create qianqian,qianqian就是我的项目名称,注意,不要手动去创建文件夹,因为我们在终端里面建的项目里面有很多的配置文件,终端命令窗口不要关

  3.  

    在终端命令窗口中输入cd qianqian,进入qianqian文件夹,然后再输入cordova platform add android,回车,等待下载完成,记住在下载之前一定要确保已经安装git,要不然会下载失败,本人亲自试验,下载可以要1分钟左右,下载完成后终端命令窗口不要关,等下要用

  4.  

    下载完成后将准备好的网站放到www文件夹里面,原来的文件可以删掉,再打开eclipse软件,点击菜单栏file--import,弹出一个窗口,选择下面图片中的选项,再点next,之后点击Browse,选择qianqian文件夹项目的路径,选取,记住,复选框一定要全部选上,不懂的看下面的图片,然后确定就可以了

  5.  

    确定之后就会看到下面图片一样左边会出现两个项目,为了确保项目一次性完成,我们可以在终端窗口里面输入cordova prepare,输入前确保是在当前qianqian文件夹,这个命令是在修改过项目的情况下运行的,等待他运行完,下面第二张图片是运行完成的图片

  6.  

    ok,之后就可以打包webapp了,回到eclipse,我们发现项目文件有个红叉,或者也会出现一个感叹号之类的,出现这个情况的话可以点击菜单栏project--clean,在弹出的窗口中选择第二个单选项,下面的复选框全部选上,不懂看图,确认之后就可以看到红叉没了

  7.  

    然后在项目栏里选择第二个项目右键选择run as--android application,之后等待半分钟左右,主要是看电脑运行速度好不好了,好的话就快

  8.  

    最后如果你手机连接着电脑或者你电脑开着安卓虚拟机的话,在弹出的窗口就会出现你手机或者虚拟机的信息,选择他再点ok,系统会自动跳到虚拟机里,如果是真机的话,就直接看你的手机就行,手机会自动安装app应用的

  9.  

    如果两者都没有的话可以将弹出的窗口都关闭,然后在软件项目栏的第二个项目里面有个bin文件夹,打开,里面有个apk,将他复制出来安装到自己手机或其他机器里就行了,下图就是webapp做出来的最终效果,一开始忘记上传图片,只上传了代码,所以app里面没有图片,不过效果总算是出来了

web页面如何打包封闭成手机APP的更多相关文章

  1. 项目打包成手机app 通过什么打包?

    项目打包成手机app  通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文 ...

  2. 用Chrome devTools 调试Android手机app中的web页面。

    (1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...

  3. 手机web站点和手机app 技术选型的困惑于思考

    今年一直在关注移动端技术的发展,自己也用博客园的rss接口玩了半年,关于技术选型的困惑和大家说说 一 趋势 随着手机硬件不断的升级,外加4g牌照的发放,不出2年时间移动端web站点和手机app一定会进 ...

  4. 谈谈混合 App Web 资源的打包与增量更新

    综述 移动 App 的运行环境具有带宽不稳定,流量收费,启动速度比较重要等特点,所以混合 App 如何加载 Web 资源并不是一个新问题.本文目的是总结出一种资源打包下载的思路和方案,并且提供一种打包 ...

  5. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  6. 把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!

    很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...

  7. 将Vue移动端项目打包成手机app---HBuilder

    将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录  选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...

  8. 第六篇 native 版本的Postman如何通过代理服务器录制Web及手机APP请求

    第四篇主要介绍了chrome app版本的postman如何安装及如何录制Web脚本,比较简单. 但是chrome app 版本和native 版本相比,对应chrome app 版本官方已经放弃支持 ...

  9. iOS之safari调试iOS app web页面

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...

随机推荐

  1. python之range和xrange

    range 前面小节已经说明了,range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. 比如: 1 >>> ...

  2. poj3683(2-SAT 求任意方案)

    基础的2-SAT求任意方案的题目. Priest John's Busiest Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissi ...

  3. ASP.NET MVC 数据库依赖缓存

    ASP.NET MVC 数据库依赖缓存   问题背景 最近做一个非常简单的功能,就是使用ajax请求的方式从服务端请求一段下拉表的数据. 以前也有做过这个功能,只不过这次做这个功能的时候冒出了一个想法 ...

  4. CodeForces 670C Cinema(排序,离散化)

    C. Cinema time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  5. mysql delete 多表

    DELETE u.*,acu.*,alu.* FROM user u, accountuser acu ,algouser alu WHERE u.userId=11 and acu.userID=1 ...

  6. 开机启动/etc/rc.local失效无效怎么办?解决方法

    开机启动/etc/rc.local失效问题的解决方法 第一种情况:当centOS 随机启动文件 /etc/rc.local 失效时请按如下修改1.echo /etc/rc.local >> ...

  7. Spring Data 关于Repository的介绍(四)

    Repository类的定义: public interface Repository<T, ID extends Serializable> { } 1)Repository是一个空接口 ...

  8. vc判断当前用户是否具有administrator 权限代码

    BOOL IsAdmin() { HANDLE hAccessToken; BYTE * InfoBuffer = ]; PTOKEN_GROUPS ptgGroups; DWORD dwInfoBu ...

  9. 【我的Android进阶之旅】Android调用JNI出错 java.lang.UnsatisfiedLinkError: No implementation found for的解决方法

    错误描述 今天使用第三方的so库时候,调用JNI方法时出现了错误.报错如下所示: 11-01 16:39:20.979 4669-4669/com.netease.xtc.cloudmusic E/a ...

  10. Android系统移植与调试之------->如何添加一个adb wifi无线调试的功能【开发者选项】-【Wifi调试】

    首先弄懂怎么设置adb wifi无线调试的功能,如下所示. 1. 手机端开启adb tcp连接端口 :/$setprop service.adb.tcp.port :/$stop adbd :/$st ...