安卓开发之WebView的使用

前言

1.什么是WebView？

Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！

2.相关方法

参考文章
https://www.runoob.com/w3cnote/android-tutorial-webview.html

一、WebView简单使用

1.1、环境准备

加入网络访问权限

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

创建一个assets文件夹用来放html网页或者一些不用编译的文件

放入一个html文件，如图所示

1.2、MyWebChromClient.java

继承WebChromeClient

package cn.zzuli.mywebview;

import android.app.Activity;
import android.content.Context;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MyWebChromClient extends WebChromeClient {

    private Activity mActivity;

    public MyWebChromClient(Activity mActivity) {
        this.mActivity = mActivity;
    }

    /**
     * 设置网页加载的进度条
     * @param view
     * @param newProgress
     */
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }

    /**
     * 设置网页标题
     * @param view
     * @param title
     */
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
//        必须在Activity的页面中设置
       mActivity.setTitle(title);
    }
}

1.3、MyWebViewClient

继承WebViewClient

package cn.zzuli.mywebview;

import android.graphics.Bitmap;
import android.util.Log;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MyWebViewClient extends WebViewClient {
    private WebView mwebView;

    public MyWebViewClient(WebView mwebView) {
        this.mwebView = mwebView;
    }

    /**
     * 设置不用本机的浏览器进行加载
     * @param view
     * @param request
     * @return
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl().toString());
        return true;
    }

    /**
     * 点击的页面开始
     * @param view
     * @param url
     * @param favicon
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Log.d("webView","onPageStarted...");
    }

    /**
     * 点击的页面加载完成
     * @param view
     * @param url
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        Log.d("webView","onPageFinished...");
        //使用JS代码
//        mwebView.loadUrl("javascript:alert('韭菜盖饭!')");
        mwebView.evaluateJavascript("javascript:alert('韭菜盖饭!')",null);
    }
}

1.4、MainActivity.java

package cn.zzuli.mywebview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView mwebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mwebView = findViewById(R.id.wv);

        //加载本地网页
        mwebView.loadUrl("file:///android_asset/test.html");

        //加载网络页面
        mwebView.getSettings().setJavaScriptEnabled(true);

        //设置自定义的MyWebViewClient
        mwebView.setWebViewClient(new MyWebViewClient(mwebView));

        //设置自定义的MyWebChromClient
        mwebView.setWebChromeClient(new MyWebChromClient(this));

        //本地写一些JS代码，网页端进行调用
//        mwebView.addJavascriptInterface();

        mwebView.loadUrl("https://m.baidu.com/");  //地址为百度移动站点
    }

    /**
     * 解决退出网页却直接退出Activity的问题
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && mwebView.canGoBack()){
            mwebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

1.5、activity_main.xml

布局文件就包含了一个WebView组件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</LinearLayout>

二、效果预览