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://mswzjz.cn/article/dscisgo.html