1小时实战入门小程序开发，历史上的今天案例讲解

咱们前面学了这么多的小程序基础知识，一直没有用一个实际的案例来把前面的知识点串起来，今天咱们就来开发一款简单的《历史上的今天》，来把咱们前面的知识点完整的串起来。

老规矩，先看效果图

能够看到咱们实现了以下功能

• 1，列表页
• 2，列表跳转详情页
• 3，视频播放（实际上是假的，后面给你们讲这个视频播放）
• 4，网络请求
• 5，列表到详情数据携带
  好了，话很少说，咱们来直接看代码实现。

一，网络数据的获取

网络数据获取咱们用来官方提供的wx.request方法。
下面红色框里就是咱们的网络数据获取的代码

是否是感受就这几段代码，很简单，事实上，石头哥写这段代码费老劲了。。。
不是说代码难写。主要是由于我这里用到的是一个三方提供的api，刚开始是想着用豆瓣电影的api，但是。。。
豆瓣以前的免费api好像停了，再去找一些api吧，基本上都收费了。这个api也是找了很久，才找到了百度提供的一个“历史上的今天百科” api，接口很简单以下图：

咱们只须要用这个api，简单的作下get请求，就能请求下来一大堆数据。

而这一大堆数据也正是咱们所须要的列表数据。

二，首页列表数据的解析

上面第一步已经获取到了咱们所须要的数据，可是那么一大坨，咱们该怎么使用呢，因此，使用以前咱们要对数据作一个简单的解析。这样咱们才能够显示到咱们的桌面上。话很少说，咱们直接写代码来获取数据。
核心代码就是咱们下图红色框，框起来的这部分。

再来看下咱们请求到的数据。经过下图能够看到，小程序使用wx.request在请求数据的同时，已经把数据给咱们解析好了。

可是这里有个问题，咱们请求的数据一会儿把整个12月历史上的今天，都返回了。咱们只想取到今天的数据，也就是12月14日的数据。该怎么取呢。
由于这里对象里的属性值不是咱们传统的name，age。。。。这样的字母样式的，而是用一个数字，好比1201来做为对象里的一个属性。这样咱们取值的时候就不能用传统的 object.name 这样的方式了。
固然直接用res.data.12会报错的。以下图

因此呢咱们就换种方式，好比咱们先经过 res.data['12']先把全部12月的数据都取到。

而后再经过 res.data['12']['1214']来取12月14日的数据。以下图

这样咱们就成功的取到了历史上的12月14日的16条数据，咱们接下来要作的就是把这16条数据，展现到页面上。

三，首页数据的展现

其实列表的展现，我以前写过好多文章讲解的，你们能够去翻下我以前的文章，也能够看下我以前录的讲解视频
《10小时零基础快速入门小程序开发》

• 我这里直接把关键代码贴出来给你们。
  1，index.wxml
  
  2,index.js
  
  3,index.wxss
  
  这样咱们的首页展现就实现了，接下来看咱们的详情页

四，详情页

能够看出咱们的详情页很简单，就一个webview，可是功能确很丰富。

固然这一切都拜webview这个强大的组件所赐。至于如何实现这个视频功能的，我视频里有说的。偷笑。。。。。
《10小时零基础快速入门小程序开发》
仍是接着讲咱们的这个详情页，首先咱们要实现的是首页列表点击，跳转到详情页。这里还要贴出首页的代码了

上图的bindtap用来实现点击事件，data-link用来在点击的时候传递值。

看上图的点击事件的实现，能够看出，咱们是在点击的时候拿到一个link值，而后把这个值传递到详情页，而这个值，就是咱们webview用来展现网页的连接。

这个时候咱们的详情页，其实就至关于一个浏览器了，你往里面传递不一样的网址，咱们就能显示不一样的内容。

其实到这里咱们就基本上实现了咱们的功能了。

下面把index.js的完整代码贴给你们。

Page({
  data: {
    dataList: [],
    yueRi: ''
  },
  onLoad() {
    let month = this.getMonth()
    let monthDay = this.getTime()
    let yueRi = this.getFullTime()
    let that = this
    wx.request({
      url: `https://baike.baidu.com/cms/home/eventsOnHistory/${month}.json`,
      success(res) {
        console.log("请求成功", res.data['12']['1214'])
        that.setData({
          dataList: res.data[month][monthDay],
          yueRi
        })
      },
      fail(res) {
        console.log("请求失败", res)
      }
    })
  },
  //跳转到详情页
  goDetail(event) {
    let link = event.currentTarget.dataset.link
    console.log(link)
    wx.navigateTo({
      url: '/pages/detail/detail?link=' + link,
    })
  },
  //获取月日
  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
    console.log(monthDay)
    return monthDay
  },
  //获取月份呢
  getMonth() {
    let date = new Date()
    let month = date.getMonth() + 1
    if (month < 10) {
      month = '0' + month
    }
    return month
  },
  //获取标准的月日
  getFullTime() {
    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 + '日'
    console.log(monthDay)
    return monthDay
  },
})

好了，今天就到这里了，后面会分享给你们更多的关于小程序实战入门的案例，敬请期待。

我这里也有把这个案例录制一套视频出来，感兴趣的同窗能够去看下