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簡單的自定義一下，處理成一個小控件
希望對大家有幫助，謝謝