diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 153132c2e3ae7facd05eee1d874c4f9cb844abef..57d3ea74dd257c40f0d4d67e5b5757884768abc1 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -61,7 +61,6 @@ - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Marquee](ts-basic-components-marquee.md) - [Navigation](ts-basic-components-navigation.md) - - [PluginComponent](ts-basic-components-plugincomponent.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) - [Radio](ts-basic-components-radio.md) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md deleted file mode 100644 index 71a8900fb67f95f6a7cbe4cc53f4ade6c82706a0..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md +++ /dev/null @@ -1,323 +0,0 @@ -# PluginComponent - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -> -> - The APIs of this module are system APIs and cannot be called by third-party applications. - - -**<PluginComponent>** allows the UI provided by an external application to be displayed in the application. - - -## Required Permissions - -None - - -## Child Components - -None - - -## APIs - -PluginComponent(value: { template: PluginComponentTemplate, data: any }) - -Creates a **PluginComponent** to display the UI provided by an external application. - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | {
template: PluginComponentTemplate,
data: KVObject
} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.
**data**: data passed to the **PluginComponent** provider. | - -- PluginComponentTemplate parameters - | Name | Type | Description | - | -------- | -------- | -------- | - | source | string | Component template name. | - | ability | string | Name of the provider ability. | - - -## Events - - | Name | Description | -| -------- | -------- | -| onComplete(callback: () => void) | Triggered when the component loading is complete. | -| onError(callback: (info: { errcode: number, msg: string }) => void) | Triggered when an error occurs during component loading.
**errcode**: error code.
**msg**: error information. | - - -## PluginComponentManager - -Provides APIs for the **PluginComponent**. You can use these APIs to request components and data and send component templates and data. - - -## Modules to Import - - -``` -import pluginComponentManager from '@ohos.plugincomponent' -``` - - -## Required Permissions - -None - - -## push - -push(param: PushParameters, callback: AsyncCallback<void>): void - -Used by the component provider to send the component and data to the component consumer. - - -- Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | param | PushParameters | Yes | Information about the component consumer. For details, see description of PushParameters. | - | callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result. | - -- Description of PushParameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | want | Want | Yes | Ability information of the component consumer. | - | name | string | Yes | Component name. | - | data | KVObject | No | Component data value. | - | extraData | KVObject | No | Additional data value. | - -- Example - For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers). - - -## request - -request(param: RequestParameters, callback: AsyncCallback<RequestCallbackParameters>): void - -Used by the component consumer to request the component from the component provider. - -- Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | param | RequestParameters | Yes | Information about the component request. For details, see  description of RequestParameters. | - | callback | AsyncCallback**"push"**: The component provider pushes data to the component consumer.
**"request"**: The component consumer proactively requests data from the component provider. | - | callback | OnPushEventCallback \| OnRequestEventCallback | Yes | Callback used to return the result. For details, see description of callback. | - -- Description of callback - | Name | Type | Description | - | -------- | -------- | -------- | - | OnRequestEventCallback | (source: Want,
name: string,
data: KVObject ) =>RequestEventResult | Callback for the data request event.
**source**: ability information of the component requester.
**name**: name of the requested component.
**data**: additional data.
Return value: request data and result. | - | OnPushEventCallback | (source: Want,
template: PluginComponentTemplate,
data: KVObject,
extraData: KVObject
) => void | Callback used to receive the data pushed by the component provider.
**source**: ability information of the component provider.
**template**: component template.
**data**: component update data.
**extraData**: additional data. | - -- Description of RequestEventResult - | Name | Type | Description | - | -------- | -------- | -------- | - | template | string | Component name. | - | data | KVObject | Component data. | - | extraData | KVObject | Additional data. | - -- Example - For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers). - - -## Example - - -### Using the PluginComponent - - -``` -import plugin from "../../test/plugin_component.js" -import plugincomponent from '@ohos.plugincomponent' - -@Entry -@Component -struct PluginComponentExample { - @StorageLink("plugincount") plugincount: Object[] = [ - { source: 'plugincomponent1', ability: 'com.example.plugin' }, - { source: 'plugintemplate', ability: 'com.example.myapplication' }, - { source: 'plugintemplate', ability: 'com.example.myapplication' }] - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text('Hello World') - .fontSize(50) - .fontWeight(FontWeight.Bold) - Button('Push') - .fontSize(50) - .width(400) - .height(100) - .onClick(() => { - plugin.Push() - console.log("Button('Push')") - }) - .margin({ top: 20 }) - Button('Request1') - .fontSize(50) - .width(400) - .height(100) - .margin({ top: 20 }) - .onClick(() => { - plugin.Request1() - console.log("Button('Request1')") - }) - Button('Request2') - .fontSize(50) - .width(400) - .height(100) - .margin({ top: 20 }) - .onClick(() => { - plugin.Request2() - console.log("Button('Request2')") - }) - ForEach(this.plugincount, item => { - PluginComponent({ - template: { source: 'plugincomponent1', ability: 'com.example.plugin' }, - data: { 'countDownStartValue': 'new countDownStartValue' } - }).size({ width: 500, height: 100 }) - .onComplete(() => { - console.log("onComplete") - }) - .onError(({errcode, msg}) => { - console.log("onComplete" + errcode + ":" + msg) - }) - }) - } - .width('100%') - .height('100%') -} -``` - - -### APIs Called by Component Consumers - - -``` -import pluginComponentManager from '@ohos.plugincomponent' - -function onPushListener(source, template, data, extraData) { - console.log("onPushListener template.source=" + template.source) - var jsonObject = JSON.parse(data.componentTemplate.source) - console.log("request_callback1:source json object" + jsonObject) - var jsonArry = jsonObject.ExternalComponent - for (var i in jsonArry) { - console.log(jsonArry[i]) - } - console.log("onPushListener:source json object" + jsonObject) - console.log("onPushListener:source json string" + JSON.stringify(jsonObject)) - console.log("onPushListener template.ability=" + template.ability) - console.log("onPushListener data=" + JSON.stringify(data)) - console.log("onPushListener extraData=" + JSON.stringify(extraData)) -} - -export default { - //register listener - onListener() { - pluginComponentManager.on("push", onPushListener) - }, - Request() { - //The component consumer proactively sends data. - pluginComponentManager.request({ - want: { - bundleName: "com.example.myapplication", - abilityName: "com.example.myapplication.MainAbility", - }, - name: "plugintemplate", - data: { - "key_1": "plugin component test", - "key_2": 34234 - }, - jsonPath: "assets/js", - }, - (err, data) => { - console.log("request_callback1: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("request_callback1: componentTemplate.source=" + data.componentTemplate.source) - var jsonObject = JSON.parse(data.componentTemplate.source) - console.log("request_callback1:source json object" + jsonObject) - var jsonArry = jsonObject.ExternalComponent - for (var i in jsonArry) { - console.log(jsonArry[i]) - } - console.log("request_callback1:source json string" + JSON.stringify(jsonObject)) - console.log("request_callback1: data=" + JSON.stringify(data.data)) - console.log("request_callback1: extraData=" + JSON.stringify(data.extraData)) - } - ) - } -} - -// Example of the component provider using the API -import pluginComponentManager from '@ohos.plugincomponent' - -function onRequestListener(source, name, data) { - console.log("onRequestListener name=" + name) - console.log("onRequestListener data=" + JSON.stringify(data)) - return { template: "plugintemplate", data: data } -} - -export default { - //register listener - onListener() { - pluginComponentManager.on("request", onRequestListener) - }, - Push() { - // The component provider proactively sends data. - pluginComponentManager.push( - { - want: { - bundleName: "com.example.myapplication", - abilityName: "com.example.myapplication.MainAbility", - }, - name: "plugintemplate", - data: { - "key_1": "plugin component test", - "key_2": 34234 - }, - extraData: { - "extra_str": "this is push event" - }, - jsonPath: "assets/js", - }, - (err, data) => { - console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source) - console.log("push ok!") - } - ) - }, -} -``` diff --git a/en/application-dev/website.md b/en/application-dev/website.md index a17860a772222070551d8eb3c96d9bbac0965419..e9a6aae5430307592e968ac3b8f83f5b814a101b 100644 --- a/en/application-dev/website.md +++ b/en/application-dev/website.md @@ -462,7 +462,6 @@ - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md) - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md) - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md) - - [PluginComponent](reference/arkui-ts/ts-basic-components-plugincomponent.md) - [Progress](reference/arkui-ts/ts-basic-components-progress.md) - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md) - [Radio](reference/arkui-ts/ts-basic-components-radio.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index e9c38bc09637ef72df27f3d2adfa89d5399a1c5c..476b00bf7175aa04eb12cc36ffae87f114df7e12 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -61,7 +61,6 @@ - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Marquee](ts-basic-components-marquee.md) - [Navigation](ts-basic-components-navigation.md) - - [PluginComponent](ts-basic-components-plugincomponent.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) - [Radio](ts-basic-components-radio.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md deleted file mode 100644 index 7707e68d943582a05fe4c4d86183830b5a5a6224..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md +++ /dev/null @@ -1,318 +0,0 @@ -# PluginComponent - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> -> - 本组件均为系统接口，三方应用不支持调用。 - - -提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。 - - -## 权限列表 - -无 - - -## 子组件 - -无 - - -## 接口 - -PluginComponent(value: { template: PluginComponentTemplate, data: any }) - -创建插件组件，用于显示外部应用提供的UI。 - -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | {
template: PluginComponentTemplate,
data: KVObject
} | 是 | - | template:  组件模板，用于跟提供者定义的组件绑定。
data: 传给插件组件提供者使用的数据。 | - -- PluginComponentTemplate类型说明 - | 参数 | 类型 | 描述 | - | -------- | -------- | -------- | - | source | string | 组件模板名。 | - | ability | string | 提供者Ability的abilityname。 | - - -## 事件 - - | 名称 | 功能描述 | -| -------- | -------- | -| onComplete(callback: () => void) | 组件加载完成回调。 | -| onError(callback: (info: { errcode: number, msg: string }) => void) | 组件加载错误回调。
errcode: 错误码。
msg: 错误信息。 | - - -## PluginComponentManager - -提供配套插件组件使用的相关接口，用于给插件组件的使用者请求组件与数据，使用者发送组件模板和数据。 - - -## 导入模块 - - -``` -import pluginComponentManager from '@ohos.plugincomponent' -``` - - -## push - -push(param: PushParameters, callback: AsyncCallback<void>): void - -组件提供者向组件使用者主动发送组件与数据。 - - -- 参数 - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 | - | callback | AsyncCallback<void> | 是 | 此次接口调用的异步回调。 | - -- PushParameters参数说明 - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | want | Want | 是 | 组件使用者Ability信息。 | - | name | string | 是 | 组件名称。 | - | data | KVObject | 否 | 组件数据值。 | - | extraData | KVObject | 否 | 附加数据值。 | - -- 示例 - 见[组件使用者调用接口](#组件使用者调用接口)示例。 - - -## request - -request(param: RequestParameters, callback: AsyncCallback<RequestCallbackParameters>): void - -组件使用者向组件提供者主动请求组件。 - -- 参数 - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 | - | callback | AsyncCallback"push”：指组件提供者向使用者主动推送数据。
"request”：指组件使用者向提供者主动请求数据。 | - | callback | OnPushEventCallback \| OnRequestEventCallback | 是 | 见callback事件说明。 | - -- callback事件说明 - | 参数名 | 类型 | 说明 | - | -------- | -------- | -------- | - | OnRequestEventCallback | (source: Want,
name: string,
data: KVObject ) =>RequestEventResult | 数据请求事件的回调。
source: 组件请求方Ability信息。
name: 请求组件名称。
data: 附加数据。
返回值： 请求数据结果。 | - | OnPushEventCallback | (source: Want,
template: PluginComponentTemplate,
data: KVObject,
extraData: KVObject
) => void | 接收提供者主动推送的数据。
source: 组件提供者Ability信息。
template: 组件模板。
data: 组件更新数据。
extraData: 附加数据。 | - -- RequestEventResult类型说明 - | 参数 | 类型 | 说明 | - | -------- | -------- | -------- | - | template | string | 组件名称。 | - | data | KVObject | 组件数据。 | - | extraData | KVObjec | 附加数据。 | - -- 示例 - 见[组件使用者调用接口](#组件使用者调用接口)示例。 - - -## 示例 - - -### 使用PluginComponent组件 - - -``` -import plugin from "../../test/plugin_component.js" -import plugincomponent from '@ohos.plugincomponent' - -@Entry -@Component -struct PluginComponentExample { - @StorageLink("plugincount") plugincount: Object[] = [ - { source: 'plugincomponent1', ability: 'com.example.plugin' }, - { source: 'plugintemplate', ability: 'com.example.myapplication' }, - { source: 'plugintemplate', ability: 'com.example.myapplication' }] - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text('Hello World') - .fontSize(50) - .fontWeight(FontWeight.Bold) - Button('Push') - .fontSize(50) - .width(400) - .height(100) - .onClick(() => { - plugin.Push() - console.log("Button('Push')") - }) - .margin({ top: 20 }) - Button('Request1') - .fontSize(50) - .width(400) - .height(100) - .margin({ top: 20 }) - .onClick(() => { - plugin.Request1() - console.log("Button('Request1')") - }) - Button('Request2') - .fontSize(50) - .width(400) - .height(100) - .margin({ top: 20 }) - .onClick(() => { - plugin.Request2() - console.log("Button('Request2')") - }) - ForEach(this.plugincount, item => { - PluginComponent({ - template: { source: 'plugincomponent1', ability: 'com.example.plugin' }, - data: { 'countDownStartValue': 'new countDownStartValue' } - }).size({ width: 500, height: 100 }) - .onComplete(() => { - console.log("onComplete") - }) - .onError(({errcode, msg}) => { - console.log("onComplete" + errcode + ":" + msg) - }) - }) - } - .width('100%') - .height('100%') -} -``` - - -### 组件使用者调用接口 - - -``` -import pluginComponentManager from '@ohos.plugincomponent' - -function onPushListener(source, template, data, extraData) { - console.log("onPushListener template.source=" + template.source) - var jsonObject = JSON.parse(data.componentTemplate.source) - console.log("request_callback1:source json object" + jsonObject) - var jsonArry = jsonObject.ExternalComponent - for (var i in jsonArry) { - console.log(jsonArry[i]) - } - console.log("onPushListener:source json object" + jsonObject) - console.log("onPushListener:source json string" + JSON.stringify(jsonObject)) - console.log("onPushListener template.ability=" + template.ability) - console.log("onPushListener data=" + JSON.stringify(data)) - console.log("onPushListener extraData=" + JSON.stringify(extraData)) -} - -export default { - //register listener - onListener() { - pluginComponentManager.on("push", onPushListener) - }, - Request() { - // 组件使用者主动发送事件 - pluginComponentManager.request({ - want: { - bundleName: "com.example.myapplication", - abilityName: "com.example.myapplication.MainAbility", - }, - name: "plugintemplate", - data: { - "key_1": "plugin component test", - "key_2": 34234 - }, - jsonPath: "assets/js", - }, - (err, data) => { - console.log("request_callback1: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("request_callback1: componentTemplate.source=" + data.componentTemplate.source) - var jsonObject = JSON.parse(data.componentTemplate.source) - console.log("request_callback1:source json object" + jsonObject) - var jsonArry = jsonObject.ExternalComponent - for (var i in jsonArry) { - console.log(jsonArry[i]) - } - console.log("request_callback1:source json string" + JSON.stringify(jsonObject)) - console.log("request_callback1: data=" + JSON.stringify(data.data)) - console.log("request_callback1: extraData=" + JSON.stringify(data.extraData)) - } - ) - } -} - -// 组件提供者使用接口示例 -import pluginComponentManager from '@ohos.plugincomponent' - -function onRequestListener(source, name, data) { - console.log("onRequestListener name=" + name) - console.log("onRequestListener data=" + JSON.stringify(data)) - return { template: "plugintemplate", data: data } -} - -export default { - //register listener - onListener() { - pluginComponentManager.on("request", onRequestListener) - }, - Push() { - // 组件提供者主动发送事件 - pluginComponentManager.push( - { - want: { - bundleName: "com.example.myapplication", - abilityName: "com.example.myapplication.MainAbility", - }, - name: "plugintemplate", - data: { - "key_1": "plugin component test", - "key_2": 34234 - }, - extraData: { - "extra_str": "this is push event" - }, - jsonPath: "assets/js", - }, - (err, data) => { - console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source) - console.log("push ok!") - } - ) - }, -} -``` diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index 5f77233100d72f2085d5f6edce8deb1de24e765e..f0ad41f67ce1ff95e83c2c73df5f939a35e44c22 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -925,8 +925,6 @@ - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md) - - [PluginComponent](reference/arkui-ts/ts-basic-components-plugincomponent.md) - - [Progress](reference/arkui-ts/ts-basic-components-progress.md) - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)