基于 uniapp 的个人日记应用开发解析：打造专属记录空间

在移动应用开发领域，uniapp 凭借其跨平台特性深受开发者喜爱。今天，我们就来剖析一个基于 uniapp 开发的个人日记应用，看看它是如何实现基本的日记记录、展示、编辑和删除等功能的，同时还包含图库查看等特色模块。老规矩，先上效果图！

一、应用功能概述

 

这个日记应用主要有以下核心功能：

 

1. 日记记录与展示：支持用户添加新日记，日记内容包含文本和图片。在日记列表页面，按时间倒序展示所有日记，点击日记可进行编辑，长按可删除。
2. 图片处理：在记录日记时能选择多张图片添加，还能在编辑页面删除已添加图片。图库页面会将所有日记中的图片分组展示，方便用户查看。
3. 界面交互：通过动画效果提升用户体验，像日记列表进入时有滑动动画，文本框聚焦和失焦有缩放动画，图库图片进入有淡入动画。

二、核心代码解析

 

（一）日记列表页面（list.vue）

 

1. 模板部分：使用v-for指令遍历diaryList，展示每篇日记的日期、内容和图片。给每个日记项绑定长按删除@longpress="deleteDiary(diary.id)"和点击编辑@click="editDiary(diary)"事件，还利用animation属性实现入场动画。

   
     {
       
       { formatDate(diary.date) }}
     {
       
       { diary.content }}
     
       
         
       
     
   

    

2. 脚本部分：loadDiaries方法从本地存储读取日记数据并按时间排序。deleteDiary方法在用户确认后删除指定日记，editDiary方法携带日记数据跳转到编辑页面，initAnimation方法实现列表入场动画。

   loadDiaries() {
     const diaries = uni.getStorageSync('diaries') || [];
     this.diaryList = diaries.sort((a, b) => new Date(b.date) - new Date(a.date));
   },
   deleteDiary(id) {
     uni.showModal({
       title: '确认删除',
       content: '确定要删除这篇日记吗？',
       success: (res) => {
         if (res.confirm) {
           let diaries = uni.getStorageSync('diaries') || [];
           const index = diaries.findIndex(diary => diary.id === id);
           if (index!== -1) {
             diaries.splice(index, 1);
             uni.setStorageSync('diaries', diaries);
             this.loadDiaries();
           }
         }
       }
     });
   },
   initAnimation() {
     const systemInfo = uni.getSystemInfoSync();
     const screenWidth = systemInfo.screenWidth;
     const animation = uni.createAnimation({
       duration: 1000,
       timingFunction: 'ease-in-out'
     });
     animation.translateX(-screenWidth).step();
     this.diaryAnimation = animation.export();
     setTimeout(() => {
       animation.translateX(0).step();
       this.diaryAnimation = animation.export();
     }, 100);
   }

   （二）日记创建 / 编辑页面（create.vue）

    

3. 模板部分：textarea用于输入日记内容，绑定v-model="diaryContent"实现数据双向绑定。通过@focus和@blur事件控制文本框缩放动画。添加图片按钮和已添加图片展示区域，每个图片可删除和预览。

   
   
   
     
       
         删除
       
     
   

    

4. 脚本部分：chooseImage方法调用uni.chooseImage选择图片并添加到images数组，deleteImage方法删除指定图片，saveDiary方法保存日记，存在diaryId时更新原有日记，否则新增日记。

   chooseImage() {
     uni.chooseImage({
       count: 9,
       success: (res) => {
         this.images = this.images.concat(res.tempFilePaths);
       }
     });
   },
   deleteImage(index) {
     this.images.splice(index, 1);
   },
   saveDiary() {
     let diaries = uni.getStorageSync('diaries') || [];
     const newDiary = {
       id: this.diaryId || Date.now() + Math.random().toString(36).substr(2, 5),
       date: this.originalDate || new Date().toLocaleString(),
       content: this.diaryContent,
       images: this.images
     };
     if (this.diaryId) {
       const index = diaries.findIndex(item => item.id === this.diaryId);
       if (index!== -1) {
         diaries.splice(index, 1, newDiary);
       }
     } else {
       diaries.push(newDiary);
     }
     uni.setStorageSync('diaries', diaries);
     this.diaryContent = '';
     this.images = [];
     this.originalDate = '';
     this.diaryId = null;
     uni.switchTab({
       url: '/pages/list/list'
     });
   }

   （三）图库页面（gallery.vue）

    

5. 模板部分：利用v-for指令嵌套循环，按行展示图片。给每行图片绑定入场动画imageRowAnimation，每个图片项绑定点击预览事件。

    

6. 脚本部分：fetchAllImages方法从本地存储读取所有日记，提取图片并调用groupImagesIntoRows方法按每行三张图片进行分组，initImageRowAnimation方法实现图片行淡入动画。

   fetchAllImages() {
     const diaries = uni.getStorageSync('diaries') || [];
     this.allImages = [];
     diaries.forEach(diary => {
       this.allImages.push(...diary.images);
     });
     this.groupImagesIntoRows();
   },
   groupImagesIntoRows() {
     const rows = [];
     for (let i = 0; i < this.allImages.length; i += 3) {
       rows.push(this.allImages.slice(i, i + 3));
     }
     this.imageRows = rows;
   },
   initImageRowAnimation() {
     const animation = uni.createAnimation({
       duration: 1000,
       timingFunction: 'ease-in-out'
     });
     animation.opacity(0).step();
     this.imageRowAnimation = animation.export();
     setTimeout(() => {
       animation.opacity(1).step();
       this.imageRowAnimation = animation.export();
     }, 100);
   }

   三、总结与展望

    

   通过上述核心代码解析，我们了解了这个 uniapp 日记应用的基本开发思路。它利用 uniapp 的本地存储、组件交互和动画功能，实现了较为完善的日记管理系统。未来可以进一步优化的方向有：增加密码锁功能提升日记隐私性；支持语音输入提高记录效率；优化图片加载性能，比如使用图片懒加载的更高级策略等。希望本文能为 uniapp 开发者提供一些灵感，助力大家开发出更优秀的应用。有需要安装包或者源码的朋友们可以私信我！