如何将html5程序打包成Android应用

如何将html5程序打包成Android应用,第1张

问题分析:

html5网站主要由html+css+js的形式组成,需要使用浏览器进行展现。

Android需要使用Java语言来开发,对于前端工程师来说,无疑是增加了很大的难度。

随后出现了很多打包工具,来协助我们将网页元素打包成手机app,将我们编写的html转化为Java语言。

解决方案:

推荐一款我们常用的打包工具:HBuilder。

该工具不仅提供了Android应用打包,还可以直接连接手机进行调试,配合HTML5+可以实现很多Android原生的功能。比如:扫码二维码,拍照,摇一摇等等。

具体 *** 作步骤:

1、真机调试

进入软件后,第一步点击“运行”,第二步点击“手机运行”,第三步选择已连接的手机,示例中我使用的是安卓模拟机进行连接的。市面上常用的几款安卓模拟机器都可以直接连接上。

按如上几个步骤 *** 作后,会自动执行打包并将应用安装在链接的手机(模拟器)中,可以 *** 作手机(模拟机)进行测试。

2、打包生成Android的安装格式apk文件

① 打开软件,选择发行->发行为原生安装包,随即打开下图窗口。

② 勾选Android复选框,如果使用Dcloud公用证书的话,可以直接进行打包,手机可以安装使用。如果需要上传发行到第三方应用平台的话,需要使用自有证书,自用证书可以使用JRE自带的创建和管理数字证书的工具Keytool来生成自有证书,生成过程是免费的。

勾选Android选项后,在下方表单中填写Android包名,为保证唯一性,可以使用自有网站域名的反写方式加上应用名称。如果使用自有证书的话,还需要填写证书别名,密钥密码,证书文件。

填写完毕后,点击打包,即可生成apk文件。

其他注意事项:

1、在开发过程中,不需要进行打包,应更多的使用真机调试,可以节约很多时间。

2、开发完毕后,尽可能在各种版本的android机器上做一下测试,因为一些网页的样式在不同的android版本中呈现的效果略有不同。

3、重新编辑一下html5网站代码,将一些网页功能转换为手机功能,比如网页元素的<a>标签跳转,就应该使用Webview来完成。可以解决页面切换白屏的问题,还可以提高网站在手机中的运行效率。

一、Android SDK中的WebView

1.在要Activity中实例化WebView组件:WebView webView = new WebView(this)

2.调用WebView的loadUrl()方法,设置WevView要显示的网页:

互联网用:webView.loadUrl("http://www.31358.com")

本地文件用:webView.loadUrl("file:///android_asset/XX.html")本地文件存放在:assets 文件中

3.调用Activity的setContentView( )方法来显示网页视图

4.用WebView点链接看了很多页以后为了让WebView支持回退功能,需要覆盖覆盖Activity类的onKeyDown()方法,如果不做任何处理,点击系统回退剪键,整个浏览器会调用finish()而结束自身,而不是回退到上一页面

5.需要在AndroidManifest.xml文件中添加权限,否则会出现Web page not available错误。

二、使用PhoneGap

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如 iPhone的iPhone SDK,Android的Android SDK等,

详细方法请见:http://phonegap.com/start#android

优点:在Eclipse中加入SDK,编程自由,完美适应不同设备屏幕大小,适合高手使用。

缺点:没有使用布局,直接加载网页,不能添加广告。

三、使用Rexsee在线生成

Rexsee是开源的Android开发平台,支持开发者以标准化Web开发模式,使用HTML5、CSS3、Javascript快速实现移动应用。会 HTML就会Android。你要做的只是将做好的HTML5 应用上传到Rexsee服务器,很快,会编译成标准的APK安装文件。

网站:http://www.rexsee.com

优点:一键生成,适学普通人使用

缺点:直接封装,无法添加广告。

四、appMobi Html5 XDK 在线生成(使用了PhoneGap插件)

http://www.appmobi.com/


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7343607.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存