使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成。记录一下从中遇到的问题和需要用到的开发环境的配置

将Webapp封装成Hybrid App有如下步骤

1.下载安装1.8的JDK,并且配置环境变量        (注意:最新版本的cordova,必须要下载1.8的JDK不然会报错)

2.下载安装Ant构建工具并且配置环境变量      (注意:Ant目录不能是中文,不然编译不成功)

3.下载安装android并且配置开发环境

4.下载安装Node.js

5.使用npm安装cordova全局环境

6.使用cordova创建cordova项目

7.将cordova编译为android项目

8.安装.apk文件

9.Eclipse安装ant插件

10.导入创建好的android项目

11.下载安装连接第三方模拟器 (注意:这里舍弃了自带的android模拟器使用第三方的,因为android自带的模拟器半天才打开,又不支持window系统下载x86)

1.JDK的配置环境如下:

在环境变量新建系统变量 变量名:JAVA_HOME  变量值为:安装路径的根目录即可(C:\Program Files\Java\jdk1.8.0_111)

2.安装Ant构建工具如下:

1.  新建系统变量   变量名:ANT_HOME  变量值为:安装路径的根目录即可(D:\phonegap\apache-ant-1.9.8) 把bin目录的路径添加到path里面

添加到path的截图如下:

完成以上两点之后打开cmd输入  java -version 和 ant -version 出现以下如则安装成功,否则请检查配置的环境变量路径

3.安装android开发环境配置如下:

解压后的目录是如下图:

1.将SDK目录下的:platform-tools、tools添加到环境变量的path里面去

2.安装完成后cmd运行adb 如图则安装成功,

4.下载安装Node.js

下载下来的包含有Node.js安装包直接安装即可,无需配置环境

5.使用npm安装cordova全局环境

1.运行cmd

2..输入此命令:  npm install -g cordova   回车        这里需要等待一段时间        如以下图说明安装成功    因为我已经安装过了

可运行cordova -v 查看是否安装成功,如图示 6.4.0版本的cordova 如图

6.使用cordova创建cordova项目

1.切换到任意路径 输入命令:cordova create myapp    回车

2.进入项目输入命令:  cd myapp   回车

7.将cordova编译为android项目              (注意:如何报android-24的错误,请在添加平台时修改两个文件

1. D:\phonegap\myapp\platforms\android目录下的project.properties文件将24改成25

2. D:\phonegap\myapp\platforms\android\CordovaLib目录下的project.properties文件将24改成25即可)

1.添加安卓平台输入命令:cordova platform add android    回车

添加成功如下:

检查环境是否配置好:输入命令: cordova requirements          回车        出现以下则OK

8.安装.apk文件

如果以上都完成了就开始构建安卓.apk

输入命令: cordova build android   回车   如下图则构建成功

此时此刻你的D:\phonegap\myapp\platforms\android\build\outputs\apk  有一个apk的文件  到了这里ok说明你已经成功了

现在的目录结构为:

现在将webapp移动端项目copy到www目录下,将原先的文件删掉,如图   主程序入口在config.xml配置(后缀不能是.jsp)

(注意:所以的请求必须是绝对路径)

9.Eclipse安装ant插件

打开Eclipse--->Help--->Install New Software---出现以下

Ant插件安装成功后重启Eclipse ----->添加SDK所在的目录

10.导入创建好的android项目

File--->New--->project-->

选择上面创建好的安卓项目   勾选两个就行了    CordovaLib、MainActivity

11.下载安装连接第三方模拟器

先下载安装第三方模拟器(注意:模拟器要打开才能连接成功)

下载安装完成后运行cmd 连接第三方模拟器  输入命令   adb connect 127.0.0.1:26944  回车   ---》26944是第三方模拟器的端口号

此时进入Eclipse---》Window---Show View-->Devices则出现以下图

运行MainActivity---》Run As---》Android-Application  出现如下界面   选择第三方模拟器  OK

模拟器出现如下图则运行成功OK

将apk安装包发送到手机进行安装如下效果:

希望对大家有帮助

有问题可以加QQ交流---969351680

时间: 2024-08-05 02:48:55

使用Cordova框架把Webapp封装成Hybrid App实践——Android篇的相关文章

Hybrid App适配Android注意点

最近把做好的ipad HTML5混合应用适配到android上,发现android的webview比 iPad差太多了,android4.4由于升级到chromium,和chrome内核一致,所有问题不多,但android4.3以下的版本兼容问题太多了,只能一个一个慢慢解决了! 目前已经碰到了css3 flex box布局的兼容问题, js的兼容问题等. Android的 css3 flex box需要这样写 .frame-page { display: -moz-box; /* Firefox

Hybrid App开发者一定不要错过的框架和工具///////////z

ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架.在历经了jqmobile.sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计.组件化结构.UI简洁而优美. 很多同学不明白为Hybrid app设计跟为Mobile web设计有什么不同,我只说最典型的一点:Hybrid App的资源都在本地的,没有网络读取的消耗,所以最理想的方式是一次

Hybrid App开发者一定不要错过的框架和工具

最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架.在历经了jqmobile.sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计.组件化结构.UI简洁而优美. 很多同学不明白为Hybrid app设计跟为Mobile web设计有什么不同,我只说最典型的一点:

为什么要用Hibernate框架? 把SessionFactory,Session,Transcational封装成包含crud的工具类并且处理了事务,那不是用不着spring了?

既然用Hibernate框架访问管理持久层,那为何又提到用Spring来管理以及整合Hibernate呢?把SessionFactory,Session,Transcational封装成包含crud的工具类并且处理了事务,那不是用不着spring了? Hibernate操作的步骤如下: 1. 获得Configuration对象 2. 创建SessionFactory 3. 创建Session 4. 打开事务 5. 进行持久化操作.比如上面的添加用户操作 6. 提交事务 7. 发生异常,回滚事务

跨平台 webapp 开发技术之 Hybrid App

前所知的 APP 开发模式有三种: 基于操作系统运行的 APP -> Native App,侧重于原生开发,用户体验好,需要安装才会升级 基于浏览器运行的 APP -> Web App,侧重于网页技术实现,跨平台兼容性好,只要开发人员更新代码,无需通过安装升级 基于移动应用引擎 -> Hybrid App,使用H5和JS开发.如果不追求用户体检时,这种方式最快也最省钱 下面的图摘自简书,是对三种不同形态的 APP 的对比: Hybrid APP是目前广泛流行的一种APP开发模式,Andr

Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处:http://www.cnblogs.com/xdxer/p/4111552.html [ctrl+左键点击图片可以查看原图] 在上一篇关于Hybrid App Development的文章中,我讨论了一下在iOS下UIWebView的使用方法.但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求.   关于造轮子的思考: 在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybr

在已有 Xcode 项目中 加入Cordova框架

转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybrid App中,如何才能实现JavaScript调用本地的一些硬件设备,如摄像头.音频.还有本地存储呢?首先想到的就是规定一些协议,在UIWebViewDelegate 中去接收JavaScript发来的消息并且由Objc代码去控制本地的数据库访问,控制摄像头和音频等

Angularjs和Ionic框架搭建webApp

本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jianshu.com/p/ea0dcf1d31c9著作权归作者所有,转载请联系作者获得授权,并标注"简书作者". AngularJS简介:AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静

[Android_HTML5]基于PhoneGap(Cordova)框架的HTML5开发

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的优势.因为它采用HTML5+JavaScript的模式来开发应用.PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等..这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了.Phone