王学岗WebView（一）

最新推荐文章于 2025-03-25 19:51:22 发布

qczg_wxg

最新推荐文章于 2025-03-25 19:51:22 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： webkit

本文链接：https://blog.youkuaiyun.com/qczg_wxg/article/details/52747948

android 专栏收录该内容

134 篇文章

订阅专栏

本文介绍WebView在Android开发中的应用，包括加载网页、与JavaScript交互、自定义下载行为及错误处理等核心功能。

一：WebView 作用:
1,打开网页(网络，本地)
2,网页Js和Android通讯
3,Android执行js函数

用HTML ,css javascript 来开发Android界面
anroid内置的浏览器引擎：webkit

优点：
1，跨平台（一次编写多处运行）
2，便于更新，只需要更新服务端，不需要跟新客户端，比如淘宝页面更新了，我们不需要跟新我们的浏览器（比较：android app每次更新都要下载更新包）

缺点：
1，消耗流量，因为需要联网
2，慢（先前58同城app用的就是html做的,启动很慢，因为html要启动操作相应的硬件，比如：传感器相机…）
3, 耗电

二：我们来学习下webview的三种功能，
打开网页分为两种情况，一是网络的，一是本地的。
我们先看下网络的；
这是我们工程的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/wb_webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

</RelativeLayout>

这是我们的代码：

package com.example.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView wv_WebView;


	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv_WebView = (WebView) findViewById(R.id.wb_webview);
        /**
         * 1，打开网页(本地、网络);
         * 调用android内置的浏览器引擎：webkit,其实就是打开了一个浏览器
         */
        wv_WebView.loadUrl("http://www.baidu.com");
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

三：在第二点中，我们用浏览器打开，这样的用户体验不好，我们试着不用浏览器打开

package com.example.test_webview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final WebView webView = (WebView) findViewById(R.id.wb_web);
        //webView.loadUrl("http://www.baidu.com");
       //loadUrl默认是通过浏览器打开网页，为了避免这种情况我们设置自己WebViewClient
       webView.setWebChromeClient(new WebChromeClient());
         webView.setWebViewClient(new WebViewClient());
           webView.loadUrl("http://www.baidu.com");
    }
}

四：我们在实现下这个效果，手机界面显示浏览器网页的标题，我们先修改下布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="refresh"
            android:text="刷新"/>
        <TextView
            android:id="@+id/tv_show"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="网页信息"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="back"
            android:text="返回"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <WebView
        android:layout_width="match_parent"
        android:id="@+id/wb_web"
        android:layout_height="match_parent"></WebView>

</LinearLayout>

看下代码

package com.example.test_webview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private TextView tv_show;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.wb_web);
        tv_show = (TextView) findViewById(R.id.tv_show);
        webView.loadUrl("http://www.baidu.com");
         
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
 ／／设置标题
                tv_show.setText(title);
                super.onReceivedTitle(view, title);
            }
        });
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                webView.loadUrl("http://www.baidu.com");
                return super.shouldOverrideUrlLoading(view, request);
            }
        });
    }

    public void refresh(View view) {
        webView.reload();
    }

    public void back(View view) {
        finish();
    }
}

这里写图片描述

五：实现下载的监听，点击到下载的界面，比如百度助手，就可以下载文件了，

   //实现下载需要实现该接口，当有下载任务时候会回调该方法
        webView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition,
                                        String mimeType, long contentLength) {
                System.out.println("下载监听");
               Uri uri=Uri.parse(url);
               Intent intent=new Intent(Intent.ACTION_VIEW,uri);
               startActivity(intent);
            }
        });

当然，我们也可以自己定义一个下载的线程，可以把要下载文件的地址写上，我这里直接下载到文件里，当然你们也可以下载到SD卡

  //实现下载需要实现该接口
        webView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition,
                                        String mimeType, long contentLength) {
                System.out.println("下载监听");
                new HttpThread(url, MainActivity.this).start();

            }
        });

HttpThread类如下

package com.example.test_webview;
/*
 *下载肯定需要实现一个线程，这个就是下载的线程
 **/

import android.content.Context;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;

public class HttpThread extends Thread {
    private String myurl;
    private Context context;

    //通过构造方法传进来URL
    public HttpThread(String url,Context context) {
        this.myurl = url;
        this.context=context;
    }

    @Override
    public void run() {
        super.run();
        System.out.println("开始下载");
        try {
            URL url=new URL(myurl);
            HttpURLConnection httpURLConnection= (HttpURLConnection) url.openConnection();
            httpURLConnection.setDoInput(true);
            httpURLConnection.setDoOutput(true);
            InputStream inputStream=httpURLConnection.getInputStream();
            //设置下载目录,可以选择下载到sdk，我直接下载到文件
            String fileName="downLoad.txt";
            FileOutputStream fileOutputStream=context.openFileOutput(fileName,Context.MODE_APPEND);
            byte[] bytes=new byte[5*1024];
            int len=0;
            while((len=inputStream.read(bytes))!=-1){
                 fileOutputStream.write(bytes);
            }
            inputStream.close();
            fileOutputStream.close();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        System.out.println("下载成功");
    }
}

下载到SD卡，不完整，自己参照补全了
这里写图片描述

这里写图片描述

六：webView的错误码的处理，当webView遇到错误的时候，我们让webView加载我们制定的html页面。下面看下代码

 webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                webView.loadUrl("http://shouji.baidu.com/software/23806488.html");
                return super.shouldOverrideUrlLoading(view, request);
            }
／／当发生错误时会回调该方法
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                //注意格式是固定的，这是我们保存在assets目录下的html
                webView.loadUrl("file:///android_asset/myhtml.html");
            }
        });

看下运行效果
这里写图片描述
这个图片很丑，当然，读者可以定义一张耕精美的图片
注意在android studio中assets的目录如下