一个鸿蒙开发者的探索:实现相册访问功能

简介: 最近我决定开发一个鸿蒙App,旨在提供更好的照片管理体验。通过使用PhotoAccessHelper API,我实现了访问、显示和管理设备相册中的照片。过程中遇到了权限不足的问题,通过在config.json中添加权限声明并编写权限检查代码得以解决。此外,我还实现了分页加载和展示照片详细信息等功能,提升了用户体验。这次开发不仅让我掌握了API的使用,也深刻体会到鸿蒙系统对用户隐私和数据安全的重视。总结这次开发,我不仅学到了技术知识,还明白了开发者保护用户数据安全的责任。未来将继续探索更多功能,欢迎关注和收藏!

最近我决定开始一个新项目——自己动手开发一个鸿蒙App。这个App的功能想法其实很简单,就是一个能够访问设备相册的应用,方便用户查看、选择和管理照片。在日常使用手机的过程中,相册功能的使用频率很高,我想为鸿蒙设备上的用户提供一个更好的照片管理体验。于是,咱们就开始搞起来。



在翻阅了鸿蒙的开发文档后,我找到了一个非常适合我需求的API:PhotoAccessHelper。这个API可以用来访问设备中的照片,并提供相应的管理功能。我打算从最简单的功能做起,比如获取相册中的照片列表,然后一步一步拓展到更复杂的功能。


初步接触相册访问


一开始,我得先搞清楚怎么获取设备中的照片。PhotoAccessHelper 的文档描述得非常详细,使用它可以轻松地获取设备中的图片资源。所以,我先写了一个最简单的功能,尝试从设备中获取一些照片,并将它们显示在页面上。

下面是我用到的核心代码:


import PhotoAccessHelper from '@ohos.photo.PhotoAccessHelper';
let photoHelper = new PhotoAccessHelper();
function fetchPhotos() {
    photoHelper.getPhotos({
        limit: 10
    }).then((photos) => {
        console.log('获取到的照片:', photos);
        // 将照片展示在页面中
        photos.forEach(photo => {
            displayPhoto(photo.uri);
        });
    }).catch((err) => {
        console.error('获取照片失败', err);
    });
}
function displayPhoto(photoUri) {
    let imgElement = document.createElement('img');
    imgElement.src = photoUri;
    document.getElementById('photoContainer').appendChild(imgElement);
}


通过这段代码,我可以从设备相册中获取照片,并且在页面上展示出来。这一部分的实现其实比我想象得要简单许多,鸿蒙的API设计得相对直观,入门门槛不高。

然而,事情并没有我一开始想的那么简单。在运行这段代码的时候,我遇到了一个问题:权限不足。


权限的坑


在鸿蒙系统中,访问用户的照片需要申请相应的权限。这是为了保护用户隐私,避免不必要的应用获取到用户的敏感数据。所以,我不得不去研究权限申请的流程。


通过查阅官方文档,我了解到需要在config.json中添加相应的权限声明,例如:


"reqPermissions": [
    {
        "name": "ohos.permission.READ_MEDIA"
    }
]


这个权限声明非常重要,如果没有配置好,App根本无法访问用户的照片资源。添加权限声明后,我还需要在代码中进行权限检查,确保用户已经授权。

为此,我写了一个简单的权限检查函数:


import { Permissions } from '@ohos.permissions';
function checkPermission() {
    Permissions.checkPermission('ohos.permission.READ_MEDIA').then((result) => {
        if (result.granted) {
            fetchPhotos();
        } else {
            console.warn('缺少相册读取权限,正在请求权限...');
            requestPermission();
        }
    }).catch((err) => {
        console.error('权限检查失败', err);
    });
}
function requestPermission() {
    Permissions.requestPermission('ohos.permission.READ_MEDIA').then((result) => {
        if (result.granted) {
            fetchPhotos();
        } else {
            console.error('用户拒绝了相册读取权限');
        }
    }).catch((err) => {
        console.error('请求权限失败', err);
    });
}


通过这段代码,我成功地实现了权限检查和请求,这样用户在初次运行应用时会被提示授予相应权限。当用户同意后,应用便可以顺利地访问相册中的照片。


进一步探索:管理照片


接下来,我不满足于只是简单地获取和显示照片。我想进一步实现一些管理照片的功能,比如删除照片或者查看照片的详细信息。PhotoAccessHelper 也提供了一些这样的API,例如可以使用deletePhoto()来删除特定的照片。

以下是删除照片的代码实现:


function deletePhoto(photoUri) {
    photoHelper.deletePhoto(photoUri).then(() => {
        console.log('照片删除成功');
        // 删除成功后刷新页面
        document.getElementById('photoContainer').innerHTML = '';
        fetchPhotos();
    }).catch((err) => {
        console.error('删除照片失败', err);
    });
}


通过这一段代码,我实现了一个简单的照片删除功能。当用户在照片上点击删除按钮时,可以调用deletePhoto()来移除该照片,并刷新页面显示最新的照片列表。


面临的挑战与解决方案


在开发过程中,我还遇到了一些意料之外的挑战。比如,有时候用户的照片数量非常多,这就导致了照片获取的过程可能会比较缓慢,页面加载时间较长。为了改善用户体验,我引入了分页加载的方式,每次只加载一部分照片,并通过滚动加载的方式不断获取更多内容。

以下是分页加载的实现思路:


let offset = 0;
const limit = 10;
function loadMorePhotos() {
    photoHelper.getPhotos({
        limit: limit,
        offset: offset
    }).then((photos) => {
        console.log('加载更多照片:', photos);
        // 将照片展示在页面中
        photos.forEach(photo => {
            displayPhoto(photo.uri);
        });
        offset += photos.length;
    }).catch((err) => {
        console.error('加载照片失败', err);
    });
}
window.onscroll = function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        loadMorePhotos();
    }
};


