安卓H5交互

近期项目中用到混合式开发

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true

Android（Java）与JavaScript（HTML）交互有四种情况：

1） Android（Java）调用HTML中js代码

2） Android（Java）调用HTML中js代码（带参数）

3） HTML中js调用Android（Java）代码

4） HTML中js调用Android（Java）代码（带参数）

首先安卓调用js

定义接口

package Interface;
import de.greenrobot.event.EventBus;
import Bean.EvenBuss;
import Bean.Personnal;
import Util.SharedPreferencesUtil;
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;


public class JavaScriptObject {  
 
Context mContxt;  

    public JavaScriptObject(Context mContxt) {  
    
    this.mContxt = mContxt;  
    }  
    


    public void fun1FromAndroid(String name) {  
        Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();  
    } }

调用

webViews = (WebView) vies.findViewById(R.id.webView);
WebSettings webSettings = webViews.getSettings();
webSettings.setJavaScriptEnabled(true);
// 这种方法第一个参数就是java对象，第二个参数表示java对象的别名，在JavaScript中使用
// webViews.addJavascriptInterface(new JavaScriptObject(getActivity()),
//"demo");
webViews.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}


@SuppressWarnings("static-access")
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
ShowDialog.dimissdialog();


}
});


if (NetUtils.isConnected(getActivity())) {
if ((SharedPreferencesUtil.getStringData(getActivity(), "islogin",
"0").equals("1"))) {
webViews.loadUrl(SharedPreferencesUtil.getStringData(
getActivity(), "useurl", "0") + "1");
} else {
webViews.loadUrl(ConstantValue.MAINPAGE_NOLOGIN + "1");
}
} else {
ShowDialog.showmeidialog(getActivity(), "亲！网络正在赶来的路上...");
}


}

js调用Java

调用格式为window.jsInterfaceName.methodName(parameterValues) 此例中我们使用的是control作为注入接口名称。

复制代码 代码如下:

function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

Java调用JS

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

调用js无参无返回值函数

复制代码 代码如下:

String call = "javascript:sayHello()";
webView.loadUrl(call);

调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

复制代码 代码如下:

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。

1.Java调用js代码

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.js函数处理，并将结果通过调用java方法返回

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

3.Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4处理

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法

复制代码 代码如下:

function getGreetings() {
      return 1;
}

java代码时用evaluateJavascript方法调用

private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

输出结果

I/MainActivity( 1432): onReceiveValue value=1

注意

1.上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
2.evaluateJavascript方法必须在UI线程（主线程）调用，因此onReceiveValue也执行在主线程。