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 index 697744ebf191bea97bed95270fee18e57422539b..f6232d35a021bf58ec10f740935a6b15ed65b5db 100644 --- 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 @@ -81,7 +81,8 @@ push(param: PushParameters, callback: AsyncCallback<void>): void | extraData | KVObject | 否 | 附加数据值。 | - 示例 - 见[组件使用者调用接口](#组件使用者调用接口)示例。 + + 见[Plugin组件提供方](#组件提供方)示例。 ## request @@ -117,7 +118,8 @@ request(param: RequestParameters, callback: AsyncCallback<RequestCallbackPara - 示例 - 见[组件使用者调用接口](#组件使用者调用接口)示例。 + + 见[Plugin组件使用方](#组件使用方)示例。 ## on @@ -146,22 +148,23 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v | extraData | KVObjec | 附加数据。 | - 示例 - 见[组件使用者调用接口](#组件使用者调用接口)示例。 + + 见[Plugin组件工具](#Plugin组件工具)示例。 ## 示例 -### 使用PluginComponent组件 +### 组件使用方 -``` -import plugin from "../../test/plugin_component.js" -import plugincomponent from '@ohos.plugincomponent' +```ts +//PluginUserExample.ets +import plugin from "plugin_component.js" @Entry @Component -struct PluginComponentExample { +struct PluginUserExample { @StorageLink("plugincount") plugincount: Object[] = [ { source: 'plugincomponent1', ability: 'com.example.plugin' }, { source: 'plugintemplate', ability: 'com.example.myapplication' }, @@ -172,32 +175,23 @@ struct PluginComponentExample { 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) + Button('Register Request Listener') + .fontSize(30) .width(400) .height(100) - .margin({ top: 20 }) - .onClick(() => { - plugin.Request1() - console.log("Button('Request1')") + .margin({top:20}) + .onClick(()=>{ + plugin.onListener() + console.log("Button('Register Request Listener')") }) - Button('Request2') + Button('Request') .fontSize(50) .width(400) .height(100) .margin({ top: 20 }) .onClick(() => { - plugin.Request2() - console.log("Button('Request2')") + plugin.Request() + console.log("Button('Request')") }) ForEach(this.plugincount, item => { PluginComponent({ @@ -214,15 +208,58 @@ struct PluginComponentExample { } .width('100%') .height('100%') + } } ``` +### 组件提供方 -### 组件使用者调用接口 +```ts +//PluginProviderExample.ets +import plugin from "plugin_component.js" +@Entry +@Component +struct PluginProviderExample { + @State message: string = 'no click!' + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button('Register Push Listener') + .fontSize(30) + .width(400) + .height(100) + .margin({top:20}) + .onClick(()=>{ + plugin.onListener() + console.log("Button('Register Push Listener')") + }) + Button('Push') + .fontSize(30) + .width(400) + .height(100) + .margin({top:20}) + .onClick(()=>{ + plugin.Push() + this.message = "Button('Push')" + console.log("Button('Push')") + }) + Text(this.message) + .height(150) + .fontSize(30) + .padding(5) + .margin(5) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} ``` -import pluginComponentManager from '@ohos.plugincomponent' + +### Plugin组件工具 + + +```js +//plugin_component.js +import pluginComponentManager from '@ohos.pluginComponent' function onPushListener(source, template, data, extraData) { console.log("onPushListener template.source=" + template.source) @@ -239,14 +276,23 @@ function onPushListener(source, template, data, extraData) { console.log("onPushListener extraData=" + JSON.stringify(extraData)) } +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("push", onPushListener) + pluginComponentManager.on("request", onRequestListener) }, - Request() { - // 组件使用者主动发送事件 - pluginComponentManager.request({ + Push() { + // 组件提供方主动发送事件 + pluginComponentManager.push( + { want: { bundleName: "com.example.myapplication", abilityName: "com.example.myapplication.MainAbility", @@ -256,43 +302,19 @@ export default { "key_1": "plugin component test", "key_2": 34234 }, - jsonPath: "assets/js", + extraData: { + "extra_str": "this is push event" + }, + jsonPath: "", }, (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)) + console.log("push_callback: push ok!"); } ) - } -} - -// 组件提供者使用接口示例 -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( - { + Request() { + // 组件使用方主动发送事件 + pluginComponentManager.request({ want: { bundleName: "com.example.myapplication", abilityName: "com.example.myapplication.MainAbility", @@ -302,17 +324,22 @@ export default { "key_1": "plugin component test", "key_2": 34234 }, - extraData: { - "extra_str": "this is push event" - }, - jsonPath: "assets/js", + jsonPath: "", }, (err, data) => { - console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source) - console.log("push ok!") + console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) + console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) + var jsonObject = JSON.parse(data.componentTemplate.source) + console.log("request_callback:source json object" + jsonObject) + var jsonArry = jsonObject.ExternalComponent + for (var i in jsonArry) { + console.log(jsonArry[i]) + } + console.log("request_callback:source json string" + JSON.stringify(jsonObject)) + console.log("request_callback: data=" + JSON.stringify(data.data)) + console.log("request_callback: extraData=" + JSON.stringify(data.extraData)) } ) - }, + } } ```