前邊已經設計好新聞的列表頁之後，也需要開始做詳情頁，否則打開只有一個列表頁其他功能也打不開實在是有點太假了。所以開始學習做新聞詳情頁。
一、跳轉
不過做怎麼樣，肯定首先都得可以跳轉頁面才行，否則還是在當前頁面那豈不是很尷尬的。
第一步：先新建一個頁面，作爲詳情頁面。千萬記得在app.json中添加該頁面
第二步：書寫響應時間，因爲使用了template模板，所以在我的“index.wxml”中，即我的列表頁中使用了<template>和<block>，而這兩個都不是容器組件，都是類似於佔位符的東西，在運行時並沒有什麼實際價值，也不顯示，所以這個時候我們需要使用容器組件<view>，用view包裹我們的template來實現功能。
在view中使用catchtab來響應事件（ 注：不使用循環上升時使用catchtab，循環的話用bindtap），使用data-自定義=“文章的ID”，自定義內容可以根據自己需要進行書寫，但是需要注意使用小寫。代碼如圖：
<view catchtap="listItem" data-poatid="{{item.postid}}">
<template is="indexItem" data="{{...item}}"></template>
</view>
在對應腳本文件中書寫響應事件listItem，如下圖，加了註釋
跳轉指令是wx:navigateTo
//響應點擊事件 在包含着template的view中引用，使用catchtab
listItem:function(event){
var postId=event.currentTarget.dataset.postid;//獲取點擊事件的ID
wx:wx.navigateTo({ //跳轉命令
url: '../detailspage/detailspage', // 需要跳轉到的地址
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
二、詳情頁面設計
設計頁面樣式，大體我要設計的樣式如圖
第一步、仍然採用分段的方式
將整體結構分成幾段，採用view容器組件進行包容，用類似列表頁面的方式進行設計
大概就是這五部分。
第二步、 內容實施
（1）圖片融合
首先將兩個圖片src到頁面上，自行調整大小，因爲第一張照片作爲底板是不動的，所以只設計第二張照片的樣式，讓他可以半透明懸浮在第一張照片上。
具體思路是：設計圖片透明度，然後脫離本層頁面可以懸浮起來，在調整距頂部距左右的距離。代碼如下：
.music{
position: absolute; /*絕對定位*/
opacity: 0.6; /*透明度*/
left: 50%; /*居中經典樣式*/
margin-top: 20%;
margin-left: -45rpx;
height: 150rpx;
width: 150rpx;
}
在調整一些細節就好了。
（2）直線與圖標
先調整兩個圖片，將他們的大小和內容比例調整合適。，使用一個View將他們括起來，設置樣式，讓他們呈現一個浮動的狀態
.circle-img{
float: right; /*浮動*/
margin-right: 40rpx;
vertical-align: middle;
}
再設置後一張照片距離前一張照片的距離就可以把這兩個照片保持在一個很好的平衡上了。
直線使用有背景色有長度的一個樣式線，即可。然後進行融合，將直線與兩個浮動照片進行融合
/*直線*/
.rule{
width: 666rpx;
height: 2px;
background-color: #e5e5e5;
vertical-align: middle;
position: relative; /*脫離文檔*/
top: 46rpx; /*拒頂部*/
margin: 0 auto;
z-index: -99; /*和另外兩個圖片重疊*/
}
三、傳數據與數據綁定
首先在上邊所有弄完之後，這個時候其實你的頁面是沒有問題的，正常顯示也找不到毛病，但是因爲他是靜態頁面，不是動態頁面，沒有辦法隨着後臺數據的改動而自主改動前臺顯示內容。這個時候我們就需要靜改動。
首先根據頁面需要，將自己的數據文件內容填充完整。
第一步
在要傳輸的列表頁的腳本文件中，將ID傳過去，將我們的點擊事件進行修改，讓他可以接收到ID得值，接受完可以使用console.log(postId)測試一下，看看有沒有接收到ID的值。
我第一次就是沒有接收到值，因爲前端代碼的不好的地方就是不顯示細節錯誤，所以按照邏輯，這裏的代碼是響應前臺點擊事件，會不會是前臺點擊出的問題，結果問題出在點擊事件data-***的內容單詞錯誤，沒有辦法可以傳輸數據。
在一切正常後，前往詳情頁的腳本文件，接受傳過來的信息
首先先要引用數據文件var newlistDB=require("/../database/newlistDB.js")，否則接受了半天數據，發現沒有值不知道從哪裏得到的數據就只能是報錯了。
onLoad: function (options) {
var postId = options.id; /*獲取傳過來的ID，如果使用的是id，則使用id，自定義什麼就是用什麼 */
var postData = newlistDB.newslist[postId];
//因爲在定義數據文件的時候，定義了一個數組，
//所以數組文件最下方的newslist纔是數組名，而newlistDB卻是接受響應文件
//數據綁定,將數據文件中的信息綁定到該頁。
}
這個地方主要是接受傳輸過來的點擊事件的信息。id就是剛咱寫的那個id，其他注意的請看一下代碼註釋，都有寫。
第二步 綁定數據
使用this.setData.postData=postData;綁定數據，在前臺頁面將對應信息使用“{{}}”括起來用戶屬性。
這個時候突然發現碰到了如下問題
東西不對了，我的東西的，這個時候調試，可以使用調試工具下的AppData，可以查看到我們每一級獲取到的信息內容和關係。
出現錯誤
發現我的下邊是空白的，什麼也沒有，如下圖
然後返回去看了看文檔，沒啥問題呀，也還是對的呢。
在查看了代碼沒有寫錯單詞的情況下，感覺有一些束手無策。在羣裏問了大佬，大佬果然是大佬，一眼就找到了問題：
Page.prototype.setData(Object data, Function callback)
setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。所以setData是一個函數。並不是一個對象，而在代碼中的結果是我將一個函數寫成了對象，切記切記！
這個時候我們要將綁定數據的語句改成
this.setData.({ postDat:postData });
在這個時候我們編譯之後還是發現空白版，沒有顯示出綁定的數據。這個時候在查看AppData調試器。發現已經變化了。已經顯示出來了
爲什麼在模擬器中還是空白呢？
在圖片中會發現，數組是存在於postData中的，也就是我們的數據名是postData，
(Object data, Function callback)傳入兩個參數，一個是對象類型的data，一個是回調函數，一般來說傳第一個就夠了,也就是this.setData({detail: detail, name: name})
也就是說咱們調用的是數據文件的接受自定義變量postData,但是數據文件並不是直接暴露在外邊的，他在數組之中，所以這個時候看AppData中的顯示，顯示數據信息是在postData裏邊。
也就是類似於咱們以前寫別的數組元素，需要**“.”**一下。
兩個方式，一個是在後臺，一個一個調用對應的屬性對應。
一個是在前臺，
點出來，這樣就顯示正常了，顯示正常的結果如下圖
