Android开发中WebView与原生JS的数据交互详解

最新推荐文章于 2021-05-26 18:13:13 发布

qq654783742

最新推荐文章于 2021-05-26 18:13:13 发布

阅读量520

点赞数

分类专栏： Android小常识

本文链接：https://blog.csdn.net/qq654783742/article/details/72553748

版权

本文详细介绍了在Android开发中使用WebView与JavaScript进行数据交互的实现过程，包括WebView组件的使用、页面加载、js框架引入、用户体验优化，以及如何通过Java与JS互传数据，展示了如何创建接口作为交互桥梁，提供了具体的代码示例。

摘要由CSDN通过智能技术生成

本文来分享详细的在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控件。代码片段如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="horizontal" >
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

载入页面：

webView = (WebView) findViewById(R.id.webview);
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的支持：

WebSettings setting = webView.getSettings();
setting.setJavaScriptEnabled(true);//支持js

增加对中文的支持:

WebSettings setting = webView.getSettings();
setting.setDefaultTextEncodingName("GBK");//设置字符编码

设置页面滚动条风格：

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

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div>

<div data-role="content">
<p>Page content goes here.</p>
</div>

<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

</body>
</html>

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