WebView的基本用法以及和js交互

来源：互联网发布：云笔记本知乎编辑：程序博客网时间：2024/05/18 01:34

最近公司要求尽量少用原生态的一些页面来开发，因为原生态的页面可能在处理某一些复杂的业务的时候可能不会那么的方便。而是在服务端做一些页面，通过webView加载到移动端，这样的话对于版本的迭代、逻辑的更改都带来了极大的便利！这样对于Android端和IOS或者Winphone开发人员来说，可能要求就不会那么高！但是这里并不是说将所有的页面都通过webView 来加载，需要根据各自的业务需求来决定，有一些页面还是要本地化的，比如说登陆、注册之类的。好了，那我们就进入今天的正题吧。。。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

WebView就是封装在SDK中的一个组件，既然是组件，那么我们就有两种方式使用它，第一种是在xml文件中配置，第二种就是直接用代码new出来。这里我就介绍第一种使用的方式。

布局文件是：

<?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="match_parent"         android:layout_height="match_parent"         /> </LinearLayout>

MainActivity中的代码是：

public class MainActivity extends Activity {private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = (WebView) this.findViewById(R.id.webview);//这里是加载互联网的网页//如果想加载本地的网页可以使用loadUrl("file:///android_asset/xxx.html");//注意本地的文件是放在asset文件夹下的mWebView.loadUrl("http://www.baidu.com");//如果页面中有链接，希望点击链接继续在当前的webkit浏览器中打开，而不是使用系统的浏览器打开，//就必须覆盖webView的WebViewClient对象，并且重写shouldOverrideUrlLoading方法mWebView.setWebViewClient(new WebViewClient(){public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});}/** * 如果不做任何处理,浏览网页,点击系统“Back”键,整个 Browser 会调用 finish()而结束自身, * 如果希望浏览的网页回退而不是推出浏览器,需要在当前 Activity 中处理并消费掉该 Back 事件. */@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()){mWebView.goBack();return true;}return super.onKeyDown(keyCode, event);}}

特别注意：在使用webView 的时候一定要记得在清单文件中配置访问网络的权限，

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

对于WebVIew其实还有很多的属性可以设置，在这里就不一一给大家展示，可以自行根据需要去查询。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面就说说webView和JS之间的交互吧，使用java调用页面中的js代码就直接使用loadUrl可以直接调用，那么在js中调用java代码就需要在java代码中暴露出一个借口，让js来调用！这样说可能大家有点听的云里雾里的，下面直接上代码：

首先我们在asset目录下新建一个test.html文件：

test.html文件内容如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script language="javascript">        /* This function is invoked by the activity */        function wave() {           document.getElementById("droid").innerHTML="jsCallJava";        }                function test(data){        document.getElementById("droid").innerHTML=data;        }    </script></head><body><a onclick="window.demo.jsCalljava()">js调用java代码</a><br/><br/><a onclick="window.demo.jsCalljava('test')">js调用java代码带参数</a><br/><br/><div id="droid"></div></body></html>

然后MainActivity代码：

public class MainActivity extends Activity {private WebView mWebView;@SuppressLint("JavascriptInterface")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = (WebView) this.findViewById(R.id.webview);//加载本地的网页可以使用loadUrl("file:///android_asset/xxx.html");//注意本地的文件是放在asset文件夹下的mWebView.loadUrl("file:///android_asset/test.html");//设置支持jsmWebView.getSettings().setJavaScriptEnabled(true);//定义一个接口,页面中的js可以使用window.demo.方法名来调用java中的方法mWebView.addJavascriptInterface(this, "demo");}public void jsCalljava(){runOnUiThread(new Runnable(){public void run(){mWebView.loadUrl("javascript:wave()");}});}public void jsCalljava(final String data){runOnUiThread(new Runnable(){public void run(){mWebView.loadUrl("javascript:wave('"+data+"')");}});}}

最后记得在清单文件中加入权限。

在js调用java代码中，我们最好使用真机来进行测试，我之前使用模拟器来进行调试的时候，模拟器中是无法看见效果的，但是真机上可以出现！

枫

0 0