APICloud与原生交互——消息事件

- H5调用原生
- H5向原生发送事件
- 原生向H5发送事件
- 补充说明

APICloud Studio升级了！！！APICloud Studio 2 是 APICloud 推出的一款更适合前端工程师的移动应用集成开发工具. 基于前端工程师偏爱的开源 Atom 编辑器深度定制, 与 APICloud 平台的各种云端移动开发服务紧密结合,是新一代名副其实的云端一体的移动应用快速开发工具!

在开发中使用到H5页面与原生页面交互时，必须得先了解其API，APICloud消息事件传送门！

H5调用原生

JS代码

function accessNative(){
    var ext = $('extra').value;

    if(!ext) {
        ext = "";
    }

    ({
        name: 'H5ToNative',
        extra: ext
    }, function(ret, err) {
        if(ret) {
            alert('Native中处理了访问操作，返回结果为：' + (ret));
        } 
    });
}

其中()为APICloud提供，该方法为使用 SuperWebView 时，js 向原生发送消息。且该方法只在使用 SuperWebView 时有效。name则为消息名称，对应原生中会根据这个name做对应的事情。extra则为H5向原生传递的附带参数。

android代码

 /**
 * 默认处理收到收到来自Html5页面的操作请求，并通过UZModuleContext给予JS回调
 *
 * @param moduleContext
 */
private void defautHtml5AccessRequest(final UZModuleContext moduleContext) {
    String name = ("name");
    Object extra = ("extra");
     builder = new (, AlertDialog.THEME_HOLO_LIGHT);
    ("提示消息")
            .setMessage("收到来自Html5页面的操作请求，访问的名称标识为：\n[" + name + "]\n传入的参数为：\n[" + extra + "]\n\n" + "是否处理？\n")
            .setCancelable(false)
            .setNegativeButton("不处理", null)
            .setPositiveButton("处理", new () {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    JSONObject jsonObject = new JSONObject();
                    try {
                        ("result0", "value0");
                        ("result1", "value1");
                        ("result2", "value2");
                    } catch (JSONException e) {
                        ();
                    }
                    (jsonObject, true);
                }
            }).create()
            .show();
}

其中name和extra与H5中对应，(jsonObject, true)为JS回调。

H5向原生发送事件

JS代码

function sendH5EventToNative() {
    var ext = $('extra').value;
    if(!ext) {
        ext = "";
    }

    ({
        name:'eventToNative',
        extra:{
            key1:ext,
            key2:'value2'
        }
    });
}

android代码

addHtml5EventListener(new Html5EventListener("eventToNative") {
        @Override
        public void onReceive(WebViewProvider webViewProvider, Object o) {
            /**
             * 收到来自Html5eventToNative事件,参数从o中取
             */
            showAlert("收到来自Html5的eventToNative事件，传入的参数为：\n\n" + o + "\n\n");
        }
});

其中eventToNative为两端对应的事件名称。

原生向H5发送事件

JS代码

apiready = function(){
        //监听名为"fromNative"的事件，该事件来自Native
        ({
            name:'requestEvent'
        }, function(ret, err) {
            alert('收到来自Native的事件：\n' + (ret));
        });
    };

    function requestEvent() {
        ({
            name:'requestEvent'
        });
    }

android代码

String name = ("name");
//"requestEvent"与assets/widget/html/页面的发送请求相匹配
if("requestEvent".equals(name)){
    JSONObject extra = new JSONObject();
    try{
        ("value", "你好，我是来自Native的事件");
    }catch(Exception e){

    }
    //"fromNative"与assets/widget/html/页面的apiready中注册的监听相对应
    sendEventToHtml5("requestEvent", extra);
    return true;
}

其中js中requestEvent()方法是js向原生发送一个消息，并且通过()添加一个监听原生向js发送的名为“requestEvent”
的事件。

补充说明

以上全部是基于已经成功集成了APICloud，且android代码都是在继承APICloud的ExternalActivity类中，重写相应的方法做出对应的处理。

例如：

1、protected boolean onHtml5AccessRequest(WebViewProvider provider, UZModuleContext moduleContext) {}
重写该函数，可实现处理收到来自Html5页面的操作请求，处理完毕后异步回调至Html5。

2、protected void onPageStarted(WebViewProvider provider, String url, Bitmap favicon) {}
重写该函数，可实现处理某Html5页面开始加载时，执行相应的逻辑

3、protected void onPageFinished(WebViewProvider provider, String url) {}
重写该函数，可实现处理某Html5页面结束加载时，执行相应的逻辑

4、protected boolean shouldOverrideUrlLoading(WebViewProvider provider, String url) {}
重写该函数，可实现处理当某Webview即将加载某Url时，是否进行拦截，拦截后，该Webview将不继续加载该Url

以上为项目中经常用到的方法，更多使用请在项目实战中应用或者查看相关文档。

秒客网

APICloud与原生交互——消息事件

H5调用原生

H5向原生发送事件

原生向H5发送事件

补充说明

相关文章