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

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

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

H5调用原生

JS代码

function accessNative(){    var ext = $('extra').value;    if(!ext) {        ext = "";    }    api.accessNative({        name: 'H5ToNative',        extra: ext    }, function(ret, err) {        if(ret) {            alert('Native中处理了访问操作，返回结果为：' + JSON.stringify(ret));        }     });}

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

android代码

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

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

H5向原生发送事件

JS代码

function sendH5EventToNative() {    var ext = $('extra').value;    if(!ext) {        ext = "";    }    api.sendEvent({        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        api.addEventListener({            name:'requestEvent'        }, function(ret, err) {            alert('收到来自Native的事件：\n' + JSON.stringify(ret));        });    };    function requestEvent() {        api.accessNative({            name:'requestEvent'        });    }

android代码

String name = moduleContext.optString("name");//"requestEvent"与assets/widget/html/frame2.html页面的发送请求相匹配if("requestEvent".equals(name)){    JSONObject extra = new JSONObject();    try{        extra.put("value", "你好，我是来自Native的事件");    }catch(Exception e){    }    //"fromNative"与assets/widget/html/frame2.html页面的apiready中注册的监听相对应    sendEventToHtml5("requestEvent", extra);    return true;}

其中js中requestEvent()方法是js向原生发送一个消息，并且通过api.addEventListener()添加一个监听原生向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

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