安卓WebView介绍

最新推荐文章于 2021-08-06 22:49:59 发布

好男儿心胸像大海

最新推荐文章于 2021-08-06 22:49:59 发布

阅读量592

点赞数

分类专栏：安卓 web前段

本文链接：https://blog.csdn.net/wangyi201212/article/details/43533505

版权

web前段同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

安卓

9 篇文章 0 订阅

订阅专栏

在安卓手机中，内置了一款高性能的webkit浏览器，在SDK中封装成了WebView组建，可以加载html页面。那么WebView是如何使html与安卓进行交互的呢？也就是说，安卓可以调用html中的函数，html也可以调用安卓的函数；前提是我们对安卓，html，js，jquery都比较熟悉；

一.先上效果图，知道是怎么回事：

1.第一副图中有两个按钮，第一个是html中的按钮，第二个是安卓中的按钮

2.当点击了第一个按钮时，html调用安卓中的函数，安卓中的函数返回值为1，将返回值写入html中 , 如下图所示

3. 当点击了第二个按钮时，安卓代码调用了html中的函数，并传递了一个参数1，传递过来之后，将参数写入html中 , 如下图所示

二.注意事项：

1.html文件应该放在assets文件夹里面

2.在AndroidManifest.xml文件必须加上

<uses-permission android:name="android.permission.INTERNET"/>

否则会报Web page not available错误

3.mWebView.getSettings().setJavaScriptEnabled(true)，必不可少；

4.如果你的安卓版本level大于等于17时，必须要在安卓被调用的函数前面写注解：

@JavascriptInterface

三.html代码：

<span style="font-size:12px;color:#000000;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
   <script>
        function fun(){
           document.getElementById("p").innerHTML = window.demo.one();//调用安卓函数，并返回1
        }
        
        function wave(){//被安卓函数调用
             document.getElementById("p1").innerHTML = 2;
        }
   </script>
   <body>
            <p id="p"></p>
	    <button οnclick="fun()">js调用安卓函数</button><!--第一个按钮-->
	    </br>
	    <p id="p1"></p>
    </body>
</html></span>

四.安卓布局文件：

<span style="font-size:12px;color:#000000;"><?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    >    
    <WebView   
        android:id="@+id/webview" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
    /> 
   <Button //第二个按钮
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="安卓调用js函数"
   >
   </Button>
</LinearLayout> 

</span>

五.安卓代码：

  {
    <span style="font-size:12px;color:#000000;">WebView mWebView = null;
	Button button = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mWebView = (WebView)findViewById(R.id.webview);
		button = (Button)findViewById(R.id.btn);
		button.setOnClickListener(new OnClickListener() {		
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				<span style="color:#6633FF;">mWebView.loadUrl("javascript:wave()");/</span>/<span style="color:#6633FF;">安卓调用html中的函数</span>
			}
		});
		<span style="color:#3366FF;">//设置webview能够执行javascript语句；</span>
		mWebView.getSettings().setJavaScriptEnabled(true);
		
		<span style="color:#3333FF;"><span style="background-color: rgb(255, 255, 255);">//给js要调用的函数创建一个对象，并设置一个别名；</span></span>
		mWebView.addJavascriptInterface(new ProxyBridge(), "demo");
		
		mWebView.loadUrl("file:///android_asset/index.html");
		<span style="color:#3333FF;">//webView响应超链接:点击超链接之后会在同一个浏览器页面显示，而不是从新打开一个浏览器；</span>
		mWebView.setWebViewClient(new HelloWebViewClient ());
	}
	<span style="color:#3366FF;">//如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，
	//如果希望浏览的网 页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
	@Override</span>
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub
		if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
			mWebView.goBack();
			return true;
		}
		return false;
	}
	
	public class HelloWebViewClient extends WebViewClient{
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			view.loadUrl(url);
			return super.shouldOverrideUrlLoading(view, url);
		}
	}
	<span style="color:#000099;">public final class ProxyBridge{
		@JavascriptInterface//安卓版本过高的话一定要加此注解
		public int one(){</span></span><span style="font-size:12px;color:#000000;"><span style="color:#000099;">//被html调用的安卓函数</span></span>
	    <span style="font-size:12px;">  return 1; 
	    }
	}</span>