我們前面學了這么多的小程序基礎知識，一直沒有用一個實際的案例來把前面的知識點串起來，今天我們就來開發(fā)一款簡單的《歷史上的今天》，來把我們前面的知識點完整的串起來。

老規(guī)矩，先看效果圖

可以看到我們實現了如下功能

• 1，列表頁

• 2，列表跳轉詳情頁

• 3，視頻播放（其實是假的，后面給大家講這個視頻播放）

• 4，網絡請求

• 5，列表到詳情數據攜帶 好了，話不多說，我們來直接看代碼實現。

一，網絡數據的獲取

網絡數據獲取我們用來官方提供的wx.request方法。 下面紅色框里就是我們的網絡數據獲取的代碼

是不是感覺就這幾段代碼，很簡單，事實上，石頭哥寫這段代碼費老勁了。。。 不是說代碼難寫。主要是因為我這里用到的是一個三方提供的api，剛開始是想著用豆瓣電影的api，可是。。。 豆瓣之前的免費api好像停了，再去找一些api吧，基本上都收費了。這個api也是找了好久，才找到了百度提供的一個“歷史上的今天百科” api，接口很簡單如下圖：

我們只需要用這個api，簡單的做下get請求，就能請求下來一大堆數據。

而這一大堆數據也正是我們所需要的列表數據。

二，首頁列表數據的解析

上面第一步已經獲取到了我們所需要的數據，但是那么一大坨，我們該怎么使用呢，所以，使用之前我們要對數據做一個簡單的解析。這樣我們才可以顯示到我們的桌面上。話不多說，我們直接寫代碼來獲取數據。 核心代碼就是我們下圖紅色框，框起來的這部分。

再來看下我們請求到的數據。通過下圖可以看到，小程序使用wx.request在請求數據的同時，已經把數據給我們解析好了。

但是這里有個問題，我們請求的數據一下子把整個12月歷史上的今天，都返回了。我們只想取到今天的數據，也就是12月14日的數據。該怎么取呢。 因為這里對象里的屬性值不是我們傳統(tǒng)的name，age。。。。這樣的字母樣式的，而是用一個數字，比如1201來作為對象里的一個屬性。這樣我們取值的時候就不能用傳統(tǒng)的 object.name 這樣的方式了。 當然直接用res.data.12會報錯的。如下圖

所以呢我們就換種方式，比如我們先通過 res.data[‘12’]先把所有12月的數據都取到。

然后再通過 res.data[‘12’][‘1214’]來取12月14日的數據。如下圖

這樣我們就成功的取到了歷史上的12月14日的16條數據，我們接下來要做的就是把這16條數據，展示到頁面上。

三，首頁數據的展示

其實列表的展示，我之前寫過好多文章講解的，大家可以去翻下我之前的文章，也可以看下我之前錄的講解視頻《10小時零基礎快速入門小程序開發(fā)》

• 我這里直接把關鍵代碼貼出來給大家。 1，index.wxml

2,index.js

3,index.wxss

這樣我們的首頁展示就實現了，接下來看我們的詳情頁

四，詳情頁

可以看出我們的詳情頁很簡單，就一個webview，但是功能確很豐富。

當然這一切都拜webview這個強大的組件所賜。至于如何實現這個視頻功能的，我視頻里有說的。偷笑。。。。。《10小時零基礎快速入門小程序開發(fā)》還是接著講我們的這個詳情頁，首先我們要實現的是首頁列表點擊，跳轉到詳情頁。這里還要貼出首頁的代碼了

上圖的bindtap用來實現點擊事件，data-link用來在點擊的時候傳遞值。

看上圖的點擊事件的實現，可以看出，我們是在點擊的時候拿到一個link值，然后把這個值傳遞到詳情頁，而這個值，就是我們webview用來展示網頁的鏈接。

這個時候我們的詳情頁，其實就相當于一個瀏覽器了，你往里面?zhèn)鬟f不同的網址，我們就能顯示不同的內容。

其實到這里我們就基本上實現了我們的功能了。

好了，今天就到這里了，后面會分享給大家更多的關于小程序實戰(zhàn)入門的案例，敬請期待。

我這里也有把這個案例錄制一套視頻出來，感興趣的同學可以去看下