草庐IT

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

愛芳芳 2023-05-07 原文

一.简述

个人比较喜欢微信小程序，因为小程序所追求的用户体验、代码质量、美观的样式，简单方便丰富的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 配置项，该内置组件可能会出现非预期表现）

四.总结

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

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

个人空间微信小程序spanclasstoken小程序前端

有关微信小程序日记、微信小程序个人空间、个人日记的更多相关文章

  1. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  2. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  5. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

  6. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  7. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  8. ruby 认为我在引用一个顶级常量，即使我指定了完整的命名空间 - 2

    在我的应用程序中我有classUserincludeUser::FooendUser::Foo定义在app/models/user/foo.rb现在我正在使用一个定义了自己的Foo类的库。我收到此错误:warning:toplevelconstantFooreferencedbyUser::FooUser仅引用具有完整路径的Foo，User::Foo，而Foo实际上从来没有指的是Foo。这是怎么回事？更新:才想起我之前遇到过同样的问题，在问题1中看到这里:HowdoIrefertoasubmodule's"fullpath"inruby? 最佳答案

  9. Ruby 命名空间与类还是模块？ - 2

    考虑Ruby类Foo::Bar。惯例是将“Foo”命名空间作为一个模块，但它也可以很容易地作为一个类:moduleFoo;classBar;end;end对比:classFoo;classBar;end;end在第二种情况下，Bar不是Foo的内部类，它只是在Foo的单例上定义的另一个常量。在这两种情况下，父类(superclass)都是Object并且它们只包含Kernel模块。它们的祖先链是相同的。因此，除了您可以根据其类使用Foo进行的操作(如果是类则实例化，如果是模块则扩展/包含)，命名空间的性质是否对有任何影响酒吧？是否有令人信服的理由选择其中一个名称间距而不是另一个？我看到

  10. ruby - 如何在命名空间类中包含模块？ - 2

    我在将模块包含在命名空间类中时遇到问题。下面的示例抛出错误uninitializedconstantBar::Foo::Baz(NameError)。我在这里缺少哪些基本的Ruby知识？moduleFoomoduleBazdefhelloputs'hello'endendendmoduleBarclassFooincludeFoo::Bazendendfoo=Bar::Foo.new 最佳答案 使用::强制查找到顶层:moduleBarclassFooinclude::Foo::Bazendend

随机推荐