android开发，使用kotlin学习WebView（详细）

╰+哭是因爲堅強的太久メ 2024-04-08 11:17 94阅读 0赞

随着后台技术的不断发展，App前端的应用都布置了Web页面的界面，这个界面就是由WebView组件渲染出来的。WebView由如下优点：可以直接显示和渲染Web页面或者网页；可以直接调用网络上或者本地的html文件，也可以和JavaScript交互使用。

**1、WebView类提供的常用方法**

![61443b19d0604093a0a83e35345fad2d.jpeg][]

**2、 WebView的简单用法实现浏览网页**

步骤：

布局文件

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

MainActivity.kt文件

1、启用JavaScript的支持

调用WebSetting类的setJavaScriptEnabled()方法，设置启动JavaScript的支持

val webView:WebView=findViewById(R.id.webView)
    webView.settings.javaScriptEnabled=true

2、目标的网页仍然在当前WebView中显示

调用WebView的setWebViewClient（）方法，从一个网页跳转到另一个网页时，跳转的网页也在webView中显示

webView.webViewClient= WebViewClient()

3.将网址传入

调用WebView的loadUrl方法，将网址传入，显示网页内容

webView.loadUrl("https://www.baidu.com")

AndroidManifest文件

加入权限声明

访问网络时需要声明权限的，在AndroidManifest中加入以下权限声明

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

**3、结合WebView方法做一个迷你浏览器**

<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"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:id="@+id/back"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="back"/>
            <Button
                android:id="@+id/forward"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="forward"/>
            <Button
                android:id="@+id/refresh"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="refresh"/>
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <EditText
                android:id="@+id/edittext"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2" />
            <Button
                android:id="@+id/go"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="go" />
        </LinearLayout>
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             />
    </LinearLayout>

class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            //控件
            val webView:WebView=findViewById(R.id.webView)
            val back:Button=findViewById(R.id.back)
            val forward:Button=findViewById(R.id.forward)
            val refresh:Button=findViewById(R.id.refresh)
            val go:Button=findViewById(R.id.go)
            val edittext:EditText=findViewById(R.id.edittext)
            //浏览网页
            webView.settings.javaScriptEnabled=true//启用JavaScript的支持
            webView.webViewClient= WebViewClient()//目标的网页仍然在当前WebView中显示
            webView.loadUrl("https://www.baidu.com")//.将网址传入
            //按键的点击事件
            back.setOnClickListener {
                webView.goBack()//返回
            }
            forward.setOnClickListener {
                webView.goForward()//前进
            }
            refresh.setOnClickListener {
                webView.reload()//重新加载当前页面
            }
            go.setOnClickListener {
                if(edittext.text.toString()!=null) {//判断是否输入网址
                    webView.loadUrl("http://" +edittext.text.toString())//加载输入的网址
                    webView.webViewClient=WebViewClient()
                }
            }
        }
    }

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

最终的效果图如下

![2788f5cf50704009bc3e2b90234a72c2.png][]

**4、加载本地html页面**

新建html的方法（android studio）

右键点击main->"New"->"Folder"->"Assets Folder"

在文件名的后面加".html"

步骤

1.在布局文件中添加WebView组件

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

2、调用WebView的loadUrl（）方法（注意是三条///）

val webView:WebView=findViewById(R.id.webView)
            webView.loadUrl("file:///android_asset/a.html")

**5、于JavaScript交互调用**

WebSetting类提供的常用方法

![f9fa09cdbb4a43699a7231506ebe99b6.jpeg][]

**步骤**

在布局文件中添加WebView， 调用WebSetting类的setJavaScriptEnabled()方法，设置启动JavaScript的支持，调用WebView的setWebViewClient（）方法，调用WebView的loadUrl方法，将html文件传入，新建JavaScriptObject类，调用addJavascriptInterface方法，这样，我们就可以通过js直接使用app，执行JavaScriptObject类里面的方法。

例子展示JavaScript调用Android的通话功能

**html文件**

<html>
      <head>
        <title>JavaScript交互</title>
      </head>
       <body>
          hello
       </body>
    </html>
    <script language="JavaScript">
        app.call("10086");
    </script>

布局文件（上面已有，就不多放代码了）

AndroidManifest文件

