最近我决定开始一个新项目——自己动手开发一个鸿蒙 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 的使用，还进一步体会到了鸿蒙系统在保护用户隐私和数据安全方面的设计。在开发的过程中，权限管理确实让我感到了一些挑战，但也让我更加明白，作为开发者，我们有责任保护用户的数据安全，而这些必要的权限检查和声明，正是实现这一目标的重要手段。
总之又完成了一项挑战，未来还会继续研究相关技术，喜欢的朋友可以关注+收藏哦～！
评论