微信小程序日记、微信小程序个人空间、个人日记

news2025/1/12 18:51:12

一.简述

个人比较喜欢微信小程序，因为小程序所追求的用户体验、代码质量、美观的样式，简单方便丰富的api、样式封装等，同时又与普通的前端开发非常相似，让人很容易就上手。

这篇博客介绍的是一款记录个人/家庭日常记录的微信小程序。

二.效果预览

日记列表+详情
在这里插入图片描述
我的
在这里插入图片描述
编辑日记
在这里插入图片描述
编辑日记
在这里插入图片描述
在这里插入图片描述
可选择文字、图片或视频类型的日记
在这里插入图片描述

三.实现过程

主要分为四个页面：

  1. 日记列表
  2. 我的
  3. 日记详情
  4. 编辑发布日记

配置app.json，配置路由、菜单、导航栏样式等

{
    "pages": [
        "pages/list/list",
        "pages/mine/mine",
        "pages/new/new",
        "pages/entry/entry"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#F56C6C",
        "navigationBarTitleText": "愛芳芳の日记",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#eceff4"
    },
    "tabBar": {
        "color": "#858585",
        "selectedColor": "#F56C6C",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/list/list",
                "iconPath": "images/icons/list.png",
                "selectedIconPath": "images/icons/list_active.png",
                "text": "印记"
            },
            {
                "pagePath": "pages/mine/mine",
                "iconPath": "images/icons/my.png",
                "selectedIconPath": "images/icons/my_active.png",
                "text": "我的"
            }
        ]
    },
    "debug": true,
    "sitemapLocation": "sitemap.json"
}

模拟后端接口返回数据，json格式，创建日记列表，数组对象格式，每一个对象包含发布人信息，以及其发布的日记（日记含三种类型，文字、图片和视频）。

