PhizClip Docs

Português

English

Português

English

Appearance

Interface Description ​

1. Related Interfaces ​

A teia-Veja o componente carrega páginas que podem usar o JSSDK 1.4.20 ,, JSSDK 1.4.20(ESM) A interface fornecida chama mini-APLICATIVO-Recursos relacionados.

As interfaces suportadas são:

Interface NameDescriçãoMinimum Version
pz.miniProgram.navigateToOs parâmetros são os como a interface mini-aplicativo1.0.0
pz.miniProgram.navigateBackRequer o parâmetro delta; se não for passado, é 11.0.0
pz.miniProgram.switchTabOs parâmetros são os como a interface mini-aplicativo1.0.0
pz.miniProgram.redirectToOs parâmetros são os como a interface mini-aplicativo1.0.0
pz.miniProgram.reLaunchOs parâmetros são os como a interface mini-aplicativo1.0.0
pz.miniProgram.postMessageEnviar uma mensagem para um mini-aplicativo acionará o evento de mensagem do componente em um horário especial1.0.0
pz.miniProgram.getEnvObtenha o ambiente atual1.0.0
pz.miniProgram.closeFeche o mini-aplicativo1.0.3
pz.miniProgram.navigateToMiniProgramPular para o mini-aplicativo1.0.4
pz.miniProgram.navigateBackMiniProgramDe volta ao mini-aplicativo anterior1.0.4
pz.miniProgram.onWebviewEventOuvindo eventos enviados por mini-aplicativos1.4.1
pz.miniProgram.offWebviewEventRemova a audição de eventos enviados por mini-aplicativos1.4.1
pz.miniProgram.sendWebviewEventDesencadeia o método bindEvent da ligação da tag webview1.4.1
pz.miniProgram.onShowRetorno de chamada de registro de eventos de mini-aplicativo1.0.6
pz.miniProgram.onHidePhizClip Onhide Eovent Registration Retorno1.0.8
pz.miniProgram.onUnloadPhizClip Onunload Event Registry Retorback1.0.8
pz.chooseImageTire uma foto ou faça o upload1.0.1
pz.getLocalImgDataObtenha a imagem base641.0.9
pz.getLocationObtenha informações de geologia atual1.0.9
pz.chooseLocationLocalização do mapa aberto1.0.9
pz.downloadFileFaça o download do arquivo1.0.0
pz.openDocumentArquivo aberto1.0.0
pz.getAppletInfoRetornar as informações atuais da base do mini-aplicativo1.0.0
pz.getStorageOs parâmetros são os como a interface mini-aplicativo1.0.9
pz.setStorageOs parâmetros são os como a interface mini-aplicativo1.0.9
pz.removeStorageOs parâmetros são os como a interface mini-aplicativo1.0.9
pz.clearStorageOs parâmetros são os como a interface mini-aplicativo1.0.9
pz.getStorageInfoOs parâmetros são os como a interface mini-aplicativo1.0.9
pz.canGoBackSe a página atual H5 pode retornar à página anterior1.2.0
pz.canNavigateBackSe a página atual do mini-aplicativo pode retornar à página anterior1.2.0
pz.setNavigationBarTitleDefina o título atual da página do mini-aplicativo1.2.0
pz.requestIniciando uma solicitação de rede, os parâmetros são a interface como mini-aplicativo1.3.9
pz.callNativeAPIH5 chamadas para métodos nativos1.4.1
pz.registNativeAPIHandlerRegistre os métodos H5 para chamadas nativas1.4.1
pz.completeEnviar evento de conclusão de carga para mini-aplicativo1.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 NameDescriçãoMinimum Version
pz.miniProgram.onWebviewEventOuvindo Eventsting by Minipp1.4.1
pz.miniProgram.offWebviewEventRemova a audição de eventos enviados por mini-aplicativo1.4.1
pz.miniProgram.sendWebviewEventDesencadeia o método bindEvent da ligação da tag webview1.4.1
pz.callNativeAPIAPI nativa exige páginas H51.4.1
pz.registNativeAPIHandlerRegistre -se para chamadas nativas para a API em H51.4.1

2.1 H5 page calls native api ​

Exemplo de nome da interface: 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" :@ "Parque da Cidade Sarah Kubitschek Brasília brasil" }};
            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 ​

Referenciar nosso arquivo JSSDK Bridge no HTML invocará o método registrado acima.

Exemplo de chamar o método registrado com o interior com html

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

2.2 Calling methods in HTML natively ​

Exemplo de nome da interface: app2jsFunction

2.2.1 iOS API ​

O tamanho nativo chama a API a seguir para chamar as funções JS no 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 ​

O Say HTML faz referência ao arquivo JSSDK para aumentar e depois registra o método no HTML, por exemplo, método denominado nomeado app2jsFunction Então então

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 ​

Camada lógica

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

Visualizar camada

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 })