FinClip

Appearance

Interface Description ​

1. Related Interfaces ​

The web-view component loads pages that can use the JSSDK 1.4.20, JSSDK 1.4.20(ESM)The provided interface calls Mini-Program-related capabilities.

Supported interfaces are:

Interface NameDescriptionMinimum Version
ft.miniProgram.navigateToThe parameters are the same as the Mini-Program interface1.0.0
ft.miniProgram.navigateBackRequires the delta parameter; if not passed, it is 11.0.0
ft.miniProgram.switchTabThe parameters are the same as the Mini-Program interface1.0.0
ft.miniProgram.redirectToThe parameters are the same as the Mini-Program interface1.0.0
ft.miniProgram.reLaunchThe parameters are the same as the Mini-Program interface1.0.0
ft.miniProgram.postMessageSending a message to an Mini-Program will trigger the component's message event at a specific time (Mini-Program back, component destruction, sharing)1.0.0
ft.miniProgram.getEnvGet the current environment1.0.0
ft.miniProgram.closeClose the Mini-Program1.0.3
ft.miniProgram.navigateToMiniProgramJump to Mini-Program1.0.4
ft.miniProgram.navigateBackMiniProgramBack to the previous Mini-Program1.0.4
ft.miniProgram.onWebviewEventListening to events sent by Mini-Programs1.4.1
ft.miniProgram.offWebviewEventRemove listening to events sent by Mini-Programs1.4.1
ft.miniProgram.sendWebviewEventTriggers the bindevent method of the webview tag binding1.4.1
ft.miniProgram.onShowMini-Program onShow event registration callback1.0.6
ft.miniProgram.onHideMini-Program onHide event registration callback1.0.8
ft.miniProgram.onUnloadMini-Program onUnload event registration callback1.0.8
ft.chooseImageTake a photo or upload1.0.1
ft.getLocalImgDataGet image base641.0.9
ft.getLocationGet current geolocation information1.0.9
ft.chooseLocationOpen map location1.0.9
ft.downloadFileDownload file1.0.0
ft.openDocumentOpen file1.0.0
ft.getAppletInfoReturn the current Mini-Program base information1.0.0
ft.getStorageThe parameters are the same as the Mini-Program interface1.0.9
ft.setStorageThe parameters are the same as the Mini-Program interface1.0.9
ft.removeStorageThe parameters are the same as the Mini-Program interface1.0.9
ft.clearStorageThe parameters are the same as the Mini-Program interface1.0.9
ft.getStorageInfoThe parameters are the same as the Mini-Program interface1.0.9
ft.canGoBackWhether the current H5 page can return to the previous page1.2.0
ft.canNavigateBackWhether the current Mini-Program page can return to the previous page1.2.0
ft.setNavigationBarTitleSet the current Mini-Program page title1.2.0
ft.requestInitiating a network request，The parameters are the same as the Mini-Program interface1.3.9
ft.callNativeAPIH5 calls to native methods1.4.1
ft.registNativeAPIHandlerRegister H5 methods for native calls1.4.1
ft.onNativeAPIHandlerRegister H5 methods for native calls1.4.20
ft.offNativeAPIHandlerRemove H5 methods for native calls1.4.20
ft.completeSend load completion event to Mini-Program1.4.11

Some sample code for API calls ​

js
ft.miniProgram.navigateTo({ url: "/path/to/page" });
ft.miniProgram.reLaunch({ url: "/path/to/page" });
ft.miniProgram.postMessage({ data: "foo" });
ft.miniProgram.postMessage({ data: { foo: "bar" } });
ft.miniProgram.getEnv(function (res) {
  console.log(res.env); // miniprogram
  console.log(res.version); // support on 1.4.18
});
// Synchronization method to determine the current H5 runtime environment
console.log(window.__fcjs_environment); // miniprogram
// Close the Mini-Program
ft.miniProgram.close();
ft.miniProgram.navigateBackMiniProgram({
  extraData: {},
  success: function (res) {
    console.log("navigateBackMiniProgram success callback:");
    console.log(res);
  },
});
ft.miniProgram.navigateToMiniProgram({
  appId: "",
  success: function (res) {
    console.log("navigateToMiniProgram success callback:");
    console.log(res);
  },
});

