FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# API/组件自定义

# 1. 注册自定义API

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

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

  1. 注册给原生小程序使用的自定义 API;
  2. 注册给小程序中 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.registNativeAPIHandler('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)

示例代码:

var eventData = {result:'abc',code:'12345'};
MopSDK.sendCustomEvent('小程序id', eventData);
© 2022 FinClip with ❤