❶ android为什么要用h5做界面
H5开发安卓界面需要注意以下三点:
(上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础
(中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试
(下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建
进入正题
● Android设备多分辨率的问题
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的属性如下:
<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" />
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不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页。
❷ android怎么调h5的方法
第一种也是最开始就接触的方式,通常在activity组件的oncreate事件中直接定义,直接动作。这种方式每个控件都定义一次,通常不方便.
});
❸ 淘宝,京东这种商城的APP都是用Android+h5语言来开发的吗
一般比较大的平台都会采用Android原生+h5混合开发,这样能取各方面的优点;
原生开发可以访问设备中的所有功能,运行速度更快,性能更高,而且可以启用优秀的离线处理和存储能力等等,提供最佳的用户体验,最优质的用户界面,最华丽的交互。
原生开发的缺点在逐渐的开发、运营过程中显现出来。开发成本高,不同平台需要定制不同的app,也就是android定制apk,ios定制app,开发人员需要多平台多语言,人力成本、时间成本较多,通用性差;
H5开发是Html5开发的app,本质上运行在手机浏览器中的页面,一般使用app做一个壳套用浏览器运行H5的页面,由于H5的特性也有很多app使用半原生半H5的hybird app 开发模
H5有许多优点,特别针对原生开发的缺点。如:
直接在网页上调试和修改,几乎不用考虑用户机型和适配的问题,针对原生开发的平台碎片化、开发人力成本、时间成本高;版本升级优势,网页的升级与用户无关,用户无需下载更新安装,保证实时送达到用户手中;上线时间稳定、快速,不需要通过开发市场的审核,有收入分成的开发市场更是可以绕过收入分成。除此以外在视频媒体方面H5表现也十分优秀的。
H5的缺点有许多,当新技术出现时候许许多多的人都在吹嘘它的优点,到真正实用时才对它的缺点正视。H5加载大图片的时候性能会下降,大量用户访问同一个H5应用时性能会下降,响应速度比不上原生app,上网速度也不及原生app,H5不能自动处理动画上反复交互(网页游戏),需要借助css3、javascript。
❹ android程序员怎么学习h5
矩形,尤其是圆角矩形需要注意的是,在Android中只能实现四分一圆角效果,如果你的圆角效果是通过P 钢笔工具做出来的,这部分需要你把它做成.9.png图片。先看看Android在代码层次的实现:
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#ff6191"/>
<size android:height="200dp" android:width="400dp"/>
</shape>
代码中的radius参数就是1/4圆角的数值,单位是dp。调整这个参数的数值,只能调整半角。当调整到矩形高度的1/2时,就成左右两端半圆的矩形了。圆角按钮就是使用这个功能来实现。
PhotoShop里需要用插件或者形状合并才能实现的部分圆角效果,在Android里实现比较简单。
❺ 为什么android手机打不开h5页面
有两种可能,一种是你的android系统版本不够高,版本2.几及以下的对H5的支持不够好,另一种可能是那个H5页面加载太慢了,网络不够好,没加载出来!
❻ android h5什么意思
html5,其实就是在android上用网页代替原生技术开发
❼ android中怎么给h5界面设置点击监听
android监听事件添加动作的三种方式:
第一种也是最开始就接触的方式,通常在activity组件的oncreate事件中直接定义,直接动作。这种方式每个控件都定义一次,通常不方便.
});
第二种通常是在activity组件实现其接口,这样可以多外控件共享一个接口,这样相对方便
第三种类似第二种,这样的好处在于如果需要实现多个监听接口,这样更清晰
❽ 安卓系统H5点开为什么没有声音
1、安卓系统H5点开没有声音,个系统是没有关系的,可能是手机音量关闭到最低或设置为静音状态。
2、手机软件音量调到最低状态了,只需要通过音量调节就可以了。
❾ android嵌入h5,怎么交互
Android和H5之间的交互
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
//例如:加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/test.html")
//例如:加载网页
mWebView.loadUrl("http://www..com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnabled(true);
若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代码如下:
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定义完这个方法后再调用mWebView.addJavascriptInterface()方法:
mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么来调用呢?
<script type="text/javascript">
function s(){
//调用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判断url拦截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android调用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">调用本地方法</button>
<a href="file:///android_asset/test2.html">点击</a>
<p id="p"></p>
</body>
</html>