鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：PluginComponent）

news2024/11/27 0:38:34

提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。

说明：

  • 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 本组件为系统接口。

子组件

无

接口

PluginComponent(value: { template: PluginComponentTemplate, data: KVObject})

创建插件组件，用于显示外部应用提供的UI。

参数：

参数名参数类型必填参数描述
value{
template:  PluginComponentTemplate,
data: KVObject
}		是template:  组件模板，用于跟提供者定义的组件绑定。
data: 传给插件组件提供者使用的数据。

PluginComponentTemplate类型说明

参数类型描述
sourcestring组件模板名。
bundleNamestring提供者Ability的bundleName。

属性

必须显式设置组件宽高为非0有效值。

说明：

模板支持两种提供方式：

  • 1.使用绝对路径进行资源提供：source字段填写模板绝对路径，bundleName不需要填写。仅适用于不需要加载资源的单独模板页面，不建议使用。

  • 2.通过应用包进行资源提供：bundleName字段需要填写应用包名；source字段填写相对hap包的模板相对路径，对于多hap场景，通过相对路径&模块名称的方式进行hap包的确认。

    例如：{source：'pages/PluginProviderExample.ets&entry', bundleName:'com.example.provider'}

    仅对FA模型支持source字段填写AbilityName进行模板提供。

    例如：{source：'plugin', bundleName:'com.example.provider'}

事件

仅支持绑定手势方法，并分发给提供方页面，在提供方页面内部处理。

除支持通用事件，还支持以下事件：

名称功能描述
onComplete(callback: () => void)组件加载完成回调。
onError(callback: (info: { errcode: number, msg: string }) => void)组件加载错误回调。
errcode: 错误码。
msg: 错误信息。

示例

组件使用方

//PluginUserExample.ets
import plugin from "./plugin_component"
interface Info{
  errcode:number,
  msg:string
}
@Entry
@Component
struct PluginUserExample {

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('Register Request Listener')
        .fontSize(30)
        .width(400)
        .height(100)
        .margin({top:20})
        .onClick(()=>{
          plugin.onListener()
          console.log("Button('Register Request Listener')")
        })
      Button('Request')
        .fontSize(50)
        .width(400)
        .height(100)
        .margin({ top: 20 })
        .onClick(() => {
          plugin.Request()
          console.log("Button('Request')")
        })
      PluginComponent({
        template: { source: 'pages/PluginProviderExample.ets&entry', bundleName: 'com.example.plugin' },
        data: { 'countDownStartValue': 'new countDownStartValue' }
      }).size({ width: 500, height: 350 })
        .onComplete(() => {
          console.log("onComplete")
        })
        .onError((info:Info) => {
          console.log("onComplete" + info.errcode + ":" + info.msg)
        })
    }
    .width('100%')
    .height('100%')
  }
}

组件提供方

//PluginProviderExample.ets
import plugin from "./plugin_component"

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

Plugin组件工具

FA模型
//当前示例代码仅适用于js源文件
//plugin_component.js
import pluginComponentManager from '@ohos.pluginComponent'

function onPushListener(source, template, data, extraData) {
  console.log("onPushListener template.source=" + template.source)
  console.log("onPushListener template.ability=" + template.ability)
  console.log("onPushListener data=" + JSON.stringify(data))
  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)
  },
  Push() {
    // 组件提供方主动发送事件
    pluginComponentManager.push(
      {
        want: {
          bundleName: "com.example.plugin",
          abilityName: "com.example.myapplication.PluginProviderExample",
        },
        name: "PluginProviderExample",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        extraData: {
          "extra_str": "this is push event"
        },
        jsonPath: "",
      },
      (err, data) => {
        console.log("push_callback: push ok!");
      }
    )
  },
  Request() {
    // 组件使用方主动发送事件
    pluginComponentManager.request({
        want: {
          bundleName: "com.example.plugin",
          abilityName: "com.example.myapplication.PluginProviderExample",
        },
        name: "PluginProviderExample",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        jsonPath: "",
      },
      (err, data) => {
        console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
        console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
        console.log("request_callback: data=" + JSON.stringify(data.data))
        console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
      }
    )
  }
}
Stage模型
//当前示例代码仅适用于js源文件
//plugin_component.js
import pluginComponentManager from '@ohos.pluginComponent'

