[重庆网站建设公司][微信小程序]「精品」微信小程序开发(九)————文章详情页的实现
发布时间:2019-07-23    作者: Web开发那些事     来源: Web开发那些事

  大家好,今天是微信小程序之个人博客项目实战收官之战,一直以来感谢大家的观看,虽然人不多,然是还是要谢谢大家啦,这个实战结束后,以后的文章我会教给大家更深层次的东西,比如缓存的使用、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文件接收数据,在onload里面写上:

  

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

  

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

  

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

  

  效果如下:

  

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

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

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

声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系邮箱: leimon@p7ing.com,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。
最新案例 查看更多