PhizClip Docs

English

Português

English

Português

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 PhizClip-related capabilities.

Supported interfaces are:

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

Some sample code for API calls ​

js

pz.miniProgram.navigateTo({ url: '/path/to/page' })
pz.miniProgram.reLaunch({ url: '/path/to/page' })
pz.miniProgram.postMessage({ data: 'foo' })
pz.miniProgram.postMessage({ data: { foo: 'bar' } })
pz.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 PhizClip
pz.miniProgram.close()
pz.miniProgram.navigateBackMiniProgram({
  extraData: {},
  success: function(res) {
    console.log('navigateBackMiniProgram success callback:')
    console.log(res)
  }
})
pz.miniProgram.navigateToMiniProgram({
  appId: '',
  success: function(res) {
    console.log('navigateToMiniProgram success callback:')
    console.log(res)
  }
})

pz.miniProgram.onShow((res) => {
  console.log(res)
  // res.data indicates the current PhizClip routing query
})

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

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

pz.downloadFile({
  url,
  header,
  timeout,
  filePath
})

pz.openDocument({
  filePath,
  fileType
})

pz.chooseImage({
  count: 1, // Default 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)
  }
})

pz.getMini-AppInfo({
  success: (res) => {
    console.log('getMini-AppInfo', res)
    // {
    //     appAvatar = "icon address";
    //     appDescription = "Description Information";
    //     appId = "PhizClip id";
    //     path = "The path to the PhizClip page when you click on the forward";
    //     appThumbnail = "The path to the cover image of the PhizClip, which may be a network path or a local path, with an aspect ratio of5:4";
    //     appTitle = "PhizClip name";
    //     userId = "Developers id";
    // }
  }
})
pz.chooseImage({
  count: 1, // Default 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
pz.canGoBack({
  success: function(res) {
    console.log(res)
  }
})

// Get whether the PhizClip can return to the previous page
pz.canNavigateBack({
  success: function(res) {
    console.log(res)
  }
})

// Set up the PhizClip page title
pz.setNavigationBarTitle({
  title: 'page title'
})

pz.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. PhizClip Special interfaces ​

Interface NameDescriptionMinimum Version
pz.miniProgram.onWebviewEventListening to events sent by PhizClip1.4.1
pz.miniProgram.offWebviewEventRemove listening to events sent by PhizClip1.4.1
pz.miniProgram.sendWebviewEventTriggers the bindevent method of the webview tag binding1.4.1
pz.callNativeAPINative API calls for H5 pages1.4.1
pz.registNativeAPIHandlerRegister for native calls to the API in H51.4.1

2.1 H5 page calls native api ​

Example interface name:js2AppFunction

2.1.1 iOS Example ​

objectivec
[[FATClient sharedClient] fat_registerWebApi:@"js2AppFunction" handle:^(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":@"No permission", @"result": @{@"address":@"Space Science and Technology Square, Nanshan District, Shenzhen, Guangdong Province"}};
            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
pz.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.

objectivec
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-appid
 * @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-appApiManager.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-AppApiManager().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
pz.registNativeAPIHandler('app2jsFunction', function(res) {
    // app2jsFunction callback
})

2.3 H5 pages send events to PhizClip ​

2.3.1 H5 ​

js
// H5 
pz.miniProgram.sendWebviewEvent({
  test: 123
})

2.3.2 PhizClip ​

Logic Layer

js
// PhizClip /pages/index/index.js
Page({
  onEvent(e) {
    console.log(e.detail.test) // 123
  },
})

View Layer

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

2.4 PhizClip send events to H5 pages ​

2.4.1 H5 ​

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

2.4.2 PhizClip ​

js
pz.sendWebviewEvent({ test: 123 })