安卓開發基礎技術——WebView載入網頁

語言: CN / TW / HK
時間 2022-12-04 03:15:10

theme: cyanosis

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

前言

最近工作上需求變得簡單，因為是接H5網頁到APP展示，所以，內容不需要我們客戶端去編寫了，只需要將網頁在APP內展示出來即可，所以用到了WebView(網頁檢視),正好聊聊工作上遇到的問題與解決方法，也正好更新一下本基礎必備系列。

本篇就是說明如何用WebView去載入網頁的，是基礎但也是必須掌握的知識內容，下面就讓我們看看WebView的用法。

正篇

基礎用法

其實WebView的使用是十分簡單的，和編輯檢視（EditView）和文字檢視（TextView）等大多數檢視一樣，首先我們需要將檢視新增在Activity或Fragment的佈局中，下面就是在XML佈局中新增的Demo程式碼： XML <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"/> XML新增好後，我們還需要在Activity中去呼叫它的方法，程式碼如下： ```Kotlin class MainActivity : AppCompatActivity() { @SuppressLint("SetJavaScriptEnabled") override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root) binding.webView.settings.javaScriptEnabled = true binding.webView.loadUrl("http://juejin.cn/")

}

} ``` 使用webView.settings.javaScriptEnabled可以確認是否使用Js互動，一般用到Js都給打開了，即置為true

我們訪問的是網路資源，所以需要使用網路許可權，在AndroidManifest.xml清單檔案中新增上網路許可權：

image.png <uses-permission android:name="android.permission.INTERNET"/> 寫好以上步驟的程式碼後執行就可以看到如下效果：

image.png

我們成功在App內訪問了掘金網站，基礎用法就結束了。

WebView的其他常用方法

說完WebView的一般使用方法，那我們也要看看其他在開發中常用的方法，開發中我們通常需要配合需求與服務端對網頁的一些行為進行控制，比如H5網頁載入的一些互動，所以下面我們就著重講述這方面的方法。 本例子專案工程檔案已經放在GitHub上，地址為：http://github.com/AndroidStudyman/StudyDemo.git ，下面是基於之前的Demo工程（詳見 安卓UI設計開發——Material Design(BottomSheetDialogFragment篇) - 掘金 (juejin.cn)）在ImageView上增加點選跳轉事件到該WebView頁面：

image.png image.png

```XML

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

繼續使用上面基礎用法的XML用法，但在Activity中呼叫方法，程式碼如下：Kotlin class WebViewTest : AppCompatActivity() {

private lateinit var binding: ActivityWebViewTestBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityWebViewTestBinding.inflate(layoutInflater)
    setContentView(binding.root)
    initWeb()
}

private fun initWeb() {
    val setting = binding.vWebView.settings
    setting.javaScriptEnabled = true
    setting.javaScriptCanOpenWindowsAutomatically = true
    binding.vWebView.webChromeClient = object : WebChromeClient() {
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            Log.i("onPageStarted", "頁面載入")
            super.onProgressChanged(view, newProgress)
        }

        override fun onShowFileChooser(
            webView: WebView?,
            filePathCallback: ValueCallback<Array<Uri>>?,
            fileChooserParams: FileChooserParams?
        ): Boolean {
            Log.i("onShowFileChooser", "檔案處理")
            return true
        }
    }
    binding.vWebView.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(
            view: WebView?,
            request: WebResourceRequest?
        ): Boolean {
            Log.i("shouldOverrideUrl", "頁面處理：" + view!!.url)
            return super.shouldOverrideUrlLoading(view, request)
        }

        override fun shouldInterceptRequest(
            view: WebView?,
            request: WebResourceRequest?
        ): WebResourceResponse? {
            return super.shouldInterceptRequest(view, request)
        }
    }
    loadWeb()
}

private fun loadWeb(){
    binding.vWebView.loadUrl("http://juejin.cn/")
}

} ``` 我們首先將之前寫在Activity的WebView呼叫方法包裝到initWeb()方法與loadWeb()方法裡，然後在onCreate方法裡呼叫initWeb()方法即可。

webChromeClient與webViewClient

在initWeb()方法中我們可以看到新增了webChromeClient與webViewClient方法，其中webChromeClient是用來幫助WebView處理各種Js的互動事件，比如上面程式碼中的：\ onProgressChanged是用來獲取網頁的載入進度，可以控制進度的顯示效果（比如可以在Webwiew佈局下加一個ProgressBar，用來控制進度顯示和進度動畫樣式等）\ onShowFileChooser可以呼叫它來處理具有“file”輸入型別的 HTML 表單，以響應使用者按下“Select File”按鈕，因為安卓現在呼叫相機需要許可權所以一般需要在這個方法裡新增使用者許可權的對話以獲取許可權從而再進行拍照等後續操作。

webViewClient中我們可以處理一些通知以及響應事件，在開發中我們經常會在其中使用shouldOverrideUrlLoading()方法用來處理載入網頁時候的一些對URL的操作，即當 URL 即將載入到當前 WebView 的時候，讓我們有機會進行控制。\ 如果未提供 WebViewClient，預設情況下 WebView 將要求 Activity Manager 為 URL 選擇正常載入機制。\ 如果提供了 WebViewClient，則返回true會導致當前 WebView 中止載入 URL，而返回false會導致 WebView 照常繼續載入 URL，我們就可以主動主動返回true來選擇對URL操作，比如不用瀏覽器開啟URL而是在當前WebView載入。

還有一點需要注意，目前shouldOverrideUrlLoading(WebView view, String url)方法已經廢棄，需要採用上面的方法，不過在上面的程式碼中也給出了獲取url的方法： Kotlin view!!.url

image.png

返回網頁上一頁與退出WebView

我們在WebView中通常訪問網頁會點選進入多頁面訪問，這時候我們返回通常需要的是返回上一頁web頁面而不是關閉整個網頁，所以就有以下處理，呼叫WebView的goBack()方法： Kotlin override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean { if (keyCode == KeyEvent.KEYCODE_BACK && binding.vWebView.canGoBack()) { binding.vWebView.goBack(); return true; } return super.onKeyDown(keyCode, event) } 而在退出WebView是一定要記得銷燬它，如下處理： override fun onDestroy() { //載入空的 binding.vWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null); //清楚歷史記錄，看情況 binding.vWebView.clearHistory(); //銷燬 binding.vWebView.destroy(); super.onDestroy() }

總結

以上就是WebView的基礎使用方法和日常用到的方法，此外還有一些如onReceivedError（） 方法用於頁面載入錯誤更換提示之類的方法我們在文章中未提到，後續有關WebView還會慢慢新增到本文中，方便回顧與學習。

「」
「」