HarmonyOS Next 实战卡片开发 02

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.jpgconst 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.pnglet tempDir = this.context.getApplicationContext().tempDir;let imgMap: Record<string, number> = {};// 打开本地图片并获取其打开后的fdlet file = fileIo.openSync(tempDir + '/' + '123.png');imgMap['imgBear'] = file.fd;class FormDataClass {// 卡片需要显示图片场景, 必须和下列字段formImages 中的key 'imgBear' 相同。imgName: string = 'imgBear';// 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), 'imgBear' 对应 fdformImages: 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 stringlet 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 对应 fdformImages: 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.rhkb.cn/news/469784.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双十一云服务器抢购后,用SD-WAN连通多云网络

双十一个个云厂商都有一定的优惠&#xff0c;我在阿里云和腾讯云都购买了服务器&#xff0c;原本主要是使用的阿里云&#xff0c;一堆乱七八糟的东西都是部署在阿里云的&#xff0c;现在买了一台腾讯云之后就在思考一个问题&#xff0c;怎么在腾讯云使用阿里云原本部署的服务。…

从0开始学docker (每日更新 24-11-7)

docker网络基础 docker容器网络模型 容器网络项目libnetwork&#xff1a;docker网络架构基于一套称为容器网络模型&#xff08;CNM&#xff09;的接口 CNM高层架构 包括&#xff1a; 沙箱&#xff08;Sandbox&#xff09;&#xff1a;又称沙盒&#xff0c;包含容器的网络栈…

Linux学习笔记之组管理和权限管理

组管理 文件/目录 所有者 一般文件所有者是文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自然成为该文件的所有者 ls -ahl &#xff08;查看文件的所有者&#xff09; chown 用户名 文件名 &#xff08;修改文件所有者&#xff09; 文件/目录 所在组 当某个用户…

MySQL 中的索引下推功能

看到索引&#xff0c;应该大家都可以联想到这个是和查询效率有关系的&#xff0c;既然有这个功能&#xff0c;那么那句古话说的好啊&#xff1a;存在即合理。那么这个就是说有了这个功能&#xff0c;可以提升查询效率。 什么是索引下推 我们先有一个大概的理解&#xff1a;在…

CSP/信奥赛C++语法基础刷题训练(1):洛谷P5715 :三位数排序

CSP/信奥赛C语法基础刷题训练&#xff08;1&#xff09;&#xff1a;洛谷P5715 &#xff1a;三位数排序 题目描述 给出三个整数 a , b , c ( 0 ≤ a , b , c ≤ 100 ) a,b,c(0\le a,b,c \le 100) a,b,c(0≤a,b,c≤100)&#xff0c;要求把这三位整数从小到大排序。 输入格式 …

准确--FastDFS快速单节点部署

FastDFS单节点部署 1. 系统准备 # 查看操作系统信息&#xff08;适用于麒麟V10&#xff09; cat /etc/os-release# 安装必要的软件包 yum -y install gcc gcc-c perl zlib-devel unzip2. 准备 FastDFS 环境 cd /usr/local/fastdfs# 下载必要包&#xff08;若有访问限制&…

国标GB28181视频平台EasyCVR私有化部署视频平台对接监控录像机NVR时,录像机“资源不足”是什么原因?

EasyCVR视频融合云平台&#xff0c;是TSINGSEE青犀视频“云边端”架构体系中的“云平台”系列之一&#xff0c;是一款针对大中型项目设计的跨区域、网络化、视频监控综合管理系统平台&#xff0c;通过接入视频监控设备及视频平台&#xff0c;实现视频数据的集中汇聚、融合管理、…

【智谱开放平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…

【C++】详细介绍模版进阶,细节满满

目录 一、非类型模版参数&#xff1a; 1、介绍&#xff1a; 2、使用&#xff1a; 3、注意&#xff1a; 4、应用 二、模版特化 &#xff08;一&#xff09;、概念 &#xff08;二&#xff09;、函数模版特化 1、步骤&#xff1a; 2、举例&#xff1a; 3、不建议使用函…