通过分页加载的方式,我有效地减少了初次加载时的等待时间,提高了用户的体验。滚动加载的方式让用户可以在需要时继续加载更多的照片,而不至于因为一次性加载所有照片而导致页面卡顿。


照片详细信息的展示


除了删除照片,我还想给用户提供更多的照片信息,比如照片的拍摄时间、大小、分辨率等。PhotoAccessHelper 提供了一些相关的方法,可以获取到这些信息。

以下是展示照片详细信息的代码:


function showPhotoDetails(photoUri) {
    photoHelper.getPhotoDetails(photoUri).then((details) => {
        console.log('照片详细信息:', details);
        // 在页面中展示详细信息
        let detailsElement = document.createElement('div');
        detailsElement.innerHTML = `
            <p>拍摄时间:${details.dateTaken}</p>
            <p>文件大小:${details.size} bytes</p>
            <p>分辨率:${details.width} x ${details.height}</p>
        `;
        document.getElementById('photoDetailsContainer').appendChild(detailsElement);
    }).catch((err) => {
        console.error('获取照片详细信息失败', err);
    });
}


通过这一部分的开发,用户可以点击某张照片来查看它的详细信息,这让整个应用的功能更加丰富,也提高了用户的互动性。


结语:开发中的收获


经过这次的开发,我不仅掌握了PhotoAccessHelper的使用,还进一步体会到了鸿蒙系统在保护用户隐私和数据安全方面的设计。在开发的过程中,权限管理确实让我感到了一些挑战,但也让我更加明白,作为开发者,我们有责任保护用户的数据安全,而这些必要的权限检查和声明,正是实现这一目标的重要手段。



总之又完成了一项挑战,未来还会继续研究相关技术,喜欢的朋友可以关注+收藏哦~!

目录
相关文章
|
7天前
|
调度 云计算 芯片
云超算技术跃进,阿里云牵头制定我国首个云超算国家标准
近日,由阿里云联合中国电子技术标准化研究院主导制定的首个云超算国家标准已完成报批,不久后将正式批准发布。标准规定了云超算服务涉及的云计算基础资源、资源管理、运行和调度等方面的技术要求,为云超算服务产品的设计、实现、应用和选型提供指导,为云超算在HPC应用和用户的大范围采用奠定了基础。
179585 20
|
14天前
|
存储 运维 安全
云上金融量化策略回测方案与最佳实践
2024年11月29日,阿里云在上海举办金融量化策略回测Workshop,汇聚多位行业专家,围绕量化投资的最佳实践、数据隐私安全、量化策略回测方案等议题进行深入探讨。活动特别设计了动手实践环节,帮助参会者亲身体验阿里云产品功能,涵盖EHPC量化回测和Argo Workflows量化回测两大主题,旨在提升量化投研效率与安全性。
云上金融量化策略回测方案与最佳实践
|
16天前
|
人工智能 自然语言处理 前端开发
从0开始打造一款APP:前端+搭建本机服务,定制暖冬卫衣先到先得
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。
9362 23
|
20天前
|
Cloud Native Apache 流计算
资料合集|Flink Forward Asia 2024 上海站
Apache Flink 年度技术盛会聚焦“回顾过去,展望未来”,涵盖流式湖仓、流批一体、Data+AI 等八大核心议题,近百家厂商参与,深入探讨前沿技术发展。小松鼠为大家整理了 FFA 2024 演讲 PPT ,可在线阅读和下载。
5040 15
资料合集|Flink Forward Asia 2024 上海站
|
20天前
|
自然语言处理 数据可视化 API
Qwen系列模型+GraphRAG/LightRAG/Kotaemon从0开始构建中医方剂大模型知识图谱问答
本文详细记录了作者在短时间内尝试构建中医药知识图谱的过程,涵盖了GraphRAG、LightRAG和Kotaemon三种图RAG架构的对比与应用。通过实际操作,作者不仅展示了如何利用这些工具构建知识图谱,还指出了每种工具的优势和局限性。尽管初步构建的知识图谱在数据处理、实体识别和关系抽取等方面存在不足,但为后续的优化和改进提供了宝贵的经验和方向。此外,文章强调了知识图谱构建不仅仅是技术问题,还需要深入整合领域知识和满足用户需求,体现了跨学科合作的重要性。
|
28天前
|
人工智能 自动驾驶 大数据
预告 | 阿里云邀您参加2024中国生成式AI大会上海站,马上报名
大会以“智能跃进 创造无限”为主题,设置主会场峰会、分会场研讨会及展览区,聚焦大模型、AI Infra等热点议题。阿里云智算集群产品解决方案负责人丛培岩将出席并发表《高性能智算集群设计思考与实践》主题演讲。观众报名现已开放。
|
16天前
|
人工智能 容器
三句话开发一个刮刮乐小游戏!暖ta一整个冬天!
本文介绍了如何利用千问开发一款情侣刮刮乐小游戏,通过三步简单指令实现从单个功能到整体框架,再到多端优化的过程,旨在为生活增添乐趣,促进情感交流。在线体验地址已提供,鼓励读者动手尝试,探索编程与AI结合的无限可能。
三句话开发一个刮刮乐小游戏!暖ta一整个冬天!
|
15天前
|
消息中间件 人工智能 运维
12月更文特别场——寻找用云高手,分享云&AI实践
我们寻找你,用云高手,欢迎分享你的真知灼见!
1184 72