HarmonyOS Next 实战卡片开发 02

news2024/12/23 0:26:49

HarmonyOS Next 实战卡片开发 02

卡片开发中,还有一个难点是显示图片。其中分为显示本地图片和显示网络图片

显示本地图片

卡片可以显示本地图片,如存放在应用临时目录下的图片。路径比如

/data/app/el2/100/base/你的项目boundleName/temp/123.png

以下操作是为了得到一张 该目录下的图片做的准备工作

  1. 截图,得到一张相册图片
  2. 使用PhotoViewPicker来选择要操作的图片
  3. 复制该图片到应用的临时目录下
  4. 传递给卡片组件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

截图,得到一张相册图片

使用PhotoViewPicker来选择要操作的图片

在首页中,选择要操作的图片,获得该文件的uri地址

entry/src/main/ets/pages/Index.ets

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  async aboutToAppear() {
    // 创建一个新的 PhotoSelectOptions 实例来配置图片选择器的行为
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

    // 设置 MIME 类型为图像类型,这样用户只能选择图像文件
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;

    // 设置用户可以选择的最大图片数量为 1 张
    PhotoSelectOptions.maxSelectNumber = 1;

    // 创建一个新的 PhotoViewPicker 实例,用于打开图片选择器
    let photoPicker = new photoAccessHelper.PhotoViewPicker();

    // 使用前面配置好的选项打开图片选择器,并等待用户完成选择
    // 注意这里的 select 方法是一个异步方法,所以需要使用 await 关键字等待其结果
    const PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);

    // 获取用户选择的第一张图片的 URI(统一资源标识符)
    // 假设这里只关心用户选择的第一张图片
    // uri file://media/Photo/3/IMG_1729864738_002/screenshot_20241025_215718.jpg
    const uri = PhotoSelectResult.photoUris[0];
    promptAction.showToast({ message: `${uri}` })
  }

  build() {
    RelativeContainer() {

    }
    .height('100%')
    .width('100%')
  }
}

复制该图片到应用的临时目录下

目标是将刚才的图片复制到应用的临时目录下,为最后的卡片显示本地图片做准备

image-20241025220456712

在刚才的代码下,接着实现

    // 获取应用的临时目录
    let tempDir = getContext(this).getApplicationContext().tempDir;

    // 生成一个新的文件名
    const fileName = 123 + '.png'
    // 通过缓存路径+文件名 拼接出完整的路径
    const copyFilePath = tempDir + '/' + fileName
    // 将文件 拷贝到 临时目录
    const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
    fileIo.copyFileSync(file.fd, copyFilePath)

传递给卡片组件

在当前的环节中,有一个需要特别需要注意的地方,就是构造合适的数据。比如以下的数据

image-20241025221558917

然后在创建卡片的时候,在Ability中读取图片地址,拼接参数,传递给卡片

entry/src/main/ets/entryformability/EntryFormAbility.ets

import { Want } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';
import { formBindingData, FormExtensionAbility } from '@kit.FormKit';

export default class EntryFormAbility extends FormExtensionAbility {
  // 在添加卡片时,打开一个本地图片并将图片内容传递给卡片页面显示
  onAddForm(want: Want): formBindingData.FormBindingData {
    // 假设在当前卡片应用的tmp目录下有一个本地图片 123.png
    let tempDir = this.context.getApplicationContext().tempDir;
    let imgMap: Record<string, number> = {};
    // 打开本地图片并获取其打开后的fd
    let file = fileIo.openSync(tempDir + '/' + '123.png');
    imgMap['imgBear'] = file.fd;

    class FormDataClass {
      // 卡片需要显示图片场景, 必须和下列字段formImages 中的key 'imgBear' 相同。
      imgName: string = 'imgBear';
      // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), 'imgBear' 对应 fd
      formImages: Record<string, number> = imgMap;
    }

    let formData = new FormDataClass();
    console.log("formDataformData", JSON.stringify(formData))
    // 将fd封装在formData中并返回至卡片页面
    return formBindingData.createFormBindingData(formData);
  }
}

