# API/组件自定义

# 1. 注册自定义API

如果小程序里需要调用一些宿主 App 提供的能力，而 FinClip 小程序 SDK 未实现或无法实现时，就可以通过注册自定义 API 来实现，使得小程序里也能够调用 App 中注册的 API 了。

注册自定义 API 分两个场景：

注册给原生小程序使用的自定义 API；
注册给小程序中 WebView 组件加载的 H5 使用的自定义 API。

# 1.1 注册小程序异步API

注册自定义API的函数

/// register extension api
/// 注册拓展api
void registerExtensionApi(String name, ExtensionApiHandler handler);

比如，我这里注册一个自定义finclipLogin，以便小程序中可直接使用。

首先，App里集成SDK后，注册自定义的api:

Mop.instance.registerExtensionApi('finclipLogin', (params) async {
  print("finclipLogin:$params");
  
  return {};
});

然后，在小程序的根目录创建 FinClipConf.js 文件，配置示例如下：

module.exports = {
  extApi:[
    { //普通交互API
      name: 'finclipLogin', //扩展api名 该api必须Native方实现了
      sync: false, //是否为同步api
      params: { //扩展api 的参数格式，可以只列必须的属性
        url: ''
      }
    }
  ]
}

注意：extApi 是个数组，所以，您可以注册多个自定义API。

小程序端更多自定义 API 配置信息可参考 ft.loadExtApi

最后，在小程序里调用自定义的API，示例代码：

ft.finclipLogin({
    url:'https://www.baidu.com',
    success: function (res) {
        console.log("调用customEvent success");
        console.log(res);
    },
    fail: function (res) {
        console.log("调用customEvent fail");
        console.log(res);
    }
});

# 1.2 注册 JS API

小程序里可使用web-view组件加载H5，如果H5中也想调用宿主API的某个能力，就可以利用该方法注册一个API。

/// register webview extension api
/// 注册webview拓展api
void addWebExtentionApi(String name, ExtensionApiHandler handler)

我这里为小程序里的H5注册了一个叫js2AppFunction的方法，

 Mop.instance.addWebExtentionApi('js2AppFunction', (params) async {
  print("js2AppFunction:$params");

  return {};
});

在H5内引用我们的桥接JSSDK文件，即可调用上面的注册的方法了。

HTML内调用注册的方法示例：

window.ft.miniProgram.callNativeAPI('js2AppFunction', {name:'getLocation'}, (result) => {
    console.log(result)
});

# 2. Flutter调用JS API

同样的如果宿主App想要调用小程序加载的H5中的某个方法，就可以使用该API。

/// 原生调用webview中的js方法
/// [appId] 小程序id
/// [eventName] 方法名
/// [nativeViewId] webviewId
/// [eventData] 参数
Future<void> callJS(String appId, String eventName, String nativeViewId,
  Map<String, dynamic> eventData)

首先，在H5内引用我们的桥接JSSDK文件。

然后，在HTML里注册好方法，比如方法名叫app2jsFunction。

window.ft.onNativeAPIHandler('app2jsFunction', function(res) {
    // app2jsFunction callback
})

最后，原生端调用如下API来调用HTML中的JS函数：

Map<String, dynamic> eventData = {'result':'abc','code':'12345'};
    Mop.instance.callJS('小程序id', 'app2jsFunction', 'webviewId', eventData);

# 3. 原生给小程序发送全局消息

/// 原生发送事件给小程序
/// [appId] 小程序id
/// [eventData] 事件对象
Future<void> sendCustomEvent(
  String appId, Map<String, dynamic> eventData)

示例代码：