Android中WebView渲染显示web页面

最新推荐文章于 2024-06-25 09:56:19 发布

大煤球

最新推荐文章于 2024-06-25 09:56:19 发布

阅读量1w

点赞数 1

分类专栏： React Native

本文链接：https://blog.csdn.net/chendi1992/article/details/77885483

版权

本文探讨了在Android开发中使用WebView展示web内容的方法，包括加载在线和本地HTML页面，以及Java与JavaScript的交互。同时，介绍了多个关键方法，如设置缩放、媒体播放、加载策略等，以提升WebView的性能和用户体验。

摘要由CSDN通过智能技术生成

最近在看web APP的开发，Android开发中经常会嵌入web页面，

h5 css3 javascript 通过WebView渲染的方式，性能损耗较大

今天看了一些关于WebView的资料，也动手敲了下，在此记录下。

WebView组件的功能

可以直接显示网页

可以显示本地html页面，通过html来布局

java和js之间可以交互

1、加载在线网页

在布局文件中加入WebView标签
接着通过java代码实现显示在线网页

   webView=(WebView)findViewById(R.id.webview);
//        允许解析js
        WebSettings settings=webView.getSettings();
        settings.setJavaScriptEnabled(true);
//        优先使用缓存
        settings.setCacheMode(settings.LOAD_CACHE_ELSE_NETWORK);
//        设置此属性，可任意比例缩放
        settings.setUseWideViewPort(true);
//        适应webview
        settings.setLoadWithOverviewMode(true);
//        设置可以支持缩放
        settings.setSupportZoom(true);
//      设置出现缩放工具
        settings.setBuiltInZoomControls(true);
//        手势焦点
        webView.requestFocusFromTouch();
//      打开内置浏览器
        WebViewClient webViewClient=new WebViewClient();
        webView.setWebViewClient(webViewClient);
        webView.loadUrl("http://www.baidu.com");

别忘了添加网络权限

2、显示本地html页面

在布局文件中加入WebView标签
在assets资源文件中新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h1>Hello</h1>
   
</head>
<body>
   
</body>
</html>

加载html文件

webView.loadUrl("file:///android_asset/web.html");

3、java和js交互

js调用Java的方法

首先要新建一个类用于和js交互，类中的方法前要加入如下注解。

public class JsBrager {

    @JavascriptInterface
    public void toastMessage(String message) {
        Toast.makeText(MyApplication.getContext(), "通过Natvie传递的Toast:" + message, Toast.LENGTH_LONG).show();
    }

接着在主Activity中加入如下代码

 webView.addJavascriptInterface(new JsBrager(),"demo");

这里面有两个参数，第一个为我们自定义类的对象，第二个参数为对象的别名，在js中通过这个别名来调用类中的方法。

然后在html文件中加入一个按钮，并添加事件。在事件方法中调用java中的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h1>Hello</h1>
    <input type="button" value="js use java" οnclick="ok()">
</head>
<body>
    <script type="text/javascript">
        function ok()
        {
            demo.toastMessage("hello");
        }
      
    </script>
</body>
</html>

java调用js

首先在html中加入一个方法

function sum(i,m)
        {
            var result = i+m;
         }

然后在Activity中通过loadUrl方法来调用该方法

webView.loadUrl("javascript:sum(10,3)");

这里的javascript:是一个伪协议，sum(10,3)为js里的方法。

这样虽然调用了js中的方法，但是我想获得js返回的结果怎么办呢

public class JsBrager {

    @JavascriptInterface
    public void toastMessage(String message) {
        Toast.makeText(MyApplication.getContext(), "通过Natvie传递的Toast:" + message, Toast.LENGTH_LONG).show();
    }

    @JavascriptInterface
    public void onSumResult(int result) {
        Log.i("------>", "onSumResult result=" + result);
    }
}

这里有两种方法

第一种就是在js中法中再调用java中的方法

 function sum(i,m)
        {
            var result = i+m;
            demo.onSumResult(result);
         }

第二种就是Android 4.4 以后的方法 evaluateJavascript方法

function getGreetings()
         {
             return 1;
         }

java

webView.evaluateJavascript("getGreetings()", new ValueCallback() {
            @Override
            public void onReceiveValue(Object o) {
                Log.i("------>", "onReceiveValue value=" + o);
            }

        });

附录：WebView基本设置

/**
* 是否支持缩放，配合方法setBuiltInZoomControls使用，默认true
*/
setSupportZoom(boolean support)
/**
* 是否需要用户手势来播放Media，默认true
*/
setMediaPlaybackRequiresUserGesture(boolean require)
/**
* 是否使用WebView内置的缩放组件，由浮动在窗口上的缩放控制和手势缩放控制组成，默认false
*/
setBuiltInZoomControls(boolean enabled)
/**
* 是否显示窗口悬浮的缩放控制，默认true
*/
setDisplayZoomControls(boolean enabled)
/**
* 是否允许访问WebView内部文件，默认true
*/
setAllowFileAccess(boolean allow)
/**
* 是否允许获取WebView的内容URL ，可以让WebView访问ContentPrivider存储的内容。默认true
*/
setAllowContentAccess(boolean allow)
/**
* 是否启动概述模式浏览界面，当页面宽度超过WebView显示宽度时，缩小页面适应WebView。默认false
*/
setLoadWithOverviewMode(boolean overview)
/**
* 是否保存表单数据，默认false
*/

最低0.47元/天解锁文章

大煤球

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Android中WebView渲染显示web页面

最近在看web APP的开发，Android开发中经常会嵌入web页面，h5 css3 javascript 通过WebView渲染的方式，性能损耗较大。今天看了一些关于WebView的资料，也动手敲了下，在此记录下。WebView组件的功能
复制链接

扫一扫

专栏目录