ft.miniProgram.onShow((res) => {
  console.log(res);
  // res.data indicates the current Mini-Program routing query
});

ft.miniProgram.onHide((res) => {
  // Do Some Thing
});

ft.miniProgram.onUnload((res) => {
  // Do Some Thing
});

ft.downloadFile({
  url,
  header,
  timeout,
  filePath,
});

ft.openDocument({
  filePath,
  fileType,
});

ft.chooseImage({
  count: 1, // 默认9
  sizeType: ["original", "compressed"], // You can specify whether it is the original or compressed image, both are available by default
  sourceType: ["album", "camera"], // You can specify whether the source is an album or a camera, both are available by default
  success: (res) => {
    console.log(res);
  },
});

ft.getMini -
  ProgramInfo({
    success: (res) => {
      console.log("getMini-ProgramInfo", res);
      // {
      //     appAvatar = "icon address";
      //     appDescription = "Description Information";
      //     appId = "Mini-Program id";
      //     path = "The path to the Mini-Program page when you click on the forward";
      //     appThumbnail = "The path to the cover image of the Mini-Program, which may be a network path or a local path, with an aspect ratio of5:4";
      //     appTitle = "Mini-Program name";
      //     userId = "Developers id";
      // }
    },
  });
ft.chooseImage({
  count: 1, // 默认9
  sizeType: ["original", "compressed"], // You can specify whether it is the original or compressed image, both are available by default
  sourceType: ["album", "camera"], // You can specify whether the source is an album or a camera, both are available by default
  success: (res) => {
    console.log(res);
    window.fc.miniProgram.getLocalImgData({
      path: res.tempFilePaths[0],
      success: (res) => {
        console.log(res);
      },
    });
  },
});

// Get whether the current H5 page can return to the previous page
ft.canGoBack({
  success: function (res) {
    console.log(res);
  },
});

// Get whether the Mini-Program can return to the previous page
ft.canNavigateBack({
  success: function (res) {
    console.log(res);
  },
});

// Set up the Mini-Program page title
ft.setNavigationBarTitle({
  title: "page title",
});

ft.request({
  url: "https://some.url",
  method: "GET",
  data: {
    param1: "test",
  },
  success: function (res) {
    console.log("success", res);
  },
  fail: function (res) {
    console.log("fail", res);
  },
  complete: function (res) {
    console.log("complete", res);
  },
});

2. FinClip Special interfaces ​

Interface NameDescriptionMinimum Version
ft.miniProgram.onWebviewEventListening to events sent by Mini-Program1.4.1
ft.miniProgram.offWebviewEventRemove listening to events sent by Mini-Program1.4.1
ft.miniProgram.sendWebviewEventTriggers the bindevent method of the webview tag binding1.4.1
ft.callNativeAPINative API calls for H5 pages1.4.1
ft.onNativeAPIHandlerRegister for native calls to the API in H51.4.20
ft.offNativeAPIHandlerRemove for native calls to the API in H51.4.20

2.1 H5 page calls native api ​

Example interface name:js2AppFunction

2.1.1 iOS Example ​

objective-c
[[FATClient sharedClient] fat_registerWebApi:@"js2AppFunction" handler:^(FATAppletInfo *appletInfo, id param, FATExtensionApiCallback callback) {
        NSString *name = param[@"name"];
//        id params = param[@"data"];
        if ([name isEqualToString:@"getLocation"]) {
            // Execute positioning logic

            // Return results to HTML
            NSDictionary *dict = @{@"errno":@"403", @"errmsg":@"无权限", @"result": @{@"address":@"广东省深圳市南山区航天科技广场"}};
            callback(FATExtensionCodeSuccess, dict);
        } else if ([name isEqualToString:@"getColor"]) {
            // Execute other logic

            // Return results to HTML
            NSDictionary *dict = @{@"r":@"110",@"g":@"150",@"b":@"150"};
            callback(FATExtensionCodeSuccess, dict);
        }
    }];

