评论

#小程序云开发挑战赛#-历史上的今天TIH-专业团队

邂逅与往日,重逢在今天。


  • 背景

微信小程序是一种不需要下载安装即可使用的应用。它实现了“触手可及”的梦想,用户扫一扫或者搜一搜即可打开应用,也体现了“用完即走”的理念,用户不用关系是否安装太多应用问题。应用将无处不在,即时可用,但又无需安装卸载,便可便捷地获取服务,功能丰富,用户体验出色,并且提供了一系列的组件接口,开发快速,被称之为“一种新的应用形态”。

人类创造了几千年的历史进程,常有着“以史为镜”的忠告,告诫每一代人多读史,多思史。但现今社会信息时代快速发展,人们的快节奏生活造成大多数人们静下来读一本史书称为一种奢侈。人们了解历史了解过去的主动性积极性大幅下降,我们正深刻认识到历史在逐渐被遗忘的危机。

“历史上的今天TIH”是一款浏览、查询、分享历史事件的微信小程序。“TIH”为“Today in History”的单词首字母缩写。该小程序以不同日期装载并呈现不同历史内容,即时浏览了今日日期的历史事件,也可查询任意一天的历史事件。“历史上的今天”所需实现的功能内容简单,这也正与微信小程序“用完即走”的产品理念一拍即合,配以极简扁平化的页面设计,让人们了解历史、阅读历史时有着更舒适、更轻便、更贴切生活的优质体验。

  • 简介

微信小程序“历史上的今天”主打历史阅读类,以日期分类历史事件方式,更直观展示人类千年变更进程。该小程序主要实现:呈现每日历史事件列表、查询任意日期的历史事件、该历史事件的详情页面、分享功能。追求极简高级的UI设计与视觉体验。该小程序内容简洁,做到满足用户了解历史阅读历史、分享社交的需求,不繁杂不累赘,以当前流行的小程序来实现这一内容需求是相当贴切。

  • 主要功能
首页

首页由两部分组成:上半部分的轮播图展示,下半部分的今日时间。轮播图部分为不定期精选的图片、配以logo及标语制作的海报,向用户呈现我们小程序的主打内容与风格定位;今日时间精确至当天的年月日,采用了数字滚动动画的方式呈现。

今日历史页

左边标签是呈现今日历史内容一览的页面。通过“年份最近”和“年份最远”两个按钮,可以切换历史事件列表的先后顺序,供用户按照自己的喜好来选择;页面右下角有“分享”按钮,可供用户把自己感兴趣的内容分享至好友、朋友圈或更多;当往下滑时,右下角会多出现一个“一键置顶”按钮,帮助用户在浏览阅读过程之中快速回到顶部;点击任一列你感兴趣的历史事件下方的“更多”,即可进入该历史事件的详情页,可了解更多该历史事件的相关文段、信息及图片。

查询页

右边标签的“查询”可进行查询你所想要查询的任意一个日期的历史上事件汇总。根据提示“请输入你要查询的日期”,在日期选择器中选择后确定,再点击“确定查询”按钮,待加载动画结束后便呈现你想要的内容;页面右下角有“分享”按钮,可供用户把自己感兴趣的内容分享至好友、朋友圈或更多;当往下滑时,右下角会多出现一个“一键置顶”按钮,帮助用户在浏览阅读过程之中快速回到顶部;点击任一列你感兴趣的历史事件下方的“更多”,即可进入该历史事件的详情页,可了解更多该历史事件的相关文段、信息及图片。

历史详情页

当你点击你所感兴趣的历史事件条目中的“更多”,即可进入详情页。历史详情页主要展示更多相关文段、信息、图片,让感兴趣的用户了解更多历史知识,丰富见解;页面右下角有“分享”按钮,可供用户把自己感兴趣的内容分享至好友、朋友圈或更多;当往下滑时,右下角会多出现一个“一键置顶”按钮,帮助用户在浏览阅读过程之中快速回到顶部;阅读完后,页面左上有返回键返回上一级页面

分享功能

该小程序任意部分都添加了分享功能,满足用户的分享社交需求,也能通过分享吸引更多用户一起养成每日了解一点历史,阅读一点历史的好习惯。

  • 部分功能的设计与实现

(1)今天历史内容模块

进入到“今日”历史页,首先将获取今日的日期数。我们构建了专调用api借口的云函数,当进入“今日”页将自动触发该云函数,获取到日和月的数值传给api链接,获得result数据。解析result至数组,遍历输出数值。

wx.showNavigationBarLoading()

   wx.cloud.callFunction({

     name:'historylist',

     data:{

       start:this.data.historyList.length,

       count:10

     }

   }).then(res=>{

     console.log(res);

     this.setData({

        //年份最近

       historyList:this.data.historyList.concat(JSON.parse(res.result).result).reverse(),

        //年份最远

       historyList2:this.data.historyList.concat(JSON.parse(res.result).result),

       hid:true,

     });

   }).catch(err=>{

     console.error(err);

   })

   wx.hideNavigationBarLoading({

     complete(res) => {

       console.log("1");

     },

   })

