API/Component Customization

If the mini program needs to call some capabilities provided by the host App, and the FinClip mini program SDK is not implemented or cannot be realized, it can be achieved by registering a custom API, so that the mini program can also call the API registered in the App. Of course, you can also register custom components when you want to use components that aren't implemented or can't be implemented. There are two scenarios for registering a custom API:

1. Register custom apis for native mini program to use;
2. Register the custom API used by H5 loaded by WebView component in the mini program.

1. Customize the mini program API

There are four steps to register and use the custom mini program api:

• 1. Implement a custom api
• 2. Register custom apis
• 3. Declare the custom api in the mini program config
• 4. Calling custom api in mini program

1.1 Registering a custom mini program asynchronous API

1. Implement a custom asynchronous api.

Implementation of a custom mini program asynchronous api example

public class CustomApi extends BaseApi {
Public CustomApi Context (Context) {
Super (context);
}
@ Override
Public String [] apis () {

Return a new String [] {} "customEvent"; / / API names
}
@ Override
public void invoke(String event, JSONObject param, ICallback callback)
{
// what happens natively when the method is called
}
}

2. Register it in the 'extensionApiManager', supporting both single and bulk registrations. Register a single custom api

Kotlin

FinAppClient.extensionApiManager.registerApi(CustomApi(this))

Java

FinAppClient.INSTANCE.getExtensionApiManager().registerApi(new
CustomApi(this));

Bulk registration of custom apis

Kotlin

val apis = listOf<IApi>(CustomApi1(), CustomApi2(), CustomApi3())
FinAppClient.extensionApiManager.registerApis(apis)

Java

List<IApi> apis = new ArrayList<>();

IApi customApi1 = new CustomApi1();
apis.add(customApi1);

IApi customApi2 = new CustomApi2();
apis.add(customApi2);

IApi customApi3 = new CustomApi3();
apis.add(customApi3);

FinAppClient.INSTANCE.getExtensionApiManager().registerApis(apis);

3. Declare the custom api in the mini program config file. Create 'FinClipConf.js' in the mini program root, or use ft.loadExtApi to configure your custom api accordingly

module.exports = {
  ExtApi:
  [
    {// normal interactive API
      name: 'finclipLogin', // Extension api name This api must be natively
      implemented
      sync: false, // If this is a sync api
      params: {// Extend the api parameter format to list only the required
        attributes
        Url: "'
      }
    },
    {
      Name: 'finclipTestSync',
      sync: true, // Whether this is a synchronous api
      Params: {
        Name: "',
        Title: "'
      }
    }
  ]
}

For more customized API configuration information, please refer to ft.loadExtApi 4) Call the asynchronous api of the custom mini program

ft.finclipLogin({
Url: "https://www.baidu.com",

Success: the function (res) {
console.log(" Call customEvent success");
The console. The log (res);
},
Fail: function (res) {
console.log(" Calling customEvent fail");
The console. The log (res);
}
});

1.2 Sign up for a custom mini program sync API

Synchronous apis are custom apis that return results synchronously when called.

Note: Custom sync apis need to inherit from SyncApi and override the invoke method returned by sync. The sync api must be registered with the mini program process for it to work

1. Implement a custom asynchronous api.

public class CustomApi extends SyncApi {
Public CustomApi Context (Context) {
Super (context);
}
@ Override
Public String [] apis () {
Return a new String [] {} "customApi";
}
@ Nullable
@ Override
public String invoke(String event, JSONObject param) {
return getSuccessRes(event).put("data","1").toString();
}

}

2. Register it in the 'extensionApiManager', supporting both single and bulk registrations. Register a single custom api

FinAppClient.extensionApiManager.registerApi(CustomApi(this))

FinAppClient.INSTANCE.getExtensionApiManager().registerApi(new
CustomApi(this));

:::

Bulk registration of custom apis

Kotlin

val apis = listOf<IApi>(CustomApi1(), CustomApi2(), CustomApi3())
FinAppClient.extensionApiManager.registerApis(apis)

Java

List<IApi> apis = new ArrayList<>();

IApi customApi1 = new CustomApi1();
apis.add(customApi1);

IApi customApi2 = new CustomApi2();
apis.add(customApi2);

IApi customApi3 = new CustomApi3();
apis.add(customApi3);

