在Android上怎样实现JAVA和JS交互

一、在Android上怎样实现JAVA和JS交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢。图片、css、js、html这些资源每个大概需要10-200ms,一般都是30ms就ok了。不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css、js文件和页面上的图片资源进行加载。如果webkit的缓存里面有,就不加载。加载完这些资源之后,就进行css的渲染和js的执行。Css的渲染一般不需要很长时间,几十毫秒就ok。关键是js的执行,如果用了jQuery,则执行起来需要5-6秒。而在这段时间,如果不在webview里设置背景,网页部分是白色的,很难看。这是一个很糟糕的用户体验。所以#欧#柏泰#克建议如果用网页布局程序,最好别用那些庞大的js框架。最好使用原生的js写业务脚本,以提升加载速度,改善用户体验。

在Android上怎样实现JAVA和JS交互呢？Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,通过addJavas criptInterface方法,可以将Java的类注册进webkit,给网页上的js进行调用,而且还可以通过loadUrl方法是给webkit传递一个URL,供浏览器来进行解析,实现Java和js交互。

要想运行网页上的js脚本,webview必须设置支持Javas cript。

1mWebview.getSettings().setJavas criptEnabled(true);

然后是设置webview要加载的网页:

web的网页:webView.loadUrl("");

本地的网页:webView.loadUrl("");//本地的存放在:assets文件夹中

webview做完基本的初始化后我们还要要给它,加进一个回调的代理类Javas criptInterface,并给它一个调用的名称:ncp

1mWebView.addJavas criptInterface(new Javas criptInterface(),"ncp");

Javas criptInterface可以是一个普通的Java类,类实现的方法,均可被js回调:

final class Javas criptInterface{

public void callOnJs2(String mode){

Java要调用js的方法,只需知道js的方法名称即可:

1mWebView.loadUrl("javas cript:onSaveCallback()");

document.getElementById('btn_1').addEventListener('click', onBtnClick, false);

var _int_value= window.ncp.callOnJs();

alert("get int from java:"+ _int_value);

window.ncp.callOnJs2("click");

1.Java调用 js里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互性很强的事情,这种速度会让人疯掉的。而反过来就不一样了, js去调 java的方法,速度很快,基本上 40-50毫秒一次。所以尽量用 js调用 java方法,而不是 java去调用 js函数。

2.Java调用 js的函数,没有返回值,而 Js调用 java方法,可以有返回值。返回值可以是基本类型、字符串,也可以是对象。如果是字符串,有个很讨厌的问题,第 3点我会讲的。如果是对象,这个对象会被转换为 js的对象,直接可以访问里面的方法。但是我不推荐 java返回给 js的是对象,除非是必须。因为 js收到 java返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500或 600以上,程序就会出问题。所以尽量返回基本数据类型或者字符串。

3.Js调用 Java的方法,返回值如果是字符串,你会发现这个字符串是 native的,不能对它进行一些修改操作,比如想对它 substr,取不到。怎么解决呢?转成 locale的。使用 toLocaleString()函数就可以了。不过这个函数的速度并不快,转化的字符串如果很多,将会很耗费时间。

二、webview 与html5有几种交互方式

对于android初学者应该都了解webView这个组件。之前我也是对其进行了一些简单的了解，但是在一个项目中不得不用webview的时候，发现了webview的强大之处，今天就分享一下使用webview的一些经验。

webview介绍的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

从上面你应该了解到了基本功能，也就是显示网页。之所以我说webview功能强大是因为它和js的交互非常方便，很简单就可以实现。

①webView可以利用html做界面布局，虽然目前还比较少人这么使用，不过我相信当一些客户端需要复杂的图文（图文都是动态生成）混排的时候它肯定是个不错的选择。

②直接显示网页，这功能当然也是它最基本的功能。

③和js交互。（如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择）。

这里直接用一个svn上取下的demo，先上demo后讲解。demo的结构图如下：

package com.google.android.webviewdemo;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

* Demonstrates how to embed a WebView in your activity. Also demonstrates how

* to have javascript in the WebView call into the activity, and how the activity

* In this example, clicking on the android in the WebView will result in a call into

* the activities code in{@link DemoJavaScriptInterface#clickOnAndroid()}. This code

* will turn around and invoke javascript using the{@link WebView#loadUrl(String)}

* Obviously all of this could have been accomplished without calling into the activity

* and then back into javascript, but this code is intended to show how to set up the

* code paths for this sort of communication.

public class WebViewDemo extends Activity{

private static final String LOG_TAG="WebViewDemo";

private Handler mHandler= new Handler();

public void onCreate(Bundle icicle){

setContentView(R.layout.main);

mWebView=(WebView) findViewById(R.id.webview);

WebSettings webSettings= mWebView.getSettings();

webSettings.setSavePassword(false);

webSettings.setSaveFormData(false);

webSettings.setJavaScriptEnabled(true);

webSettings.setSupportZoom(false);

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");

mWebView.loadUrl("");

final class DemoJavaScriptInterface{

* This is not called on the UI thread. Post a runnable to invoke

public void clickOnAndroid(){

mHandler.post(new Runnable(){

mWebView.loadUrl("javascript:wave()");

* Provides a hook for calling"alert" from javascript. Useful for

final class MyWebChromeClient extends WebChromeClient{

public boolean onJsAlert(WebView view, String url, String message, JsResult result){

<script language="javascript">

/* This function is invoked by the activity*/

document.getElementById("droid").src="android_waving.png";

<!-- Calls into the javascript interface for the activity-->

<a onClick="window.demo.clickOnAndroid()"><div style="width:80px;

border:2px solid#202020;">

<img id="droid" src="android_normal.png"/><br>

<LinearLayout xmlns:android=""

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

<a onClick="window.demo.clickOnAndroid()">

代码中的“demo”是在android中指定的调用名称，即

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface()中的一个方法。

当然是把前面的两种方式组合一下就可以了。

现在你一定了解了android和js的交互了。是时候分析一些demo了，根据上面讲的你也应该比较清楚了。具体交互流程如下：

①点击图片，则在js端直接调用android上的方法clickOnAndroid()；

②clickOnAndroid()方法（利用线程）调用js的方法。

个人总结：利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了，而html布局样式之类有DW这样强大的工具，而且网上很多源码，很多代码片。在UI和视觉效果上就会节省很多时间，重复发明轮子没有任何意义。