• 背景

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

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

“历史上的今天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, //解析字符串结果

        hid: true,

      });

    }).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

• 小程序码



• 团队介绍

大学生，软件工程专业。