动态规划---解决多段图问题

ok 小伙伴们&#xff0c;我现在有点小小的红温&#xff0c;有点毛躁。 怎么解决多段图问题呢&#xff1f;求取最短路径有多种方法可取。 家人们&#xff0c;毫无思绪可言……………………………… 要实现动态规划&#xff0c;条件&#xff1a;子问题重叠度较高&#xff0c;并…

JMeter基础篇

目录 总目录&#xff1a; 一、JMeter简介&#xff1a; -用途&#xff1a; -优缺点&#xff1a; 二、JMeter安装&#xff1a; 三、项目简介&#xff1a; -学生管理系统&#xff1a; -API接口清单&#xff1a; 查询&#xff1a; 新增&#xff1a; 更新&#xff1a; 删…

Elasticsearch中什么是倒排索引?

倒排索引&#xff08;Inverted Index&#xff09;是一种索引数据结构&#xff0c;它在信息检索系统中被广泛使用&#xff0c;特别是在全文搜索引擎中。倒排索引允许系统快速检索包含给定单词的文档列表。它是文档内容&#xff08;如文本&#xff09;与其存储位置之间的映射&…

【Python特征工程系列】利用SHAP进行特征重要性分析-XGB模型为例(案例+源码)

这是我的第374篇原创文章。 一、引言 SHAP有多种实现方式&#xff0c;每种方式都适用于特定的模型类型&#xff0c;可以实现更快的逼近。 TreeExplainer :TreeExplainer专为树集合方法开发&#xff0c;如XGBoost&#xff0c;LightGBM或CatBoost。 DeepExplainer :DeepExplain…

C++数据结构算法学习

C ,orient(面向) object , object entity(实体) Visible(可见的) or invisible(不可见) 变量用来保存数据 objects attribute(属性) services(服务) C STL 容器 vector, list&#xff08;&#xff09; vector底层是数组&#xff0c;类似双向链表和list底层 map/s…

ELK-Logstash配置

文章目录 一、什么是Logstash、有什么用&#xff1f;什么是 Logstash&#xff1f;Logstash 的主要特点&#xff1a;Logstash 的用途&#xff1a; 二、Logstash的安装与基本配置事先要安装Java的环境&#xff1f;Logstash 安装Debian/UbuntuRed Hat/CentOSmacOS&#xff08;使用…

R语言机器学习与临床预测模型69--机器学习模型解释利器:SHAP

R小盐准备介绍R语言机器学习与预测模型的学习笔记&#xff0c; 快来收藏关注【科研私家菜】 01 机器学习的可解释性 对于集成学习方法&#xff0c;效果虽好&#xff0c;但一直无法解决可解释性的问题。我们知道一个xgboost或lightgbm模型&#xff0c;是由N棵树组成&#xff0c;…

Vue自定义指令详解——以若依框架中封装指令为例分析

自定义指令 在Vue.js中&#xff0c;自定义指令提供了一种非常灵活的方式来扩展Vue的功能。以下是对Vue中自定义指令的详细解释&#xff1a; 一、自定义指令的基本概念 自定义指令允许开发者直接对DOM元素进行低层次操作&#xff0c;而无需编写大量的模板或者JavaScript代码。…

sql server启用远程连接与修改默认端口

一&#xff0c;数据库右键属性 二&#xff0c;sa账号状态属性启用 三&#xff0c;SQL Server配置管理器, 点击SQL Server 服务选项&#xff0c;确定SQL Server是正在运行的。 四&#xff0c;手动修改数据库的连接端口 1&#xff09;确保启用 2)修改默认端口 3)客户端IP改为一…

吴恩达机器学习笔记(3)

吴恩达机器学习&#xff08;3&#xff09; tensorflow实现 用 TensorFlow 实现神经网络 以下是一个完整的代码示例&#xff0c;展示如何使用 TensorFlow 和 Keras 构建和训练一个简单的神经网络来处理 MNIST 数据集&#xff1a; import tensorflow as tf from tensorflow.k…