FinAppClient.INSTANCE.getExtensionApiManager().registerApis(apis);

3. Declare the custom api in the mini program config file. Create 'FinClipConf.js' in the mini program root, or use ft.loadExtApi to configure your custom api accordingly,

More info ft.loadExtApi

module.exports = {
  ExtApi: [
    {// normal interactive API
      name: 'finclipLogin', // Extension api name This api must be natively
      implemented
      sync: false, // If this is a sync api
      params: {// Extend the api parameter format to list only the required
        attributes
        Url: "'
      }
    },
    {
      Name: 'finclipTestSync',
      sync: true, // Whether this is a synchronous api
      Params: {
        Name: "',
        Title: "'
      }
    }
  ]
}

4. Call in the mini program

const res = ft.finclipTestSync({ name: " Finclip", title: "Finclip" });
console.log(res.title);

1.3 Unregister the mini program API

Support both individual and bulk deregistrations. custom Unregistering an api

Example call

Kotlin

FinAppClient.extensionApiManager.unregisterApi(customApi)

Java

FinAppClient.INSTANCE.getExtensionApiManager().unregisterApi(customApi)

api for bulk unregistration

Example call

Kotlin

FinAppClient.extensionApiManager.unregisterApis(apis)

Java

FinAppClient.INSTANCE.getExtensionApiManager().unregisterApis(apis);

1.4 Get all registered custom mini program apis

API

/ * *
* Get all registered mini program apis
* /
fun getRegisteredApis(): Map<String, IApi>

Example call

Kotlin

val apis = FinAppClient.extensionApiManager.getRegisteredApis()

Java

Map<String, IApi> apis = FinAppClient.INSTANCE.getExtensionApiManager().getRegisteredApis();

2. Custom WebView Component apis

If the H5 loaded in the mini program also wants to use a capability of the host API, it can use this method to register an API. Only registering for asynchronous apis is currently supported. There are three steps to registering a custom webView Api and using the webView Api:

• 1. Implement a custom api
• 2. Register custom apis.
• 3.Custom api calls in H5.

2.1 Registering the WebView Component API

1. Implement a custom api.

Example custom api

public class WebApi extends BaseApi {
Public WebApi Context (Context) {
Super (context);
}
@ Override
Public String [] apis () {
Return a new String [] {} "webApiName"; / / API names
}
@ Override
public void invoke(String event, JSONObject param, ICallback callback)
{
// what happens natively when the method is called
}
}

2. Register it in the 'extensionWebApiManager', supporting both single and bulk registrations. Register a single custom api

Kotlin

FinAppClient.extensionWebApiManager.registerApi(WebApi(this))

Java

FinAppClient.INSTANCE.getExtensionWebApiManager().registerApi(new WebApi(this));

Bulk registration of custom apis

Kotlin

val apis = listOf<IApi>(WebApi1(), WebApi2(), WebApi3())
FinAppClient.extensionWebApiManager.registerApis(apis)

Java

List<IApi> apis = new ArrayList<>();

IApi webApi1 = new WebApi1();
apis.add(webApi1);

IApi webApi2 = new WebApi2();
apis.add(webApi2);

IApi webApi3 = new WebApi3();
apis.add(webApi3);

FinAppClient.INSTANCE.getExtensionWebApiManager().registerApis(apis);

