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

大家好，今天是微信小程序之个人博客项目实战收官之战，一直以来感谢大家的观看，虽然人不多，然是还是要谢谢大家啦，这个实战结束后，以后的文章我会教给大家更深层次的东西，比如缓存的使用、API使用、与后台的交互......

废话不说，我们进行今天的实战项目，我们在上一篇文章中已经制作出来了个人博客列表页，但是光有列表页有啥用啊。。。。。。列表页只是内容的部分展示，我们当然是要看里面的详细内容啦，在这里我就带领大家一块攻克它吧。

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

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

post-detail

这个post-detail文件的样式啥的我就不给了，大家应该尝试着打造属于自己的style，不能光用我的，哈哈。大家还是在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文件接收数据，在on​load里面写上：

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

然后我们在on​load里面添加如下代码：

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

效果如下：

哈哈，大功告成，这篇文章对于小白来说有一定难度，对有过经验的来说自然是不是问题，所以说我们不会的还有很多，千万不要骄傲自满哦。

博客制作到此完毕，感谢大家的支持，下一章我会给大家补充高级知识，让大家变成一个微信小程序高手。

希望大家多多关注，多多支持，多多收藏，多多分享，如果有什么不明白，评论哦，我给大家详细解答。