微信小程序开发（九）————文章详情页的实现

我们在上一篇文章中已经制作出来了个人博客列表页，本篇实现详细内容。

首先第一步我们肯定是要创建文件夹，我们选择在pages目录下面的post目录里面创建post-detail的文件夹，如图：

教给大家一个小技巧，其实大家不用在目录上创建，挺麻烦的，大家打开app.json在pages目录里面输入我们想把post-detail这个目录放置的路径就行，即”pages/post/post-detail/post-detail“，然后刷新一下就出来了，如图：

post-detail

实现post-detail文件的样式。在post-detail.wxml文件里面输入个”hello world！“测试语句，大家肯定能够想到这个得用到跳转，即文章列表页到文章详情页的跳转。页面跳转第一步是先给文章列表页添加一个点击事件bindtap。我们找到post.wxml文件，给列表页最外层的view标签添加事件，如图：

bindtap=”detail“，绑定一个事件，事件名称叫做detail，打开post.js进行编写detail事件，如图：

跳转方法使用wx.navigateTo()方法，它和wx.redirectTo()方法的区别是什么呢？大家自己看界面着不同吧。这个方法写完之后，是不是就可以跳转了呢？当然可以啦，那么跳转是跳转了，大家想一下，我有五个文章列表页，那么我怎么能够让文章跳到属于它的列表页呢，大家应该能够懂我的意思吧。想解决这个问题，就得给每个文章一个ID，上篇文章我给大家准备数据里面就有一个postid，如图：

postid

postid是给每一个文章都分配一个id号，就相当于我们的身份证号，通过postid，我们就可以找到这个文章的详情页了，我们在在外层的view标签自定义一个变量，这里自定义变量都是如图的格式，data开头：

然后在js我们怎么取呢，如图：

首先我们在function（）里面添加一个event，因为我们要通过这event来获取自定义变量，大家不用理解，就只需要知道这个envent是用来获取自定义变量就行。var postId=event.currentTarget.dataset.id 中

event.currentTarget.dataset.id ，event代表这个事件，currentTarget代表当前你点击的这个模块，也就是列表页，dataset就是所有的自定义数据的集合，id就是我们定义的id，串起来就是获取当前模块自定义数据集合中的id这个数据。有了这个postid，我们就要把id通过url带过去，如图：

然后我们取post-datail.js文件接收数据，在onload里面写上：

如果大家不知道为什么要在onload函数里面写的话，就自己百度吧，这个太简单了我就不说了。function里面有个options，options就是用来接受传来的id。这样的话我们就拿到了id，我们在post-detail.js的data里面把我上篇文章的数据复制进来，如图：

然后我们在onload里面添加如下代码：

this.setData我就不说啥意思了，我说说this.data.post，它的意思是获取data数组里面定义的数据，因为它是一个数组，所以我们把postId穿进去，就获取到了postId对应的文章了，然后我们在渲染到wxml页面，如图：

效果如下：