3. Calling the custom api inside H5 Within the H5 reference our bridge [JSSDK] (/miniProgram/jssdk.html#web-view) files, you can call the above registration method. Example method call registration in HTML:

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

2.2 Unregistering the WebView Component API

Support both individual and bulk deregistrations. Cancel a single WebView component API

Example call

Kotlin

FinAppClient.extensionWebApiManager.unregisterApi(webApi)

Java

FinAppClient.INSTANCE.getExtensionWebApiManager().unregisterApi(webApi)

Canceling WebView component apis in bulk

Kotlin

FinAppClient.extensionWebApiManager.unregisterApis(webApis)

Java

FinAppClient.INSTANCE.getExtensionWebApiManager().unregisterApis(webApi
s);

2.3 Get all registered mini program WebView apis

API

/ * *
* Get native API calls from all registered web pages
* /
fun getRegisteredApis(): Map<String, IApi>

Example call

Kotlin

val apis = FinAppClient.extensionWebApiManager.getRegisteredApis()

Java

Map<String, IApi> apis = FinAppClient.INSTANCE.getExtensionWebApiManager().getRegisteredApis();

3. Register api in mini program process

Normally the api registered to the mini program is called and executed in the main process. When there is an api that needs to be executed in the mini program process, another interface needs to be registered.

FinAppProcessClient.callback = object : FinAppProcessClient.Callback {
override fun getRegisterExtensionApis(activity: Activity): List<IApi>?
{
// Register the mini program extension API in the mini program process
Return listOf (CustomApi (activity))
}
Override fun getRegisterExtensionWebApis (activity: the activity) :
List < IApi >? {
// Register mini program webpage to call native API in mini program process
Return listOf (CustomH5Api (activity))
}
}

4. Native JS API calls

API

/ * *
* Calling JS functions natively
*
* @param appId mini program id
* @param funcName JS function name
* @param funcParams JS function arguments
* @param webViewId The id of the WebView
* @param callback
* /
fun callJS(appId: String, funcName: String?, funcParams: String?,
webViewId: Int, callback: FinCallback<String?>)

Example call

Kotlin

FinAppClient.appletApiManager.callJS(
  "AppId",
  "FuncName,"
  "FunParams."
  1,
  Object: FinCallback < String?> {

  Override fun onSuccess (result: String? {
  Log.d(TAG, "callJS onSuccess: $result")
  }
  override fun onError(code: Int, error: String?) {
  Log.d(TAG, "callJS onError: $code:, $error")
  }
  override fun onProgress(status: Int, info: String?) {
  }
})

Java

FinAppClient.INSTANCE.getAppletApiManager().callJS(
  "AppId",
  "FuncName,"
  "FunParams."
  1,
  New FinCallback < String > () {
  @ Override
  public void onSuccess(String result) {
  Log.d(TAG, "callJS onSuccess: "+ result);
  }
  @ Override
  public void onError(int code, String error) {
  The d (TAG, "callJS onError:" + code + ", "+ error);
  }
  @ Override
  public void onProgress(int status, String info) {
  }
});

First, in the H5 reference our bridge JSSDK files.

Then, register the method in the HTML, say it's called 'app2jsFunction'.

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

5. Register native components

Native components like livePusher and livePlayer may need external third-party controls due to limited resources. This is where you can register native components.We now have three native components that support registration: Camera, LivePlayer, LivePusher.

5.1 Implementing custom native components

Implement the INativeView interface

# # # # sample

class TestNativeView : INativeView {
Lateinit var eventChannel: INativeView eventChannel
/ * *
* create nativeview
* @param params arguments passed from the mini program
* @param eventChannel is used to send events to the mini program component
* @return The view will be filled in where the component is declared in
the mini program
* /
Override fun onCreateView (
Context: context,
Params: ShowNativeViewParams.
The eventChannel: INativeView eventChannel
) : the View {
The d (TAG, "onCreateView: ${params. NativeViewId}")
Enclosing the eventChannel = eventChannel
Return TextView (context). Apply {
Gravity = gravity CENTER
SetTextColor (Color RED)

Text = params. Params. ToString ()
SetBackgroundColor (Color. GREEN)
SetOnClickListener {
The eventChannel. Send (
"Test",
MapOf (" time "to System. CurrentTimeMillis ())
)
}
}
}
/ * *
* update nativeview
* @param params arguments passed from the mini program
* @param view The previously created view
* /
override fun onUpdateView(context: Context, params:
ShowNativeViewParams, view: View) {
The d (TAG, "onUpdateView: ${params. NativeViewId}")
Params. Params?.let { (view as TextView).text = it.toString() }
}
/ * *
* destroy nativeview
* @param params arguments passed from the mini program
* @param view The previously created view
* /
override fun onDestroyView(context: Context, nativeViewId: String,
view: View) {
The d (TAG, "onDestroyView: $nativeViewId")
}

}

5.2 Registering native components

API

/ **
* Register native components
*
* @param type Component type

* @param cls component implementation class must implement the
INativeView interface
* /
fun registerNativeView(type: String, cls: Class<out INativeView>)

Example call

Kotlin

FinAppClient.nativeViewManager.registerNativeView("video",
TestNativeView::class.java)