前边已经设计好新闻的列表页之后，也需要开始做详情页，否则打开只有一个列表页其他功能也打不开实在是有点太假了。所以开始学习做新闻详情页。
一、跳转
不过做怎么样，肯定首先都得可以跳转页面才行，否则还是在当前页面那岂不是很尴尬的。
第一步：先新建一个页面，作为详情页面。千万记得在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里边。
也就是类似于咱们以前写别的数组元素，需要**“.”**一下。
两个方式，一个是在后台，一个一个调用对应的属性对应。
一个是在前台，
点出来，这样就显示正常了，显示正常的结果如下图