卡片需要 使用 'memory://+this.imgName' 来显示图片

let storageWidgetImageUpdate = new LocalStorage();

@Entry(storageWidgetImageUpdate)
@Component
struct WidgetImageUpdateCard {
  @LocalStorageProp('imgName') imgName: ResourceStr = "";

  build() {
    Column() {
    }
    .width('100%').height('100%')
    .backgroundImage('memory://' + this.imgName)
    .backgroundImageSize(ImageSize.Cover)
  }
}

完整效果

小结

  1. 截图,得到一张相册图片
  2. 使用PhotoViewPicker来选择要操作的图片
  3. 复制该图片到应用的临时目录下
  4. 传递给卡片组件

以上的前三步骤都是为了得到临时图片,实际开发中根据情况来获取即可

还有

  • Image组件通过入参(memory://fileName)中的(memory://)标识来进行远端内存图片显示,其中fileName需要和EntryFormAbility传递对象(‘formImages’: {key: fd})中的key相对应。
  • Image组件通过传入的参数是否有变化来决定是否刷新图片,因此EntryFormAbility每次传递过来的imgName都需要不同,连续传递两个相同的imgName时,图片不会刷新。
  • 在卡片上展示的图片,大小需要控制在2MB以内。

显示网络图片

卡片中不支持直接显示网络图片如以下方式是不支持的

Image("https://cn-assets.gitee.com/assets/mini_app-e5eee5a21c552b69ae6bf2cf87406b59.jpg")

我们需要申请网络权限,然后将图片下载下来,最后再重复类似卡片显示本地图片的步骤即可

  1. 申请网络权限

    entry/src/main/module.json5

    image-20241025225743062

  2. 设置网络图片地址

  3. 使用http开始下载

  4. 写入文件

  5. 返回给卡片组件

entry/src/main/ets/entryformability/EntryFormAbility.ets

import { Want } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';
import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit';
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryFormAbility extends FormExtensionAbility {
  // 在添加卡片时,打开一个本地图片并将图片内容传递给卡片页面显示
  onAddForm(want: Want) {
    // 注意:FormExtensionAbility在触发生命周期回调时被拉起,仅能在后台存在5秒
    // 建议下载能快速下载完成的小文件,如在5秒内未下载完成,则此次网络图片无法刷新至卡片页面上
    const formId = want.parameters![formInfo.FormParam.IDENTITY_KEY] as string
    let netFile =
      'https://env-00jxhf99mujs.normal.cloudstatic.cn/card/3.webp?expire_at=1729871552&er_sign=0eb3f6ac3730703039b1565b6d3e59ad'; // 需要在此处使用真实的网络图片下载链接


    let httpRequest = http.createHttp()
    // 下载图片
    httpRequest.request(netFile)
      .then(async (data) => {
        if (data?.responseCode == http.ResponseCode.OK) {
          // 拼接图片地址
          let tempDir = this.context.getApplicationContext().tempDir;
          let fileName = 'file' + Date.now();
          let tmpFile = tempDir + '/' + fileName;
          let imgMap: Record<string, number> = {};

          class FormDataClass {
            // 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。
            imgName: string = fileName;
            // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd
            formImages: Record<string, number> = imgMap;
          }

          // 打开文件
          let imgFile = fileIo.openSync(tmpFile, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
          imgMap[fileName] = imgFile.fd;
          // 写入文件
          await fileIo.write(imgFile.fd, data.result as ArrayBuffer);
          let formData = new FormDataClass();
          let formInfo = formBindingData.createFormBindingData(formData);
          // 下载完网络图片后,再传递给卡片
          formProvider.updateForm(formId, formInfo)
          fileIo.closeSync(imgFile);
          httpRequest.destroy();
          console.log("============")
        }
      })
      .catch((e: BusinessError) => {
        console.log("eeee", e.message)
      })

    class FormData {
      formId: string = ""
    }

    // 先返回基本数据
    return formBindingData.createFormBindingData(new FormData);

  }


  onFormEvent(formId: string, message: string): void {
  }
}

作者

作者:万少

链接:https://www.nutpi.net/

來源:坚果派 著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

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

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

相关文章

将文字转换为运动:使用AMD GPU生成视频指南

Transforming Words into Motion: A Guide to Video Generation with AMD GPU — ROCm Blogs 发布日期: 2024年4月24日 作者: Douglas Jia 本博客介绍了通过增强稳定扩散模型在文本到视频生成方面的进展&#xff0c;并展示了使用阿里巴巴的ModelScopeT2V模型在AMD GPU上生成视频…

快速入门Zookeeper

Zookeeper ZooKeeper作为一个强大的开源分布式协调服务&#xff0c;扮演着分布式系统中至关重要的角色。它提供了一个中心化的服务&#xff0c;用于维护配置信息、命名、提供分布式同步以及提供组服务等。通过其高性能和可靠的特性&#xff0c;ZooKeeper能够确保在复杂的分布式…

服务器上安装Orcale数据库以及PL SQL工具(中文)

一、前期准备 1、oracle数据库安装包–>Oracle下载地址&#xff0c;版本根据当时情况就下最新的就行&#xff0c;下载时间可能有点长&#xff0c;耐心点。 2、PL SQL工具下载地址–>PL SQL下载地址&#xff0c;百度网盘可以共享【限速&#xff0c;没办法&#xff01;&am…

协程6 --- HOOK

文章目录 HOOK 概述链接运行时动态链接 linux上的常见HOOK方式修改函数指针用户态动态库拦截getpidmalloc 第一版malloc 第二版malloc/free通过指针获取到空间大小malloc 第三版strncmp 内核态系统调用拦截堆栈式文件系统 协程的HOOK HOOK 概述 原理&#xff1a;修改符号指向 …

[0342].第12节:加载与存储指令及算数指令

我的后端学习大纲 JVM学习大纲 一、加载与存储指令&#xff1a; 加载&#xff1a;主要是指的将数据压入到操作数栈中&#xff0c;那么这个数据可能来源于常量池也可能来自于局部变量表 1.iload_0占1个字节。iload 0 占3个字节。 2.因为操作码数量有限&#xff0c;只有256个&…

spark的学习-06

SparkSQL读写数据的方式 1&#xff09;输入Source 方式一&#xff1a;给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二&#xff1a…

ODOO学习笔记(5):ODOO开发规范

一、代码结构与布局 模块结构&#xff1a; 每个ODOO模块应具有清晰的结构&#xff0c;通常包含以下目录和文件&#xff1a; models&#xff1a;存放业务逻辑相关的模型类定义&#xff0c;如定义数据库表结构、业务规则等。views&#xff1a;用于放置各种视图文件&#xff0c;包…

【性能测试】linux服务器性能监控常用命令

CPU 性能监控指令 top 命令 基本功能&#xff1a;top 命令是 Linux 系统中最常用的性能监控工具之一。它可以实时显示系统中各个进程的资源占用情况&#xff0c;包括 CPU 使用率、内存使用量、进程状态等信息。在性能测试监控服务器性能时&#xff0c;通过 top 命令可以快速查…

ROS2humble版本使用colcon构建包

colcon与与catkin相比&#xff0c;没有 devel 目录。 创建工作空间 首先&#xff0c;创建一个目录 ( ros2_example_ws ) 来包含我们的工作区: mkdir -p ~/ros2_example_ws/src cd ~/ros2_example_ws 此时&#xff0c;工作区包含一个空目录 src : . └── src1 directory, …

VUE使用TS开发打包时发现校验问题无法打包

解决办法&#xff1a; 找到 tsconfig.app.json 这个文件&#xff0c;把他的include改为一个实际存在的空文件即可

vscode+EIDE开发环境搭建

嵌入式知识框架目录篇章&#xff1a;返回请点我 热门优质文章 文章标题等级&#xff1a;低中高推荐指数5√最佳vscode安装配置使用调试【保姆级教程】中√√√[VSCODE]基于EIDE插件搭建vscode下的STM32单片机开发环境中√√√官方安装高√√√√VScode利用EIDE和cortex-debug…

kafka面试题解答(四)

5、消费者组和分区数之间的关系是怎样的&#xff1f; 消费者组数小于等于分区数&#xff0c;消费者组内每个消费者负责消费不同分区的数据&#xff0c;一个分区只能由一个组内消费者消费。 6、kafka如何知道哪个消费者消费哪个分区&#xff1f; 生产者把数据发送给各个分区&…

C#入门 020 事件(类型成员)

初步了解事件 定义:单词Event&#xff0c;译为“事件” 《牛津词典》中的解释是“a thing that happens, especially something important通顺的解释就是“能够发生的什么事情” 角色:使对象或类具备通知能力的成员 事件(event)是一种使对象或类能够提供通知的成员对象O拥有…

单链表算法题(数据结构)

1. 反转链表 https://leetcode.cn/problems/reverse-linked-list/description/ 题目&#xff1a; 看到这个题目的时候我们怎么去想呢&#xff1f;如果我们反应快的话&#xff0c;应该可以想到我们可以从1遍历到5然后依次头插&#xff0c;但是其实我们还有更好的办法&#xff…

Python 如何通过 cron 或 schedule 实现爬虫的自动定时运行

Python 如何通过 cron 或 schedule 实现爬虫的自动定时运行 自动定时运行爬虫是很多数据采集项目的基本需求。例如&#xff0c;每天采集一次新闻数据&#xff0c;或每小时更新股票行情数据等。通过 Python 实现定时任务&#xff0c;可以保证数据采集的高效和持续性。本文将带大…

初学mongoDB

MongoDB 是一个开源的 NoSQL 数据库&#xff0c;由 C 语言编写。它与传统的关系型数据库不同&#xff0c;MongoDB 使用的是一种基于文档的存储模型&#xff0c;不需要定义固定的表结构&#xff0c;可以灵活地存储和管理大量的非结构化数据。下面是 MongoDB 的一些核心特性&…

Ubuntu 的 ROS 操作系统turtlebot3环境搭建

引言 本文介绍如何在Ubuntu系统中为TurtleBot3配置ROS环境&#xff0c;包括安装和配置ROS Noetic的步骤&#xff0c;为PC端控制TurtleBot3提供操作指南。 安装和配置的过程分为PC设置、系统安装、依赖安装等部分&#xff0c;并在最后进行网络配置&#xff0c;确保PC端能够顺利…

图像增强的100种方法

文章目录 什么是图像增强 &#xff1f;一、亮度和对比度调整1.1、线性方法1.1.1、灰度反转&#xff08;Gray Inversion&#xff09;1.1.2、对比度拉伸&#xff08;Contrast Stretching&#xff09;1.1.3、对比度和亮度增强&#xff08;Contrast and Brightness&#xff09; 1.2…

Android Kotlin Flow 冷流 热流

在 Android 开发中&#xff0c;Flow 是 Kotlin 协程库的一部分&#xff0c;用于处理异步数据流的一个组件。本质上&#xff0c;Flow 是一个能够异步生产多个值的数据流&#xff0c;与 suspend 函数返回单个值的模式相对应。Flow 更类似于 RxJava 中的 Observable&#xff0c;但…

Web服务器nginx实验2修改端口、默认目录、默认文件访问web页面

修改默认目录、默认文件&#xff1a; 创建配置文件&#xff1a; 里面写&#xff1a;&#xff08;访问的位置是/haha目录里面的haha.html&#xff09; 把haha里面的index.html改名为haha.html&#xff1a; 重启服务&#xff1a; 关闭防火墙、改宽松模式&#xff1a; 用Windows访…