class MainActivity : AppCompatActivity() {
        class JavaScriptObject(var context: Context) {
            @JavascriptInterface//一定要添加这个标签，将该方法暴露给JavaScript
               fun call(n:String)
               {
                   var intent= Intent(Intent.ACTION_DIAL).setData(Uri.parse("tel:" + n));
                   startActivity(context,intent,null);
               }
        }
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val webView:WebView=findViewById(R.id.webView)
            webView.webViewClient=WebViewClient()
            webView.settings.javaScriptEnabled=true;
            webView.loadUrl("file:///android_asset/a.html")
            webView.addJavascriptInterface(JavaScriptObject(this),"app")
        }
    }

在"Manifest"文件添加电话的权限

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

运行结果如图

![fa1b6a7200154df2bbb7eb020c6789e2.png][]

[61443b19d0604093a0a83e35345fad2d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3b5d8a80fc8149969d4960289be7c9da.jpeg
[2788f5cf50704009bc3e2b90234a72c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/29dea3d47dad4a778534befd2e5c8c22.png
[f9fa09cdbb4a43699a7231506ebe99b6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2edebfa0c4d14dca86cfdcf1ad114bee.jpeg
[fa1b6a7200154df2bbb7eb020c6789e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c2a4c07378294abb804c44c76b79f365.png

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关 android开发，使用kotlin学习BroadcastReceiver

一、动态注册和静态注册动态注册：在代码中注册动态注册能监听到大部分的系统广播和自定义的广播（都为隐式广播）步骤 1.新建一个Broadcast Receiver

迈不过友情╰/ 2024年04月08日 11:48/ 0 赞/ 103 阅读

相关 android开发，使用kotlin学习WebView（详细）

随着后台技术的不断发展，App前端的应用都布置了Web页面的界面，这个界面就是由WebView组件渲染出来的。WebView由如下优点：可以直接显示和渲染Web页面或者网页；可

╰+哭是因爲堅強的太久メ/ 2024年04月08日 11:17/ 0 赞/ 95 阅读

相关 android开发，使用kotlin学习ViewModel

目录 1.ViewModel的出现 2.ViewModel的使用（1）基本步骤： (2)ViewModel的作用 -------------------- 1.

素颜马尾好姑娘i/ 2024年04月07日 16:00/ 0 赞/ 104 阅读

相关 android开发，使用kotlin学习ContentProvider

1、注册ContentProvider 右击com.example.myapplication包->New->Other->Content Provider。会弹出窗口

╰半夏微凉°/ 2024年04月07日 10:14/ 0 赞/ 99 阅读

相关 android开发，使用kotlin学习WorkManager

WorkMananger的简介 -------------------- Google推出WorkManager组件，WorkManager很适合用于处理一些要求定时执行的

墨蓝/ 2024年04月03日 10:00/ 0 赞/ 123 阅读

相关 android开发，使用kotlin学习Room

之前我们学习了SQLite数据库的使用方法，不过当时仅仅是使用了一些原生的API来进行数据的增删改查操作。这些原生API虽然简单易用，但是如果放到大型项目当中的话，会非常容易让

我就是我/ 2024年04月03日 09:59/ 0 赞/ 124 阅读

相关 android开发，使用kotlin学习LiveData

LiveData是Jetpack提供的一种响应式编程组件，它可以包含任何类型的数据，并在数据发生变化的时候通知给观察者。也就是说，我们可以将数据使用LiveData来包装，然后

电玩女神/ 2024年04月03日 09:45/ 0 赞/ 99 阅读

相关 android开发，使用kotlin学习Lifecycles

Lifecycles组件可以让任何一个类都能轻松感知到Activity的生命周期，同时又不需要在Activity中编写大量的逻辑处理。 Lifecycles的简单使用：新

水深无声/ 2024年04月03日 09:38/ 0 赞/ 132 阅读

相关 android开发，使用kotlin学习Fragment

1.Fragment的介绍 -------------------- Android在3.0版本引入了Fragment功能，它非常类似于Activity，可以像Activi

清疚/ 2024年03月31日 12:07/ 0 赞/ 73 阅读

相关 android开发，使用kotlin学习Service

1. 服务简介服务是Android中的四大组件之一，它能够长期在后台运行且不提供用户界面。即使用户切到另一应用程序，服务仍可以在后台运行。 2.服务的创建 (1)创建

绝地灬酷狼/ 2024年03月31日 10:56/ 0 赞/ 100 阅读