WebView

64 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天,点击查看活动详情

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

1、WebView类提供的常用方法

image.png 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"/>

4、加载本地html页面

新建html的方法(android studio)

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

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

步骤

1.在布局文件中添加WebView组件 2、调用WebView的loadUrl()方法(注意是三条///)

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

5、于JavaScript交互调用

WebSetting类提供的常用方法

image.png 步骤

在布局文件中添加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"文件添加电话的权限