function onPushListener(source, template, data, extraData) {
  console.log("onPushListener template.source=" + template.source)
  console.log("onPushListener template.ability=" + template.ability)
  console.log("onPushListener data=" + JSON.stringify(data))
  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)
  },
  Push() {
    // 组件提供方主动发送事件
    pluginComponentManager.push(
      {
        owner: {
          bundleName: "com.example.myapplication",
          abilityName: "com.example.myapplication.MainAbility",
        },
        target: {
          bundleName: "com.example.plugin",
          abilityName: "com.example.myapplication.PluginProviderExample",
        },
        name: "PluginProviderExample",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        extraData: {
          "extra_str": "this is push event"
        },
        jsonPath: "",
      },
      (err, data) => {
        console.log("push_callback: push ok!");
      }
    )
  },
  Request() {
    // 组件使用方主动发送事件
    pluginComponentManager.request({
        owner: {
          bundleName: "com.example.myapplication",
          abilityName: "com.example.myapplication.MainAbility",
        },
        target: {
          bundleName: "com.example.plugin",
          abilityName: "com.example.myapplication.PluginProviderExample",
        },
        name: "PluginProviderExample",
        data: {
          "key_1": "plugin component test",
          "key_2": 34234
        },
        jsonPath: "",
      },
      (err, data) => {
        console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
        console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
        console.log("request_callback: data=" + JSON.stringify(data.data))
        console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
      }
    )
  }
}

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术，安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术，安卓全套VIP课程

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1511473.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2.4 关系代数 数据库系统概论

2.4 关系代数 数据库系统概论

目录 2.4.1 传统的集合运算 （二目运算） （1） 并（Union） （2）差（Except） （3） 交（Intersection） &#xff08…
阅读更多...
wait 和 notify方法

wait 和 notify方法

目录 1.1 wait()方法 wait 做的事情: wait 结束等待的条件: 1.2 notify()方法 1.3notifyAll方法 1.4wait()和sleep()对比 由于线程之间是抢占式执行的, 因此线程之间执行的先后顺序难以预知. 但是实际开发中有时候我们希望合理的协调多个线程之间的执行先后顺序. 完成这个协调…
阅读更多...
工具-百度云盘服务-身份认证

工具-百度云盘服务-身份认证

目标 通过百度网盘API的方式去获取网盘中的文件，要实现这的第一步就是需要获取网盘的权限。资料(参考) 如果期望应用访问用户的网盘文件，则需要经过用户同意，这个流程被称为“授权”。百度网盘开放平台基于 OAuth2.0 接入授权。OAuth2.0 是…
阅读更多...
Promise图解，Pass

Promise图解，Pass

10-优化代码_哔哩哔哩_bilibili
阅读更多...
STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹

STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹

STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹 文章目录 STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹前言第1章 添加文件夹第2章 添加文件路径2.1 相对路径方法2.2 绝对路径方法 总结 前言 在编程的过程中，如果需要在原有的工程基础上新增其它的…
阅读更多...
【Java从入门到精通】Java数组

【Java从入门到精通】Java数组

数组对于每一门编程语言来说都是重要的数据结构之一，当然不同语言对数组的实现及处理也不尽相同。 Java 语言中提供的数组是用来存储固定大小的同类型元素。 你可以声明一个数组变量，如 numbers[100] 来代替直接声明 100 个独立变量 number0&#xff0…
阅读更多...
数据结构和算法：复杂度分析

数据结构和算法：复杂度分析

算法效率评估 时间效率：算法运行速度的快慢。 空间效率：算法占用内存空间的大小。 效率评估方法主要分为两种：实际测试、理论估算 实际测试问题： 1.难以排除测试环境的干扰因素。 硬件配置会影响算法的性能。需要在各种机器上进…
阅读更多...
第五十六回 徐宁教使钩镰枪 宋江大破连环马-飞桨图像分类套件PaddleClas初探

第五十六回 徐宁教使钩镰枪 宋江大破连环马-飞桨图像分类套件PaddleClas初探

宋江等人学会了钩镰枪，大胜呼延灼。呼延灼损失了很多人马，不敢回京，一个人去青州找慕容知府。一天在路上住店，马被桃花山的人偷走了，于是到了青州，带领官兵去打莲花山。 莲花山的周通打不过呼延灼&#xf…
阅读更多...
vivado 使用Design Runs窗口、

vivado 使用Design Runs窗口、

使用Design Runs窗口 “设计运行”窗口显示在项目中创建的所有合成和实现运行。它包括用于配置、管理和启动运行的命令。 打开Design Run窗口 选择窗口 →  Design Runs打开“Design Runs”窗口。 设计运行窗口功能 •每个实现运行都缩进显示在其子级的合成运行下面。 …
阅读更多...
[Java、Android面试]_01_多线程: 重要参数、状态、优雅停止线程等

