私たちは、以前の知識に、「歴史に今日」今日、我々は簡単なを開発する必要があり、それは一緒に、文字列の先頭に実践的な知識ポイントとケースされていない、小さなプログラムの基礎の前でそんなに学びました一緒に文字列にポイントが完了しました。

古いルールは、図の効果を見てください。

私たちは次のような機能を実現することがわかります

1、リスト
2、ジャンプリストは、詳細ページ
3、ビデオプレーヤー（実際には偽、あなたのビデオプレーヤーを伝えるために戻っ）
4、リクエストネットワーク
5、データの詳細は、実施のリスト
まあ、あまり話をしなかったが、我々は直接コードを見ています。

まず、ネットワークデータ収集

我々はwx.request公式のオファーに使用するネットワークデータ取得方法。
ここでは、コード赤いボックスは、データ取得の私たちのネットワークがある

コードの断片は、非常に単純な、実際には、石の兄弟は、このコード手数料古い強度を書くことを感じていません。。。
難しいコードを書くためにと言っているわけではありません。主に私はここで使用さ三者が提供するAPIであるため、APIはちょうどクレソンムービーを使用する方法について考えを始めたが、。。。
クレソン無料API前に停止し、その後、いくつかのAPIバーを見つけ、基本的にすべての料金のようです。：このAPIは、また、「今日の歴史百科事典で」Baiduは以下のようにインターフェースは非常に簡単です、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
  },
})

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

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

1時間実際のエントリアプレット開発、今日は歴史の中でケースを説明