點擊下面網址可以在線觀看視頻
10天零基礎入門小程序系列在線視頻教程
點擊下面網址進入系列教程
10天零基礎入門小程序系列教程
前幾節給大家講了首頁列表的實現，我們有了列表，肯定需要從列表跳轉到詳情頁去查看詳情吧。這節就和大家講一講文章詳情頁的實現。同樣本節代碼是基於前5天代碼的基礎上的，如果沒有學過前面課程的同學，可以點擊上面鏈接，看筆記或者視頻。
本節知識點
- 1，列表跳轉到詳情頁的實現
- 2，從後臺獲取詳情頁數據
- 3，詳情頁json數據的解析
- 4，詳情頁數據的展示
- 5，markdown格式轉化爲可以在小程序wxml裏顯示的格式
- 6，第三仿類庫的使用
這節課知識點比較多，視頻的話我會錄製分幾節來錄製，筆記的話就全部整合在這篇文章裏，方便大家學習。下面就來開始今天的學習之路。
一，列表跳轉到詳情頁的實現
老規矩，學習今天知識點之前，我們先去看下官方文檔（官方文檔永遠是最好的老師）
我們頁面跳轉用到的知識點是：wx.navigateTo
https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html
看官方文檔可以知道，我們頁面跳轉需要定義目標頁面的url，而我們想從列表頁跳轉到詳情頁，我們就要先定義詳情頁面。
比如我們的詳情頁叫 detail。我們就需要在pages目錄下創建如下目錄和文件（如果不會創建新頁面的同學，請點擊頂部鏈接去看我前面的課程）
創建完成後還需要在app.json文件裏註冊我們的detail頁面
這裏的 "pages/detail/detail" 就是我們 wx.navigateTo頁面跳轉時所需要的url。
- 下面我們在首頁列表頁的home.js文件裏定義一個跳轉方法，看看能不能跳轉到detail詳情頁。
實現方法如下
//跳轉到detail詳情頁
goDetail() {
wx.navigateTo({
url: "../detail/detail"//這裏的 ../是固定寫法
})
},
我們的goDetail方法需要在home.wxml裏用bindtap來綁定，如下圖
然後看下home.js裏的完整代碼
這兩步寫完，我們就實現裏首頁列表跳轉到detail詳情頁的功能，編譯運行後的效果圖如下：
可以看到我們點擊首頁列表的任何一個標題都可以跳轉到文章詳情頁。
二，從後臺獲取詳情頁數據
我們第一個步實現裏列表頁跳詳情頁，但是我們跳到詳情頁後沒有任何數據啊，所以我們第二步，就要從後臺請求每個詳情頁自己的數據了。這裏我也已經爲大家定義好了，詳情頁json數據的請求接口。
大家也可以點擊下面鏈接，查看數據
https://30paotui.com/article/one?aid=0
上面鏈接是我們用get請求把aid（文章對應id）傳給後臺，然後後臺去數據庫裏查詢aid=0的文章，然後把文章的數據返回給我們。
所以我們從列表頁跳轉到詳情頁時，需要把對應的文章的id帶到詳情頁。
這就涉及到另外一個知識點了，頁面跳轉並傳值。下面我們就先實現跳轉傳值的功能。其實也很簡單。在第一步代碼的基礎上加點東西即可。比如我們要把aid爲100這個值傳到詳情頁。代碼如下
這樣我們在詳情頁的detail.js裏面接受這個值，並在控制檯打印出來，看有沒有接收到。代碼如下
可以看到我們的詳情頁接收到了列表頁傳過來的值：100
由於我們首頁列表頁每個標題對應的是不同的aid，我們這裏都寫成100是不對的。所以我們接下來學習另外一個知識點。獲取當前點擊標題對應的aid。
在我們的首頁home.wxml文件里加如下代碼
data-aid='{{item.aid}}' 是用來綁定數據的，比如我們點擊標題《零基礎入門小程序001----開發屬於自己的第一個小程序》，這個標題對應的aid爲0，