Java和Android环境安装与配置，将另写经验分享，读者也可百度参考其他相关资料，自行安装
打开MyEclipse2014，新建一个HTML5 Mobile Application Project，命名，例如：hello
html5程序在工程www目录下编辑；
编辑好我们的html5程序，下面就要开始学习打包了
这里介绍两种打包方式：1、PhoneGap Build Service 打包
PhoneGap官网有相关教程可参考，不具体介绍
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好，android开发环境)：
Step1、启动eclipse，新建Android Application Project，即Android工程，命名，例如：hello
Step2、将前面Myeclipse2014中编辑好的HTML5程序(www整个目录）拷至刚刚在eclipse新建hello工程对应assets目录下面
Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动，这里我们要使用Android系统自带的WebView控件（具体信息参考Adroid开发文档）---在工程下找到res->layout->activity_main.xml并打开，向里面插入WebView控件，编辑好自己想要的样式
Step4、在主程序入口，用刚刚编辑好的WebView控件将HTML5程序引入，此时，主体功能已实现，编译工程即可得到apk
将html5程序打包成Android应用的方法是采用在线appcan实现的。1、图标设置可以使用AppCan提供的默认图标，也可以通过从本地上传图标设置自己应用的图标。2、状态栏设置Android状态栏支持两种设置：显示或不显示。3、启动页设置设置应用启动时显示的启动页图片。可分平台上传启动页图片，上传图片时将鼠标放在图片上会出现一个上传按钮，点击上传按钮就可以上传各个分辨率的启动图。在启动页设置操作界面，通过屏幕设置功能可以设置应用启动时启动页是竖屏显示还是横屏显示。4、插件选择选择开发应用中所使用到的插件。”公共插件”为AppCan开放出的插件；”我的插件”为开发者自己上传的插件，参考自定义插件上传文档，上传我的自定义插件包5、证书管理android平台选择自定义证书打包，需上传android证书，通过上传的证书和口令检验当前证书。安卓证书可以通过其他途径（如Android ADT、ANT等）生成的标准签名证书，也可一键生成安卓证书。6、云端打包Android平台选择自定义证书打包，默认不上传证书则为AppCan测试证书不可作为正式发布使用，需上传Android证书，自定义包名：用户可以根据需求来填写自定义包名，请按照规格填写，例如：com.zywx.appcan，注意：不支持中文、数字及特殊字符。Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式：1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
Html代码
<SPAN style="FONT-SIZE: x-small"> <head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head></SPAN>
meta中viewport的属性如下
Html代码
<SPAN style="FONT-SIZE: x-small"> <meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/></SPAN>
2 CSS控制设备密度
为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）
Html代码
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
在一个样式表中，指定不同的样式
Html代码
#header {
<SPAN style="WHITE-SPACE: pre"> </SPAN>background:url(medium-density-image.png)
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
// CSS for high-density screens
#header {
background:url(high-density-image.png)
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
// CSS for low-density screens
#header {
background:url(low-density-image.png)
}
}
Html代码
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）
JS中查询设备密度的方法
Js代码
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen")
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen")
}
● Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签
WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页
在WebView中加载Web页面，使用loadUrl()
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")
注意在manifest文件中加入访问互联网的权限：
Xml代码
<uses-permission android:name="android.permission.INTERNET" />
在Android中点击一个链接，默认是调用应用程序来启动，因此WebView需要代为处理这个动作 通过WebViewClient
Java代码
//设置WebViewClient
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url)
return true
}
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url)
}
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon)
}
})
这个WebViewClient对象是可以自己扩展的，例如
Java代码
private class MyWebViewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.example.com")) {
return false
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url))
startActivity(intent)
return true
}
}
之后：
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview)
myWebView.setWebViewClient(new MyWebViewClient())
另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录
因此需要覆盖系统的回退键 goBack，goForward可向前向后浏览历史页面
Java代码
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) &&myWebView.canGoBack() {
myWebView.goBack()
return true
}
return super.onKeyDown(keyCode, event)
}
Java代码
WebView myWebView = (WebView) findViewById(R.id.webview)
WebSettings webSettings = myWebView.getSettings()
webSettings.setJavaScriptEnabled(true)
