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 = "";
}
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
以上为项目中经常用到的方法，更多使用请在项目实战中应用或者查看相关文档。