Android WebView与JS的数据交互

Posted 台风中的橘子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android WebView与JS的数据交互相关的知识，希望对你有一定的参考价值。

关于WebView

我们知道目前android市场上的一些应用采用的开发方式大致分为三种：Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及实现。

 

Android API中提供了WebView组件来实现对html的渲染。所谓的HybridApp开发方式即是汇集了HTML5、CSS3、jS的相关开发技术，以及数据交换格式json/XML。这显然是Web开发工程师的技能。正是因为如此，众多中小企业选择了这种开发方式来减少对android开发工程师的过度依赖，至于这三种开发方式的比较与优劣不在本文考虑之列。

 

有了WebView这个组件，Android应用开发技术也就转嫁到html与java数据交互上来。说白了就是js与WebView的数据交互，这就是本文所要讨论的。

WebView与js的数据交互

1.        WebView中载入静态页面

 

将WebView添加到应用中。和原生控件一样，在layout引入WebView控件。代码片段如下：

[html]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/linearLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="#000"  
  7.     android:orientation="horizontal" >  
  8. <WebView  
  9.     android:id="@+id/webview"  
  10.     android:layout_width="match_parent"  
  11.     android:layout_height="match_parent"   
  12.     />  
  13. </LinearLayout>  

载入页面：

 

[java]  view plain  copy
  1. webView = (WebView) findViewById(R.id.webview);  
  2. webView.loadUrl("file:///file:///android_asset/page.html");  

page.html存储在工程文件的assets根目录下。

2.        引入jquery mobile

引入js框架让我们编写的html页面更接近于原生控件的显示效果。目前主流的移动应用js框架有：jquery mobile和sencha touch（jquery mobile与sencha touch的选型不在本文讨论范围）。本文选择使用jquery mobile。

 

首先，在webview添加对js的支持：

[java]  view plain  copy
  1. WebSettings setting = webView.getSettings();  
  2. setting.setjavascriptEnabled(true);//支持js  

增加对中文的支持:

[java]  view plain  copy
  1. WebSettings setting = webView.getSettings();  
  2. setting.setDefaultTextEncodingName("GBK");//设置字符编码  

设置页面滚动条风格：

[java]  view plain  copy
  1. webView.setScrollBarStyle(0);//滚动条风格，为0指滚动条不占用空间，直接覆盖在网页上  

jquery mobile提供的标准页面模板TemplateForJQuery.html：

[html]  view plain  copy
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.     <title>Page Title</title>   
  5.       
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">   
  7.   
  8.     <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />  
  9.     <script src="js/jquery.js"></script>  
  10.     <script src="js/jquery.mobile-1.1.1.min.js"></script>  
  11. </head>   
  12. <body>   
  13.   
  14. <div data-role="page">  
  15.   
  16.     <div data-role="header">  
  17.         <h1>Page Title</h1>  
  18.     </div><!-- /header -->  
  19.   
  20.     <div data-role="content">   
  21.         <p>Page content goes here.</p>        
  22.     </div><!-- /content -->  
  23.   
  24.     <div data-role="footer">  
  25.         <h4>Page Footer</h4>  
  26.     </div><!-- /footer -->  
  27. </div><!-- /page -->  
  28.   
  29. </body>  
  30. </html>  

页面依赖的js库、css等均放在assets目录下,目录组织结构如下：

运行应用后的截图：

下面是button 的截图，与原生控件没什么明显区别，有种以假乱真的感觉：

3.        良好的用户体验

运行我们的应用发现，在拥有大量js的页面被载入时，一直处于等待中，这是很糟糕的用户体验。可以加入进度条解决。注意到webview提供的两个方法：setWebViewClient和setWebChromeClient。其中setWebChromeClient方法正是可以处理progress的加载，此外，还可以处理js对话框，在webview中显示icon图标等。对于处理progress的代码片段如下：

[java]  view plain  copy
  1. webView.setWebChromeClient(new WebChromeClient()   
  2.     public void onProgressChanged(WebView view, int以上是关于Android WebView与JS的数据交互的主要内容，如果未能解决你的问题，请参考以下文章

    Android WebView与JS的交互方式 最全面汇总

    Android：你要的WebView与 JS 交互方式 都在这里了

    Android中webview与JS交互互调方法

    android中webview与js交互

    安卓Webview 与 vue h5 使用js交互

    Webview Android与js交互