您的位置：首页 > 移动开发 > Android开发

Android和HTML5混合开发

2016-11-05 12:57 183 查看

Android和HTML5混合开发，废话不多说开干：

下面HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<style type="text/css">
input{
width: 100%;
margin: 20px;
margin-right: 20px;
height: 200px;
font-size: 50px;
background: #00ff00;
color: #fff;
}

#input{
background: #fff ;
color: #000;
border:0px;
}
</style>
</head>
<body>
<input  type="button" name="开启系统照相机" value="开启系统照相机" onclick="onclicks()">

<input type="button" name="" value="获取电话号码" onclick="getiphone()">

<input type="text" name="text" id="input">

<script type="text/javascript">

function getiphone()
{
location.href="dmr:getiphone";
}

function onclicks() {
//alert("这几是web的alert弹框！！!");
location.href = 'dmr:showcamera';
}

function callback(ihpone)
{
document.getElementById("input").value="电话号码是："+ihpone;
//alert("电话号码是："+ihpone);
}

function js(hello)
{
alert(hello+"");
}

</script>
}

</body>
</html>

location.href：是的html转场景

dmr:getiphone：是Android端和HTML端定义的协议；定义需要Android和HTML自定义一个为协议，是两端之间的通信协议；

下面是Android代码：

package com.vson.webapp;

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
private 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);
WebSettings webSettings = mWebView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(true);
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setGeolocationEnabled(true);
mWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null);//设置硬件加速
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webSettings.setLoadWithOverviewMode(true);
//开浏览器 localStorage 存储用的
webSettings.setDomStorageEnabled(true);

webSettings.setSupportZoom(false);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setWebViewClient(new MyWebViewClient());
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mWebView.setWebContentsDebuggingEnabled(true);
}

mWebView.loadUrl("http://192.168.1.104:3000/index.html");

}

public void onClickButton(View v)
{
String str ="你好";
mWebView.loadUrl("javascript:js('"+str+"')");
}

public class MyWebViewClient extends WebViewClient{

@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
/**
* 规则是所有的指令都是以dmr:开头；
* dmr:showcamera  ->展示摄像头
* dmr:getiphone   ->拿到电话号码
*
*
*/
if(url.startsWith("dmr:"))
{
if("showcamera".equals(url.substring(4)))
{
Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
startActivity(intent);
return true;
}else if("getiphone".equals(url.substring(4)))
{

mWebView.loadUrl("javascript:callback(15755170689)");
return true;
}
}
//Log.d(TAG, "shouldOverrideUrlLoading: "+url);
return super.shouldOverrideUrlLoading(view, url);
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {

return super.shouldOverrideUrlLoading(view, request);

}
}

}

public boolean shouldOverrideUrlLoading(WebView view, String url):在点击HTML点击按钮发送转场指令的时候，Android拦截HTML的指令，处理命令

mWebView.loadUrl("javascript:callback(15755170689)");回调给HTML页面，就是把Android处理好的信息给HTML显示处理等等

上面只是描述一个简单的原理，有兴趣的话可以把WebView简单的自定义一下，处理成一个小控件

希望对大家有帮助，谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android html 混合开发

相关文章推荐

新的分享

章节导航