(2)查询日期模块

进入查询页点击触发bindDateChange事件,打开日期选择器组件picker,选择任意日期点击确定。由于获取的values是特定格式的字符串,所以额外将获取数值后转换成数值,即可获取日和月两个独立数值。

bindDateChange:function(event){

    var select = event.detail.value;

    var select_1 = select.split("-");

    this.setData({

      m:select_1[1],

      d:select_1[2],

    })

  },

在点击“确定查询”按钮时,触发getlist事件,将获取的日期值传给处理该api接口的云函数,调用云函数返回result值再处理呈现。

(3)历史事件详情模块

点击“更多”触发gotodetail事件,从wxml获取对应id,在js中跨页传递给detail页,

gotodetail: function(event){

  wx.navigateTo({

    url`../detail/detail?historyid=${event.target.dataset.historyid}`,

  });

},

并调用历史事件详情信息的api接口的云函数,获取result经过解析后,返回呈现至wxml。

 onLoad: function (options{

    console.log(options);

    wx.cloud.callFunction({

      name:'getdetail',

      data:{

        historyid:options.historyid

      }

    }).then(res=>{

      console.log(res);

      this.setData({

        detail:JSON.parse(res.result).result, //解析字符串结果

        hidtrue,

      });

    }).catch(err=>{

      console.error(err);

    })

  },

(4)回到顶部事件

监听wxml,如有往下划动动作,原先true隐藏的“回到顶部”按键改为false隐藏,出现在右下。

  var that=this;

  if(e.scrollTop > 50){

    that.setData({

      up_show:true

    })

  }

  if(e.scrollTop < 50){

    that.setData({

      up_show:false

    })

  }

},

点击即触发gotop事件,将scroTop值设置为0,回到初点位置。

//点击置顶

gotop:function(e){

  if(wx.pageScrollTo){

    wx.pageScrollTo({

      scrollTop:0

    })

  }else{

    wx.showModal({

      title:'错误',

      content:'微信版本过低',

    })

  }

},


  • 应用场景

微信小程序“历史上的今天”主打简洁时尚的历史阅读科普类小程序,其应用场景广泛且自由。根据上图表现的五大应用场景元素时间、空间、场景、用户、需求来分析:时间与空间基本不受限制。任何时间任何地点,只要手机能够使用微信app,都可通过扫码或搜索找到“历史上的今天TIH”小程序使用;用户群体也相当广泛,小程序内容老少皆宜,尤其是对历史知识感兴趣的,或是更喜欢以日期梳理时间线方式阅读历史的,喜欢阅读知识的用户;需求方面,可以是对历史知识感兴趣的,可以是想了解特定某天日期的历史事件的,亦或是打发休闲时间,亦或是想丰富知识开拓视野,放松心情,“历史上的今天TIH”都是个不错的选择。


  • 效果界面

我们采用极简主义设计风格,色调主要黑白灰的冷淡感,带来清爽舒适的视觉体验,营造更时尚优雅的历史学习阅读氛围。


  • 后记

我们现在生活过的每一天似乎枯燥平凡,但纵观历史上都是喜忧参半。一年里有限的365天,一天里有限的24小时,对于大多数的我们而言是平淡无奇,是淡而无味,是普通的无所事事或夜以继日。但是把每一个x月x日,放在滚滚向前历史长河里来看,原来在人类几千年的历史进程里,会有这么多人,做过这么多事,有过这么多发现、创造、思想,我们会由衷感受到,原来我所度过这一天是那样的有意义,那样的不平凡。历史时人类给予人类的震撼和力量。

“历史上的今天TIH”,是以日期划分历史事件时间轴,将千年历史通过不同日期以不同的内容分类,一下子把这种“震撼和力量”的感受呈现得相当直观。而近几年新兴的微信小程序其“触手可及,用完即走”“轻量化造作”的特点,让“历史上今天”所需的简洁功能基于微信小程序上,能更好地贴近大众生活,融入大众日常,这一结合把需求与体验感发挥到极致。

历史可以不是教科书上要死记硬背冲考卷那样乏味,可以不像一本厚重历史资料书那样地遥远的距离感。以日期为重逢的切入点,把读史变成一场随时随地的穿越之旅,在平淡的生活里来一场与历史的邂逅。

我们的微信小程序“历史上的今天TIH”要表达的就是这样的一种浪漫。


  • 展示视频

腾讯视频: https://v.qq.com/x/page/y3152d0v0mn.html


  • 代码链接

码云:https://gitee.com/frozengk/wechat-applet


  • 小程序码





  • 团队介绍

大学生,软件工程专业。









最后一次编辑于  2020-09-19  
点赞 19
收藏
评论

2 个评论

  • 青寒
    青寒
    2020-09-22

    这个设计还是挺棒的。

    2020-09-22
    赞同
    回复
  • 洛·神
    洛·神
    2020-09-21

    哎哟,不错哦

    2020-09-21
    赞同
    回复
登录 后发表内容