h5-app交互

2019-11-21  本文已影响0人  蛋壳不讲武德

1.Android交互

Android调用JS的方法有2种:

(1)通过WebView的loadUrl()

// 调用js中的函数:jsFun(msg)

webView.loadUrl("javascript:jsFun('" + msg + "')"); 

对应的js方法

function showInfoFromJava(){

document.getElementById("p").innerHTML="Java成功调的JS方法";

}

(2)通过WebView的evaluateJavascript()

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

}

  a)、比第一种方法效率更高、使用更简洁,因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。

  b)、Android 4.4 后才可使用 

对应的js方法

function sum(a,b){

returna+b;

}

js调用Android本地java方法

js代码

function jsJava(){

        //调用java的方法,顶级对象,java方法

        //可以直接访问JSTest,这是因为JSTest挂载到js的window对象下了

        JSTest.showToast("我是被JS执行的Android代码");

    }

Android代码

//java与js回调,自定义方法

        //1.java调用js

        //2.js调用java

        //首先java暴露接口,供js调用

        /**

         * obj:暴露的要调用的对象

         * interfaceName:对象的映射名称 ,object的对象名,在js中可以直接调用

         * 在html的js中:JSTest.showToast(msg)

         * 可以直接访问JSTest,这是因为JSTest挂载到js的window对象下了

         */

        webView.addJavascriptInterface(newObject() {

            //定义要调用的方法

            //msg由js调用的时候传递

            @JavascriptInterface

            publicvoidshowToast(String msg) {

                Toast.makeText(getApplicationContext(),

                        msg, Toast.LENGTH_SHORT).show();

            }

        }, "JSTest");

(一)Android端调用H5页面

在Android端主要使用WebView来进行网页的加载,设置属性

// 获取WebSetting对象

WebSettings webSettings = webview.getSettings();

// 设置支持javascript

webSettings.setJavaScriptEnabled(true);

// 将Android里面定义的类对象AndroidJs暴露给javascript

webview.addJavascriptInterface(newAndroidJs(MainActivity.this),"AndroidJs");

调用方式:其中doAlert为H5页面的方法

webview.loadUrl("javascript:doAlert()");

(二)H5端调用Android页面

(1)

Android端代码:

publicclass AndroidJs {

    private Context mContext;

    public AndroidJs(Context context) {

        this.mContext = context;

    }

    @JavascriptInterface

    publicvoid showList() {

        new AlertDialog.Builder(mContext)

                .setTitle("图书列表")

                .setIcon(R.mipmap.ic_launcher)

                .setItems(

                        newString[]{"疯狂java讲义","疯狂Android讲义",

                                "轻量级java EE开发"},null)

                .setPositiveButton("确定",null).create().show();

    }

    @JavascriptInterface

    publicvoid showToast() {

        Toast.makeText(mContext, "hello", Toast.LENGTH_LONG).show();

    }

}

这里面的方法必须是共有的,类名与标识保持一致;

2.ios交互(谁调用谁?)

IOS 和 H5交互从根本上可以分为两种方式:

1. 使用UIWebView   

2.使用React框架

H5调用iOS

//window.webkit.messageHandlers. Share.postMessage(null)

iOS调用H5

//[self.webView evaluateJavaScript:@"show()"completionHandler:^(id _Nullable //response,NSError*_Nullable error){//TODO}];

//show()就是JS写的方法

上一篇下一篇

猜你喜欢

热点阅读