API/ component customization

If the applet needs to call some capabilities provided by the host App, and the PhizClip applet SDK is not implemented or cannot be realized, it can be achieved by registering a custom API, so that the applet 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 applets to use;
2. Register the custom API used by H5 loaded by WebView component in the applet.

1. Customize the applet API

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

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

1.1 Registering a custom applet asynchronous API

1. Implement a custom asynchronous api.

Implementation of a custom applet 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 :::: tabs ::: tab "Kotlin"

FinAppClient.extensionApiManager.registerApi(CustomApi(this))

:::

::: tab "Java"

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

:::: Bulk registration of custom apis :::: tabs ::: tab "Kotlin"

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

:::

::: tab "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 applet config file. Create 'PhizClipConf.js' in the applet root, or use pz.loadExtApi to configure your custom api accordingly

module.exports = {
ExtApi:
{// normal interactive API
name: 'PhizClipLogin', // 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: 'PhizClipTestSync',
sync: true, // Whether this is a synchronous api
Params: {
Name: "',
Title: "'
}
}
]
}

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

pz.PhizClipLogin({
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 applet 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 applet 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 :::: tabs ::: tab "Kotlin"

FinAppClient.extensionApiManager.registerApi(CustomApi(this))

:::

::: tab "Java"

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

:::: Bulk registration of custom apis :::: tabs ::: tab "Kotlin"

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

:::

::: tab "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 applet config file. Create 'PhizClipConf.js' in the applet root, or use pz.loadExtApi to configure your custom api accordingly,

More info pz.loadExtApi

module.exports = {
ExtApi:
{// normal interactive API
name: 'PhizClipLogin', // 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: 'PhizClipTestSync',
sync: true, // Whether this is a synchronous api
Params: {
Name: "',
Title: "'
}
}
]
}

4. Call in the small program

const res = pz.PhizClipTestSync({'name':' PhizClip', 'title':'PhizClip'});
console.log(res.title);

1.3 Unregister the Applet API

Support both individual and bulk deregistrations. custom Unregistering an api

Example call

:::: tabs

::: tab "Kotlin"

FinAppClient.extensionApiManager.unregisterApi(customApi)

:::

::: tab "Java"

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

:::: api for bulk unregistration

Example call

:::: tabs ::: tab "Kotlin"

FinAppClient.extensionApiManager.unregisterApis(apis)

:::

::: tab "Java"

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

::::

1.4 Get all registered custom applet apis

API

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

Example call

:::: tabs ::: tab "Kotlin"

val apis = FinAppClient.extensionApiManager.getRegisteredApis()

:::

::: tab "Java"

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

::::

2. Custom WebView Component apis

If the H5 loaded in the applet 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 :::: tabs ::: tab "Kotlin"

FinAppClient.extensionWebApiManager.registerApi(WebApi(this))

:::

::: tab "Java"

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

:::: Bulk registration of custom apis :::: tabs ::: tab "Kotlin"

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

:::

::: tab "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 files, you can call the above registration method. Example method call registration in HTML:

window.pz.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

:::: tabs ::: tab "Kotlin"

FinAppClient.extensionWebApiManager.unregisterApi(webApi)

:::

::: tab "Java"

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

:::: Canceling WebView component apis in bulk :::: tabs ::: tab "Kotlin"

FinAppClient.extensionWebApiManager.unregisterApis(webApis)

:::

::: tab "Java"

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

::::

2.3 Get all registered applet WebView apis

API

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

Example call

:::: tabs ::: tab "Kotlin"

val apis = FinAppClient.extensionWebApiManager.getRegisteredApis()

:::

::: tab "Java"

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

::::

3. Register api in applet process

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

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

4. Native JS API calls

API

/ * *
* Calling JS functions natively
*
* @param appId applet 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

:::: tabs ::: tab "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?) {
}
})

:::

::: tab "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.pz.registNativeAPIHandler('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 applet
* @param eventChannel is used to send events to the applet component
* @return The view will be filled in where the component is declared in 
the applet
* /
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 applet
* @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 applet
* @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)