2.1.2 Android Example ​

api example

java
public class WebApi extends BaseApi {


    public WebApi(Context context) {
        super(context);
    }

    @Override
    public String[] apis() {
        return new String[]{"js2AppFunction"}; //api name
    }

    @Override
    public void invoke(String event, JSONObject param, ICallback callback) {
        // The native counterpart of the operation when the method is called
    }
}

Kotlin

java
FinAppClient.extensionWebApiManager.registerApi(WebApi(this))

Java

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

2.1.3 HTML Example ​

Referencing our bridge JSSDK file within the HTML will invoke the registered method above.

Example of calling the registered method from within within HTML

js
ft.callNativeAPI("js2AppFunction", { name: "getLocation" }, (result) => {
  console.log(result);
});

2.2 Calling methods in HTML natively ​

Example interface name: app2jsFunction

2.2.1 iOS API ​

The native side calls the following API to call JS functions in HTML.

objective-c
NSString *jsonParams = @""; //This should be the json string converted from the parameter dictionary.
NSNumber *pageId = @(1234); //Here is the pageId passed from the HTML
[[FATClient sharedClient] fat_callWebApi:@"app2jsFunction" paramString:jsonParams pageId:pageId handler:^(id result, NSError *error) {

}];

2.2.2 Android API ​

java
/**
 * Native calls to JS functions
 *
 * @param appId Mini-Programid
 * @param funcName JS function name
 * @param funcParams JS function parameters
 * @param webViewId WebView的id
 * @return The result of the function call, returned as [Single]<[String]>
 */
fun callJS(appId: String, funcName: String?, funcParams: String?, webViewId: Int): Single<String?>

Calling Example
Kotlin

kotlin
FinAppClient.Mini-ProgramApiManager.callJS("appId", "app2jsFunction", "funParams", 1)
        .subscribeOn(Schedulers.io())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe({
            context.toast("callJs successfully : $it")
        }) { Log.d(TAG, "callJs failed : ${it.localizedMessage}") }

Java

java
FinAppClient.INSTANCE.getMini-ProgramApiManager().callJS("appId", "app2jsFunction", "funParams", 1)
        .subscribeOn(Schedulers.io())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(
                result -> Toast.makeText(context, "callJS successfully : " + result, Toast.LENGTH_SHORT).show(),
                throwable -> Toast.makeText(context, "callJS failed : " + throwable.getLocalizedMessage(), Toast.LENGTH_SHORT).show()
        );

2.2.3 HTML API ​

The same HTML references the JSSDK file for bridging, and then registers the method in the HTML, e.g. method named app2jsFunction.

js
const callback = function (res) {
  // app2jsFunction callback
};

// add listener
ft.onNativeAPIHandler("app2jsFunction", callback);

// remove listener
ft.offNativeAPIHandler("app2jsFunction", callback);

### 2.3 H5 pages send events to Mini-Program
#### 2.3.1 H5
```js
// H5
ft.miniProgram.sendWebviewEvent({
  test: 123
})

2.3.2 Mini-Program ​

Logic Layer

js
// Mini-Program /pages/index/index.js
Page({
  onEvent(e) {
    console.log(e.detail.test); // 123
  },
});

View Layer

HTML
<!-- Mini-Program /pages/index/index.fxml -->
<web-view src="https://xxx.xxx" bindevent="onEvent"></web-view>

2.4 Mini-Program send events to H5 pages ​

2.4.1 H5 ​

js
function onEvent(e) {
  console.log(e.test); // 123
}
// Register to listen
ft.miniProgram.onWebviewEvent(onEvent);
// Remove Listening
ft.miniProgram.offWebviewEvent(onEvent);

2.4.2 Mini-Program ​

js
ft.sendWebviewEvent({ test: 123 });

Copyright © 2024 FinClip