JSBridge插件

Android

开发

JSBridge插件即JSAPI，JSAPI是原生为前端赋能的一种手段，前端页面可通过调用原生组件提供的JSAPI来获取原生提供的能力，建议在原生组件中封装组件提供的JSAPI。下面以原生组件PhoneGmu开发一个名为tel.getTelphone的JSAPI为例讲解如何扩展JSAPI：

1. 在原生组件PhoneGmu的src目录下创建名为com.hundsun.tel.JSAPI.LightJSAPI的类

2. 在上一步创建的类中实现setPluginCallback方法，由于需要反射，因此此方法必须声明为public

   private IPluginCallback mPluginCallback = null;
      //向javaScript注册回调接口，必须实现
      public void setPluginCallback(IPluginCallback callback){
          mPluginCallback = callback;
      }

3. 实现getTelphone方法，同样由于反射需要把此方法声明为public

   public String getTelphone(JSONObject params){
          if(params!=null){
              try {
                  JSONObject result = new org.json.JSONObject();
                  result.put("getTelphone", "18268160848");
                  if(mPluginCallback!=null){//向前端页面返回成功回调
                      mPluginCallback.sendSuccessInfoJavascript(result);
                  }
              }catch (Exception e){//向前端页面返回失败回调
                  if(mPluginCallback!=null)mPluginCallback.sendFailInfoJavascript(null,
                          JSErrors.ERR_CODE_10002,JSErrors.ERR_EXTINFO_10002+"params error!");
              }
          }
          return "";
      }

使用

前端工程如果需要使用扩展的JSAPI只需要将原生组件配置在config.js中即可。

在H5中进行JSAPI调用，调用格式如下（LightJSBridge为LightGMU框架注入到WebView中的js桥，其中封装了call等多个桥接方法）

var params = {};
LightJSBridge.call("tel.getTelphone", params, function (data) {
		alert(JSON.stringify(data));
	});
});

iOS

开发

JSBridge插件即JSAPI，JSAPI是原生为前端赋能的一种手段，前端页面可通过调用原生组件提供的JSAPI来获取原生提供的能力，建议在原生组件中封装组件提供的JSAPI。下面以开发一个名为test.getSystemVersion的JSAPI为例讲解如何扩展JSAPI：

假设test.getSystemVersion接口封装的是原生组件TestGMU的原生接口，那么建议在TestGMU中创建HsJsApiManager的category，并在load方法中完成JSAPI注册

#import "HsJsApiManager+test.h"
#import "TestGMU.h"

@implementation HsJsApiManager (test)

+ (void)load {
    NSMutableDictionary * jsApis = [NSMutableDictionary dictionaryWithCapacity:1];
    [jsApis setObject:getSystemVersion forKey:@"test.getSystemVersion"];
    [[HsJsApiManager sharedManager] registerApis:jsApis];
}

#pragma mark - Block

static HSJsApiHandlerBlock getSystemVersion = ^(NSDictionary *data, id context, HSJsApiResponseCallbackBlock responseCallbackBlock) {
    NSString *version = TestGMUManager.sharedManager.systemVersion;
    responseCallbackBlockIfNotNull([HsJsApiManager dictWithSuccessData:@{@"systemVersion" : version);
};

@end

使用

前端工程如果需要使用扩展的JSAPI只需要将原生组件配置在config.js中即可。

在H5中进行JSAPI调用，调用格式如下（LightJSBridge为LightGMU框架注入到WebView中的变量，其中封装了call、reloadCurrentPage等多个桥接方法）

var params = {};
LightJSBridge.call("test.getSystemVersion", params, function (data) {
	alert(JSON.stringify(data));
});