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

好了，今天就到這裏了，後面會分享給你們更多的關於小程序實戰入門的案例，敬請期待。

我這裏也有把這個案例錄製一套視頻出來，感興趣的同窗能夠去看下