Android Webview 使用

1、Webview是什麼

• 可以加載網頁
• js可與原生通訊

2、API如何用

AndroidManifest.xml 添加網路權限

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

xml布局檔案

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

2.0、加載url的幾種方式

  //1. 加載一個網頁
  webView.loadUrl("http://www.baidu.com/");
  //2. asset中的html頁面
  webView.loadUrl("file:///android_asset/1.html");
  //3. 加載本地的html頁面
   webView.loadUrl("content://com.android.htmlfileprovider/sdcard/1.html");
  //4. 加載HTML片段的一小段內容
  WebView.loadData(String data, String mimeType, String encoding)

2.1、設定cookie

通常cookie會放置一些app的基本資訊 比如：

• 包名
• 版本號
• 版本名稱
• 設備型別
• 用戶token

private void setCookie(String url) {
    CookieSyncManager.createInstance(this);
    CookieManager cookieManager = CookieManager.getInstance();
    cookieManager.setAcceptCookie(true);
    //value的格式為   key=value  key：元資料標識，value元資料的值
    cookieManager.setCookie(url, "token=123456");
    if (Build.VERSION.SDK_INT < 21) {
        CookieSyncManager.getInstance().sync();
    } else {
        CookieManager.getInstance().flush();
    }
}

2.2、js與原生互動

配置

WebSettings webSettings = mWebView.getSettings();
// 設定與Js互動的權限
webSettings.setJavaScriptEnabled(true);

2.2.1、js呼叫android

注冊一個JavascriptInterface

mWebView.addJavascriptInterface(new AndroidHandler(), "android");

AndroidHandler.java

class AndroidHandler {
    @JavascriptInterface
    public void test(String msg) {
        System.out.println("AndroidJs:test->" + msg);
        Toast.makeText(WebViewActivity.this, msg, Toast.LENGTH_SHORT).show();
    }
}

在js中呼叫android的方法

function callAndroidByJavascriptInterface(){
       android.test("js呼叫了android中的test方法");
}

2.2.2、android呼叫js

js的函式

function callJS(){
   return "js回傳資訊:callJS";
}

android呼叫js方法

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>(){

            @Override
            public void onReceiveValue(String value) {
                //value 為js回傳的引數資訊
            }
        });
} else {
    webView.loadUrl("javascript:callJS()");
}

2.3、常用的監聽函式

WebViewClient

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        //回傳true表示url已經被當前應用處理，如果為false 則會打開系統瀏覽器加載
        return true;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        //頁面開始加載
        mProgressBar.setVisibility(View.VISIBLE);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //頁面加載完成
        mProgressBar.setVisibility(View.GONE);
    }
});

WebChromeClient

mWebView.setWebChromeClient(new WebChromeClient() {

    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        //頁面加載進度更新
        mProgressBar.setProgress(newProgress);
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        //網頁的標題
        mQToolbar.setTitle(title);
    }
});

3、需要注意的幾個地方

@Override
public void onBackPressed() {
    //解決不能回退問題
    if (mWebView.canGoBack()) {
        mWebView.goBack();
        return;
    }
    super.onBackPressed();
}

@Override
public void onPause() {
    super.onPause();
    //暫停
    mWebView.onPause();
}


@Override
public void onResume() {
    super.onResume();
    //恢復
    mWebView.onResume();
}

@Override
public void onDestroy() {
    super.onDestroy();
    //銷毀
    mWebView.destroy();
}