未验证 提交 2a45f677 编写于 作者: O openharmony_ci 提交者: Gitee

!6079 delete plugin component

Merge pull request !6079 from LiAn/OpenHarmony-3.1-Release
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md) - [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md) - [Navigation](ts-basic-components-navigation.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md) - [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md) - [Radio](ts-basic-components-radio.md)
......
# 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 | {<br/>template: PluginComponentTemplate,<br/>data: KVObject<br/>} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br/>**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: () =&gt; void) | Triggered when the component loading is complete. |
| onError(callback: (info: { errcode: number, msg: string }) =&gt; void) | Triggered when an error occurs during component loading.<br/>**errcode**: error code.<br/>**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&lt;void&gt;): 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&lt;void&gt; | 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&lt;RequestCallbackParameters&gt;): 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<RequestCallbackParameters \| void&gt; | | Asynchronous callback used to return the requested data. |
- Description of RequestParameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| want | Want | Yes | Ability information of the component provider. |
| name | string | Yes | Name of the requested component. |
| data | KVObject | Yes | Additional data. |
- Description of RequestCallbackParameters
| Name | Type | Description |
| -------- | -------- | -------- |
| componentTemplate | PluginComponentTemplate | Component template. |
| data | KVObject | Component data. |
| extraData | KVObject | Additional data. |
- Description of KVObject
| Name | Type | Description |
| -------- | -------- | -------- |
| key | number \| string \| boolean \| Array \| KVObject | **KVObject** uses **key** and **value** to store data. **key** is of the string type, and **value** can be of the number, string, boolean, array type or another **KVObject**. |
- Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
## on
on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): void
Listens for events of the request type and returns the requested data, or listens for events of the push type and receives the data pushed by the provider.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| eventType | string | Yes | Type of the event to listen for. The options are **"push"** and **"request"**.<br/>**"push"**: The component provider pushes data to the component consumer.<br/>**"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,<br/>name: string,<br/>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br/>**source**: ability information of the component requester.<br/>**name**: name of the requested component.<br/>**data**: additional data.<br/>Return value: request data and result. |
| OnPushEventCallback | (source: Want,<br/>template: PluginComponentTemplate,<br/>data: KVObject,<br/>extraData: KVObject<br/>) =&gt; void | Callback used to receive the data pushed by the component provider.<br/>**source**: ability information of the component provider.<br/>**template**: component template.<br/>**data**: component update data.<br/>**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!")
}
)
},
}
```
...@@ -462,7 +462,6 @@ ...@@ -462,7 +462,6 @@
- [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md) - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md)
- [Marquee](reference/arkui-ts/ts-basic-components-marquee.md) - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md)
- [Navigation](reference/arkui-ts/ts-basic-components-navigation.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) - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
- [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md) - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
- [Radio](reference/arkui-ts/ts-basic-components-radio.md) - [Radio](reference/arkui-ts/ts-basic-components-radio.md)
......
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md) - [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md) - [Navigation](ts-basic-components-navigation.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md) - [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md) - [Radio](ts-basic-components-radio.md)
......
# PluginComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> - 本组件均为系统接口,三方应用不支持调用。
提供外部应用组件嵌入式显示功能,即外部应用提供的UI可在本应用内显示。
## 权限列表
## 子组件
## 接口
PluginComponent(value: { template: PluginComponentTemplate, data: any })
创建插件组件,用于显示外部应用提供的UI。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板,用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
- PluginComponentTemplate类型说明
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 |
| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 |
## PluginComponentManager
提供配套插件组件使用的相关接口,用于给插件组件的使用者请求组件与数据,使用者发送组件模板和数据。
## 导入模块
```
import pluginComponentManager from '@ohos.plugincomponent'
```
## push
push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
组件提供者向组件使用者主动发送组件与数据。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| param | PushParameters | 是 | 组件使用者的详细信息,详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
- PushParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 |
- 示例
[组件使用者调用接口](#组件使用者调用接口)示例。
## request
request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackParameters&gt;): void
组件使用者向组件提供者主动请求组件。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| param | RequestParameters | 是 | 组件模板的详细请求信息,详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调,&nbsp;通过回调接口的参数返回接受请求的数据。 |
- RequestParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 |
- RequestCallbackParameters说明
| 名称 | 类型 | 说明 |
| -------- | -------- | -------- |
| componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
- KVObject类型说明
| 参数 | 类型 | 说明 |
| -------- | -------- | -------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key,value]来存储数据,key是string类型的,value可以是number,string,boolean,数组或者另外的一个KVObject。 |
- 示例
[组件使用者调用接口](#组件使用者调用接口)示例。
## on
on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): void
提供者监听"request"类型的事件,给使用者返回通过request接口主动请求的数据;使用者监听"push"类型的事件,接收提供者通过push接口主动推送的数据。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| eventType | string | 是 | 监听的事件类型,&nbsp;可选值为:"push"&nbsp;、"request"。<br/>"push”:指组件提供者向使用者主动推送数据。<br/>"request”:指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
- callback事件说明
| 参数名 | 类型 | 说明 |
| -------- | -------- | -------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值:&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
- 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!")
}
)
},
}
```
...@@ -925,8 +925,6 @@ ...@@ -925,8 +925,6 @@
- [Navigation](reference/arkui-ts/ts-basic-components-navigation.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) - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
- [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md) - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册