- 背景
微信小程序是一种不需要下载安装即可使用的应用。它实现了“触手可及”的梦想,用户扫一扫或者搜一搜即可打开应用,也体现了“用完即走”的理念,用户不用关系是否安装太多应用问题。应用将无处不在,即时可用,但又无需安装卸载,便可便捷地获取服务,功能丰富,用户体验出色,并且提供了一系列的组件接口,开发快速,被称之为“一种新的应用形态”。
人类创造了几千年的历史进程,常有着“以史为镜”的忠告,告诫每一代人多读史,多思史。但现今社会信息时代快速发展,人们的快节奏生活造成大多数人们静下来读一本史书称为一种奢侈。人们了解历史了解过去的主动性积极性大幅下降,我们正深刻认识到历史在逐渐被遗忘的危机。
“历史上的今天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
- 小程序码
- 团队介绍
大学生,软件工程专业。
这个设计还是挺棒的。
哎哟,不错哦