# API/组件自定义

# 1. 注册自定义API

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

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

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

# 1.1 注册小程序异步API

注册自定义API的函数

/**
 * @params {string}  name 自定义 API 名称
 * @params {Function} handler 自定义 API 实现
 **/
MopSDK.registerExtensionApi(name, handler);

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

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

MopSDK.registerExtensionApi('finclipLogin', function (params) {
     console.log(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 注册 webView 扩展 API

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

const rnWebCustomAPI = params => {
	console.warn('webview 自定义api rnWebCustomAPI call', params);
	return {
		errMsg: 'rnWebCustomAPI:ok',
		data: '100',
	};
};
/**
 * @params {String}  name  自定义 API 名称
 * @params {Function} handler 自定义 API 实现
 **/
MopSDK.addWebExtentionApi('rnWebCustomAPI', rnWebCustomAPI);

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

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

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

# 2. RN调用 webview 中的 js 方法

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

/**
 * @param {string} appId
 * @param {string} eventName 提供的函数名
 * @param {Object} eventData 调用的参数
 **/
MopSDK.callJS(appId, 'app2jsFunction', {
	data: 100
})
.then(res => {
	console.warn('calljs 调用成功');
})
.catch(res => {
	console.warn('calljs 调用失败');
});

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

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

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

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

    var  eventData = {result:'abc',code:'12345'};
    MopSDK.callJS('小程序id', 'app2jsFunction', eventData);

# 3. RN端给小程序发送全局消息

/**
 * @param {String} appId
 * @param {Object} eventData
 **/
MopSDK.sendCustomEvent(appId,eventData)

示例代码：