androidh5,Android 5
安卓系统H5点开为什么没有声音
1、安卓系统H5点开没有声音,个系统是没有关系的,可能是手机音量关闭到最低或设置为静音状态。
发展壮大离不开广大客户长期以来的信赖与支持,我们将始终秉承“诚信为本、服务至上”的服务理念,坚持“二合一”的优良服务模式,真诚服务每家企业,认真做好每个细节,不断完善自我,成就企业,实现共赢。行业涉及成都集装箱等,在成都网站建设、网络营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。
2、手机软件音量调到最低状态了,只需要通过音量调节就可以了。
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
titleExmaple/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页面token失效(记录项目的一个bug)
在做项目的时候,需要在原生页面集成H5页面,本地WebView会储存网页的cookie。
cookie中会存入一些用户信息和token。
这个token是有时效性,并且请求服务端的时候,服务端会进行token校验。H5在加载的时候会将token写入cookie中,并将cookie写入对应的域(domain)名中。但是项目的域名改过,却没有将原先的cookie清除,导致又写入新的cookie。再请求服务端的时候将根路径下的cookie全上传给服务端了,服务端根据cookie中的token别名去取 token(默认第一个),但是这个排序又是无序的。导致有时会拿到错误的token。即返回登录状态失效,直接退出了。
截图如下:
H5&&Android交互
JS调用Android原生方法,参数须是Java的内置类型:int、String等,若是JavaScript对象,需字符串化,否则Android无法正确接收;
JS调用Android原生方法,返回值是内置类型:int、String等,JS能够正确接收。若是Java自定义类型,则JS接收不到正确数据;
JS可以通过Android原生方法的返回值获取内置类型的参数,如String
若需要互传复杂类型的对象,双方须以String对媒介,以各自语言的Json工具类进行相互转化;
Android端H5测试
1、手机安装Chrome浏览器
2、开启USB调试模式,并使用安装的Chrome浏览器打开待测H5页面
3、在电脑端的Chrome浏览器输入chrome://inspect
4、打开链接后,选中 Discover USB devices,可以看到监测到的设备,然后点击inspect,弹出页面后,就可以审查页面上的元素了(备注:在第一次使用该工具时,打开会是空白页面,需要fq后再次运行该工具。)
5、之后就是Chrome开发者工具了,问开发怎么浪
6、brew install ios-webkit-debug-proxy 用这个可以实现Chrome DevTool调试iOS设备(还没有尝试)
android嵌入h5,怎么交互
Android和H5之间的交互
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
//例如:加载assets文件夹下的test.html页面
mWebView.loadUrl("")
//例如:加载网页
mWebView.loadUrl("")
如果只是这样调用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 ValueCallbackString() {
@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("")) {
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("");
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("")) {
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 ValueCallbackString() {
@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=""点击/a
p id="p"/p
/body
/html
文章名称:androidh5,Android 5
本文路径:http://ybzwz.com/article/dscisgo.html