WebView基础

介绍

如果我们需要在应用程序中展示一些页面，只需要简单的使用一下WebView控件就可以了。

WebView展示百度页面

效果图
WebView基础
1.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/wv_baidu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

2.MainActivity

public class MainActivity extends AppCompatActivity {

    private WebView wv_baidu;
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv_baidu = findViewById(R.id.wv_baidu);
        //让WebView支持JavaScript脚本
        wv_baidu.setWebViewClient(new WebViewClient());
        //传入网址
        wv_baidu.loadUrl("http://www.baidu.com");
    }

    @Override
    protected void onDestroy() {
        wv_baidu.destroy();
        wv_baidu=null;
        super.onDestroy();
    }
}

3.清单文件添加权限

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

这时候打开程序就有效果了~

更多设置

设置之前先介绍两个类

WebViewClient

主要帮助WebView处理各种通知、请求事件的，有以下常用方法
onPageFinished 页面请求完成
onPageStarted 页面开始加载
shouldOverrideUrlLoading 拦截url
onReceivedError 访问错误时回调，例如访问网页时报错404，在这个方法回调的时候可以加载错误页面

WebChromeClient

主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，有以下常用方法
onJsAlert webview不支持js的alert弹窗，需要自己监听然后通过dialog弹窗
onReceivedTitle 获取网页标题
onReceivedIcon 获取网页icon
onProgressChanged 加载进度回调

1.创建WebViewClient实例

private WebViewClient webViewClient = new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            //页面开始加载
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            //页面加载完成
            super.onPageFinished(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            //处理其他情况，比如国内不能访问google,拦截该url
            return super.shouldOverrideUrlLoading(view, request);
        }
    };

2.创建WebChromeClient实例

private WebChromeClient webChromeClient =new WebChromeClient(){
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            //加载进度回调
            super.onProgressChanged(view, newProgress);
        }

        @Override
        public void onReceivedTitle(WebView view, String title) {
            //获取网页标题
            super.onReceivedTitle(view, title);
        }

        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            //因为WebView不支持alert弹窗，在这个方法中用AlertDialog去弹窗
            return super.onJsAlert(view, url, message, result);
        }
    };

3.设置WebViewClient和WebChromeClient

wv_baidu.setWebViewClient(webViewClient);
wv_baidu.setWebChromeClient(webChromeClient);

JS交互

这里通过 WebView的addJavascriptInterface() 进行 对象映射

1.创建myjs.html放在src/main/assets下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Carson</title>
        <script>
             function callAndroid(){
                // 由于对象映射，所以调用test对象等于调用Android映射的对象
                test.hello("js调用了android中的hello方法");
             }
        </script>
    </head>
    <body>
        <button type="button" id="button1" onclick="callAndroid()">点击调用安卓代码</button>
    </body>
</html>

2.创建AndroidtoJs类，在里面写JS所需要调用的方法

    public class AndroidtoJs  {
        // 定义JS需要调用的方法
        // 被JS调用的方法必须加入@JavascriptInterface注解
        @JavascriptInterface
        public void hello(String msg) {
            Toast.makeText(MainActivity.this, "JS调用了Android的hello方法", Toast.LENGTH_SHORT).show();
        }
    }

3.设置一下

//可以与JS进行交互
wv_baidu.getSettings().setJavaScriptEnabled(true);
// 通过addJavascriptInterface()将Java对象test映射到JS对象
wv_baidu.addJavascriptInterface(new AndroidtoJs(),"test");
//设置一下路径，标准格式如下
wv_baidu.loadUrl("file:///android_asset/myjs.html");

效果

WebView基础

完结~

https://blog.****.net/lowprofile_coding/article/details/77928614
https://blog.****.net/carson_ho/article/details/64904691/

介绍

WebView展示百度页面

更多设置

JS交互

效果

相关推荐