[Java、Android面试]_01_多线程: 重要参数、状态、优雅停止线程等

本人今年参加了很多面试，也有幸拿到了一些大厂的offer，整理了众多面试资料，后续还会分享众多面试资料，感兴趣的朋友可收藏关注， 现分享如下： 文章目录 1. 线程池重要参数2. 线程池状态3. 优雅停止线程4. 线…
阅读更多...
【Qt学习笔记】（二）--第一个程序“Hello World”（学习Qt中程序的运行、发布、编译过程）

【Qt学习笔记】（二）--第一个程序“Hello World”（学习Qt中程序的运行、发布、编译过程）

声明：本人水平有限，博客可能存在部分错误的地方，请广大读者谅解并向本人反馈错误。    因为我个人对Qt也是有一些需求，所以开设本专栏进行学习，希望大家可以一起学习，共同进步。   这篇博客将从一个 He…
阅读更多...
HTML 学习笔记(十一)表单

HTML 学习笔记(十一)表单

一、分块 1.单行文本框控件–文本框和密码框 文本框控件通过单标签input实现，其具有必要属性type来控制输入控件的类型(默认为text即文本信息)，密码框的type为password(口令)。   表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常…
阅读更多...
Qt QDateTime类使用

Qt QDateTime类使用

一.Qt datetime 介绍 Qt中的QDateTime类是用于处理日期和时间的组合的类，它提供了丰富的功能来操作和格式化日期时间数据。以下是其主要特点和用法： 构造函数：QDateTime可以通过组合QDate（日期）和QTime（时…
阅读更多...
C++感受2-逐字逐句，深入理解C++最小例程

C++感受2-逐字逐句，深入理解C++最小例程

以 “Hello World” 例程为载体、线索，在完成 “间接名字空间限定” 写法转换到“直接名字空间限定”的过程，同时掌握函数、主函数、函数调用、级联操作、声明、类型、int、字符串类型、头文件包含、行为数据、流输出操作符、标准输出流对象、标准库名字…
阅读更多...
LeetCode.2129. 将标题首字母大写

LeetCode.2129. 将标题首字母大写

&#x1f354;题目 2129. 将标题首字母大写 &#x1f35f;分析 这道题目描述的很清晰&#xff0c;我们只需要将给定的字符串按照空格划分成字符串数组 str&#xff0c;然后判断 str[i] 的长度如果 <2 &#xff0c;则将 str[i] 转为小写&#xff0c;如果 str[i] 的长度 &g…
阅读更多...
Python批量提取Word文档表格数据

Python批量提取Word文档表格数据

在大数据处理与信息抽取领域中&#xff0c;Word文档是各类机构和个人普遍采用的一种信息存储格式&#xff0c;其中包含了大量的结构化和半结构化数据&#xff0c;如各类报告、调查问卷结果、项目计划等。这些文档中的表格往往承载了关键的数据信息&#xff0c;如统计数据、项目…
阅读更多...
CSS 用 flex 布局绘制骰子

CSS 用 flex 布局绘制骰子

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.box {height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;display: flex;justify-content: center; // 水平居中/* alig…
阅读更多...
new-easy（pwn)

new-easy（pwn)

1.进行查壳 栈保护&#xff0c;三个保护都开了 NX保护 NX保护在Windows中也被成为称为DEP&#xff0c;是通过现代操作系统的内存单元&#xff08;Memory Protect Unit &#xff0c;MPU&#xff09;机制对程序内存页的粒度进行权限设置&#xff0c;其基本规则为可写权限与可执…
阅读更多...
简述类与对象

简述类与对象

一、两者关系 类是Java语言中最重要的数据类型&#xff0c;用于创建具体实例&#xff08;对象&#xff09; 抽象出一类事物共有的属性和行为&#xff0c;即数据以及数据上的操作 类是对现实事物的模拟&#xff0c;包含属性&#xff08;成员变量&#xff09;和行为&#xff0…
阅读更多...
python读取大型csv文件，降低内存占用，提高程序处理速度

python读取大型csv文件，降低内存占用，提高程序处理速度

文章目录 简介读取前多少行读取属性列逐块读取整个文件总结参考资料 简介 遇到大型的csv文件时&#xff0c;pandas会把该文件全部加载进内存&#xff0c;从而导致程序运行速度变慢。 本文提供了批量读取csv文件、读取属性列的方法&#xff0c;减轻内存占用情况。 import pand…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023