当前位置：首页 > article >正文

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

article 2024/12/2 4:17:50

最近我决定开始一个新项目——自己动手开发一个鸿蒙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);
    });
}

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