首页 » 技术分享 » Android和HTML5混合开发

Android和HTML5混合开发

　
评论关闭　508次浏览

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="开启系统照相机" οnclick="onclicks()">

	<input type="button" name="" value="获取电话号码" οnclick="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和HTML5混合开发，转载请注明来源！

赞 0