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

# API/组件自定义

# 1. 注册自定义API

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

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

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

示例代码:

Map<String, dynamic> eventData = {'result':'abc','code':'12345'};
Mop.instance.sendCustomEvent('小程序id', eventData);
© FinClip with ❤ , Since 2017