简约历史上的今天uniapp小程序页面解析附案例

最近把创果工具箱重新写了一边，但是不知道加些什么功能，然后就慢慢一个一个功能的添加，看到手机日历里面的历史上的今天感觉还不错，所以打算也写一个，原本是打算直接通过网页爬取获取信息的，后来发现百科历史上的今天有一个API接口，所以就直接轻松调用了。接口如下：

https://baike.baidu.com/cms/home/eventsOnHistory/01.json

其中01代表的是月份，这个接口可以获取整个月的所有信息，然后我们获取到资源后更具需求自己找到对应的日子的信息就可以了，然后将获取到的信息进行css美化就基本ok了，很简单，但是应该有点小用吧。

获取当前月份

这个就很简单了，毕竟稍微懂点js的人应该都知道怎么获取系统当前时间，这里简单说一下，经过测试接口月份必须是两位数，也就是说如果你接口后缀为1.json是直接404的，所以获取到月份后还需要稍微做一下处理，贴个简单的代码：

let date = new Date();
let month = date.getMonth() + 1;
if (month < 10) {
   month = '0' + month;
}

这里做了一个简单的if，当月份小于10的时候给月份前面加一个0。

请求接口

请求地址做一个简单的拼接就好了，如下：

"https://baike.baidu.com/cms/home/eventsOnHistory/"+ month + ".json"

或者​如下：

 `https://baike.baidu.com/cms/home/eventsOnHistory/${month}.json` 

获取当日信息

获取到的信息通过键找到对应的日子就可以了，如下​：

getHistory: function(month, monthDay) {
      uni.showLoading({
        title: '加载中'
      });
      uni.request({
        url: `https://baike.baidu.com/cms/home/eventsOnHistory/${month}.json`,
        success: res => {
          uni.hideLoading();
          this.dataList = res.data[month][monthDay];
          console.log(res.data[month][monthDay]);
        }
      });
    }

其中month为月份，monthDay为当日键值，例如4月24为0424，这个​值可以更具一下方式获取：

getTime() {
      let date = new Date();
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      let day = date.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      let monthDay = '' + month + day;
      return monthDay;
}

以上数据获取就算是完成了，至于数据样式怎么处理大家就自己看吧，大致方法就是这样了​。给大家​提供一个简单的页面案例，如果感兴趣的或可以自行下载查看。

源码下载方式

① 下载地址：https://download.csdn.net/download/qq_39653624/17479874

② 也可以扫描下方小程序码进入小程序通过激励广告获取资源。

​