var diaries = [
  {
    meta: {  // 内容元数据
      cover: "http://124.223.118.176/img/wx1.jpg",
      avatar: "http://124.223.118.176:8089/image/770325b3dac241a09316488471d9dce8.jpg",
      title: "此刻静好，愿幸福长存",
      meta: "2022.10.17",
      create_time: "2022.10.18 11:57:27",
      nickName: "love",
    },
    list: [
      {
        type: "TEXT",
        content: '9月11日，15年的911事件使这天蒙上了特殊的意义。2016年的这一天，怀着激动的心情，开启了高原寻秘之旅，向着那圣洁之地出发。全程自驾近2000公里，雨崩徒步80公里，完成觐见之旅。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "北京市",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
          type: "IMAGE",
          content: 'http://124.223.118.176/img/img4.jpg',
          poi: {
              longitude: 117.2,
              latitude: 37.5,
              name: "深圳市",
          },
          description: "深圳宝安国际机场",
          id: 2,
          commentNum: 1,
          likeNum: 5,
      },
      {
        type: "IMAGE",
        content: 'http://124.223.118.176/img/img4.jpg',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "丽江三义机场",
        },
        description: "丽江三义机场",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
      {
        type: "TEXT",
        content: ' 玉水寨在白沙溪镇，是纳西族中部地区的东巴圣地，是丽江古城的溯源。\n\nTips:门票50元/人，游玩时间2小时。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "玉水寨",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "IMAGE",
        content: 'http://124.223.118.176/img/img4.jpg',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "玉水寨",
        },
        description: "阳光下的玉水寨",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
      {
        type: "VIDEO",
        content: 'https://video.699pic.com/videos/84/33/48/b_yNziFHXbwwXy1669843348.mp4',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "深圳宝安国际机场",
        },
        description: "",
        id: 2,
        commentNum: 10,
        likeNum: 200,
      },
    ]
  },
  {
    meta: {  // 内容元数据
      cover: "http://124.223.118.176/img/wx2.jpg",
      avatar: "http://124.223.118.176:8089/image/73c381acd05743dcbcc82026605d7498.jpg",
      title: "梦想实现的地方-马达加斯加第二季",
      meta: "2022.8.10",
      create_time: "2022.10.18 11:57:27",
      nickName: "愛芳芳",
    },
    list: [
      {
        type: "TEXT",
        content: '2012年十一，我和朋友一行五人第一次登上这个被非洲大陆抛弃的岛屿，看到了可爱的狐猴，憨态可掬的变色龙，明信片一样的猴面包树，天真的孩子淳朴的人民，结识了我们生命中一个重要的朋友导游小温（可以加地接小温QQ或微信咨询：109300820），从此，我们爱上了这片土地。马达加斯加是一个海岛，一年分成旱季和雨季，没有特别的低温或者高温季节，几乎全年都适合旅游，只是观赏的重点略有不同而已。 \n导游小温向我们介绍，在这里，每年的7月到9月，可以近距离观看座头鲸，于是，我们从那时开始期待这个夏季的到来。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "TEXT",
        content: '第一天 8月10日 天气晴\n\n长时间的飞行，多少会有一些枯燥，然而只要你愿意，依然可以看到心中的那片风景。 \n嗨！别郁闷了，和我一起到三万英尺的高空来看云。 \n喜欢飞机起飞的刹那间，加速再加速直到脱离开地球的引力冲向自由的天空。喜欢像鸟一样俯视地面的视角，高高在上，笑看人间。 \n天，蓝，云，白。机窗外的云时而像珍珠点点，时而像棉絮团团。\n夕阳将至，云和机翼被镀上一层华丽的金。 \n金红色的阳光与蓝色的天空最终合成出一片淡淡的紫，绚丽而梦幻。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "IMAGE",
        content: 'http://p.chanyouji.cn/64695/1377177446705p182j2oa9031j1p0b5vpuvj1voj2.jpg-o',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
    ]
  },
  {
    meta: {  // 内容元数据
      cover: "http://124.223.118.176/img/wx3.jpg",
      avatar: "http://124.223.118.176:8089/image/d26c6e5e52154fa797155ed1010b64e4.jpg",
      title: "梦想实现的地方-马达加斯加第二季",
      meta: "2022.8.10",
      create_time: "2022.10.18 11:57:27",
      nickName: "愛芳芳",
    },
    list: [
      {
        type: "TEXT",
        content: '2012年十一，我和朋友一行五人第一次登上这个被非洲大陆抛弃的岛屿，看到了可爱的狐猴，憨态可掬的变色龙，明信片一样的猴面包树，天真的孩子淳朴的人民，结识了我们生命中一个重要的朋友导游小温（可以加地接小温QQ或微信咨询：109300820），从此，我们爱上了这片土地。马达加斯加是一个海岛，一年分成旱季和雨季，没有特别的低温或者高温季节，几乎全年都适合旅游，只是观赏的重点略有不同而已。 \n导游小温向我们介绍，在这里，每年的7月到9月，可以近距离观看座头鲸，于是，我们从那时开始期待这个夏季的到来。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "TEXT",
        content: '第一天 8月10日 天气晴\n\n长时间的飞行，多少会有一些枯燥，然而只要你愿意，依然可以看到心中的那片风景。 \n嗨！别郁闷了，和我一起到三万英尺的高空来看云。 \n喜欢飞机起飞的刹那间，加速再加速直到脱离开地球的引力冲向自由的天空。喜欢像鸟一样俯视地面的视角，高高在上，笑看人间。 \n天，蓝，云，白。机窗外的云时而像珍珠点点，时而像棉絮团团。\n夕阳将至，云和机翼被镀上一层华丽的金。 \n金红色的阳光与蓝色的天空最终合成出一片淡淡的紫，绚丽而梦幻。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "IMAGE",
        content: 'http://p.chanyouji.cn/64695/1377177446705p182j2oa9031j1p0b5vpuvj1voj2.jpg-o',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
    ]
  }
]

module.exports = {
  diaries: diaries,
}

微信小程序官方文档：点击访问

这里照片用到swiper：

视图容器 / swiper /

# swiper

基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持

微信 Mac 版：支持

# 功能描述

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

# 属性说明

Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的 index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值1.9.0
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值1.9.0
snap-to-edgebooleanfalse否当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1否同时显示的滑块数量1.9.0
easing-functionstring"default"否指定 swiper 切换缓动动画类型2.6.5
合法值说明
default默认缓动函数
linear线性动画
easeInCubic缓入动画
easeOutCubic缓出动画
easeInOutCubic缓入缓出动画
bindchangeeventhandle否current 改变时会触发 change 事件，event.detail = {current, source}1.0.0
bindtransitioneventhandle否swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle否动画结束时会触发 animationfinish 事件，event.detail 同上1.9.0
属性类型默认值必填说明最低版本
scroll-with-animationbooleantrue否改变 current 时使用动画过渡2.29.0
cache-extentnumber0否缓存区域大小，值为 1 表示提前渲染上下各一屏区域（swiper 容器大小）2.29.0
previous-marginstring"0px"否不支持
next-marginstring"0px"否不支持
snap-to-edgebooleanfalse否不支持

# change事件 source 返回值

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

  1. autoplay 自动播放导致 swiper 变化；
  2. touch 用户划动引起 swiper 变化；
  3. 其它原因将用空字符串表示。

# Bug & Tip

  1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
  2. tip: 在 mac 小程序上，若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现）

四.总结

后期有时间，会不断完善小程序，有兴趣的小伙伴可以关注留意！
有什么问题请留言或私聊、或通过博客后面名片添加作者呢！

后期有时间会增加小程序登录、点赞、评论等功能，增加后端接口调用，是的，管理后台也需要，把日记小程序完善成一个产品，应该还蛮有趣的，毕竟简单好用的东西谁不喜欢呢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/365802.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VsCode开发工具的入门及基本使用

VsCode开发工具的入门及基本使用

VsCode开发工具的入门及基本使用一、VsCode介绍1.VsCode简介2.VsCode特点二、安装VsCode1.下载VsCode2.安装VsCode3.打开VsCode三、设置VsCode中文1.搜索中文语言插件2.安装中文语言插件四、初识VsCode1.VsCode左侧栏模块2.系统设置功能五、VsCode初始配置1.禁用自动更新2.开启…
阅读更多...
MQTT 5协议你知道多少？

MQTT 5协议你知道多少？

一、MQTT 5简介 MQTT协议是当今世界上最流行、接受度最高的物联网协议。自推出以来，MQTT已经成功地连接了各种规模的部署中的无数受限设备。 流行的用例包括从连接汽车、制造系统、物流和军事到企业聊天应用程序和移动应用程序。MQTT协议的广泛使用催生了进一步发…
阅读更多...
【离线数仓-5-数据仓库环境准备】

【离线数仓-5-数据仓库环境准备】

离线数仓-5-数据仓库环境准备离线数仓-5-数据仓库环境准备1.数据仓库运行环境1.Hive环境搭建1.Hive引擎2.Hive on Spark配置2.Yarn环境配置2.数据仓库开发环境3.模拟数据准备离线数仓-5-数据仓库环境准备 1.数据仓库运行环境 数仓之外需要做的事情： 数据安全认证&…
阅读更多...
OSCP-课外2（git泄露、SQL注入）

OSCP-课外2（git泄露、SQL注入）

难度 中 主机发现&端口扫描 sudo arp-scan -l sudo nmap -p- 192.168.65.128 sudo nmap -p22,80 -sC -sV 192.168.65.128 首先，发现了.git目录，可能通过代码审计发现漏洞的存在。 其次，发现了一个描述“login.php修改的更安全”，说明以前login.php版本可能存在安全…
阅读更多...
活动预告 | 2023 Meet TVM 开年首聚，上海我们来啦！

活动预告 | 2023 Meet TVM 开年首聚，上海我们来啦！

内容一览：从去年 12 月延期至今的 TVM 线下聚会终于来了！首站地点我们选在了上海，并邀请到了 4 位讲师结合自己的工作实践，分享 TVM 相关的开发经验，期待与大家线下相聚~ 关键词：2023 Meet TVM 线下活动 自…
阅读更多...
操作系统（day15） -- I/O设备

操作系统（day15） -- I/O设备

I/O设备的基本概念与分类 I/O设备就是可以将数据输入到计算机，或者可以接收计算机输出数据的外部设备，属于计算机中的硬件部分。 I/O设备按使用特性可以分为以下类型： 人机交互类设备。用于与计算机用户之间交互的设备，如打印机、…
阅读更多...
华为OD机试用Python实现 -【组合出合法最小数】(2023-Q1 新题)

华为OD机试用Python实现 -【组合出合法最小数】(2023-Q1 新题)

华为OD机试300题大纲 参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。 华为 OD 清单查看地址：blog.csdn.net/hihell/category_12199275.html 华为OD详细说明：https://dream.blog.csdn.net/article/details/128980730 组合出合法最小数…
阅读更多...
原子化 CSS 实践

原子化 CSS 实践

原子化 CSS 实践 jcLee95 的CSDN 博客 邮箱 ：291148484163.com CSDN 主页：https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 本文地址：https://blog.csdn.net/qq_28550263/article/details/129178547 目 录1. 概述 2. 原子化…
阅读更多...
Flutter+【三棵树】

Flutter+【三棵树】

定义 在Flutter中和Widgets一起协同工作的还有另外两个伙伴：Elements和RenderObjects；由于它们都是有着树形结构，所以经常会称它们为三棵树。 这三棵树分别是：Widget、Element、RenderObject Widget树：寄存烘托内容…
阅读更多...
代码随想录---二叉树的总结和二叉树的定义

代码随想录---二叉树的总结和二叉树的定义

二叉树的种类： 满二叉树：树的所有节点都是满，即都有左右孩子。 这棵二叉树为满二叉树，也可以说深度为k，有2^k-1个节点的二叉树。 完全二叉树：完全二叉树的定义如下：在完全二叉树中&#xff0c…
阅读更多...
数据结构—堆（完全解析）

数据结构—堆（完全解析）

数据结构—堆（完全解析） 数据结构——堆（Heap）大根堆、小根堆 详解数据结构——堆 堆的基本存储 【从堆的定义到优先队列、堆排序】 10分钟看懂必考的数据结构——堆 【堆/排序】堆排序的两种建堆方法 【算法】排序算法之堆排序 C…
阅读更多...
【Tips】通过背数据了解业务

【Tips】通过背数据了解业务

学习资料：做了三年数据分析，给你的几点建议 1. 通过背数据了解业务 原文： 总结： 方法：每天早上去到公司第一件事情就是先背一遍最新的各种指标。原理： 数据敏感性就是建立在对数据的了解和熟悉上。业务的…
阅读更多...
使用Autoware标定工具包联合标定相机和激光雷达

使用Autoware标定工具包联合标定相机和激光雷达

前面文章介绍了，安装autoware标定工具包、ros驱动usb相机、robosense-16线激光雷达的使用，本文记录使用Autoware标定工具包联合标定相机和激光雷达的过程。1.ros驱动相机，启动相机；启动激光雷达2.联合录制bag包rosbag record -a 参…
阅读更多...
由浅入深了解超文本传输协议http

由浅入深了解超文本传输协议http

什么是超文本传输协议？ 超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 通过HTTP或HTTPS协议请求…
阅读更多...
8年测开经验面试28K公司后，吐血整理出1000道高频面试题和答案

8年测开经验面试28K公司后，吐血整理出1000道高频面试题和答案

1、python的数据类型有哪些 答：Python基本数据类型一般分为：数字、字符串、列表、元组、字典、集合这六种基本数据类型。 浮点型、复数类型、布尔型(布尔型就是只有两个值的整型)、这几种数字类型。列表、元组、字符串都是序列。 2、列表和元组的区别 答…
阅读更多...
postgresql 数据库 主从切换 测试

postgresql 数据库 主从切换 测试

postgresql 数据库 主从切换 测试 文章目录postgresql 数据库 主从切换 测试前言环境：主从切换1. 查看数据库状态：2. 备库切换主库3. 旧主库切换成备库；4 查看状态后记前言 因数据库等保需要，需要对老系统的数据库进行主从切换来…
阅读更多...
【企业云端全栈开发实践-2】Spring Boot Controller

【企业云端全栈开发实践-2】Spring Boot Controller

本节目录一、Web入门二、控制器1、Controller2、RestController3、路由映射4、Method匹配5、参数传递6、entity实体层一、Web入门 Spring Boot将传统Web开发的mvc、json、tomacat等框架整合，提供了spring-boot-starter-web组件，简化了Web的应用配置。 …
阅读更多...
一条推送的背后运营逻辑

一条推送的背后运营逻辑

每天我们的手机都收到大量信息，大多来自各APP的推送。每收到一条推送，不只是收到了一串简单的文字，背后还有一系列的隐藏逻辑。几年前我也做过“推送背后的女人”……（其实就是干过APP消息推送运营啦~^^~）今天就来分享…
阅读更多...
【Java 面试合集】String， StringBuffer和StringBuilder 之间的不同

【Java 面试合集】String， StringBuffer和StringBuilder 之间的不同

String， StringBuffer和StringBuilder 之间的不同 1. 概述 嗨，大家好【Java 面试合集】又来了，今天我们分享的主题是String， StringBuffer和StringBuilder 之间的不同。 大家别看这个知识点不难，但是里面的细知识很多…
阅读更多...
利用Python实现局部异常因子(LOF)的计算

利用Python实现局部异常因子(LOF)的计算

1 LOF算法 局部异常因子(Local Outlier Factor，LOF)算法是目前比较常用的离群点检测算法，该算法通过一种模糊的手段来判断数据对象是否为异常点。 对象ppp的kkk距离：在数据集DDD中，将对象ppp与距其第kkk远的对象ooo之间的距离定义…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023