请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 170|回复: 0

微信小程序开发(八)文章详情页的实现

[复制链接]
  • TA的每日心情
    开心
    2019-5-7 14:15
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    396

    主题

    399

    帖子

    1860

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1860
    admin实名认证 发表于 2019-5-11 18:53:03 | 显示全部楼层 |阅读模式
    大家好,今天是微信小程序之个人博客项目实战收官之战,一直以来感谢大家的观看,虽然人不多,然是还是要谢谢大家啦,这个实战结束后,以后的文章我会教给大家更深层次的东西,比如缓存的使用、API使用、与后台的交互......

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

    首先第一步我们肯定是要创建文件夹啦,我们选择在pages目录下面的post目录里面创建post-detail的文件夹,如图:
    36001.jpg
    教给大家一个小技巧,其实大家不用在目录上创建,挺麻烦的,大家打开app.json在pages目录里面输入我们想把post-detail这个目录放置的路径就行,即”pages/post/post-detail/post-detail“,然后刷新一下就出来了,如图:
    36002.jpg
    这个post-detail文件的样式啥的我就不给了,大家应该尝试着打造属于自己的style,不能光用我的,哈哈。大家还是在post-detail.wxml文件里面输入个”hello world!“测试语句,大家肯定能够想到这个得用到跳转,即文章列表页到文章详情页的跳转。大家看到这里的话,脑子就应该有个想法了,自己想想应该怎么进行跳转,毫无疑问,这个第一步是先给文章列表页添加一个点击事件bindtap,如果忘了的话,请看看我之前的文章,嘻嘻。我们找到post.wxml文件,给列表页最外层的view标签添加事件,如图:
    36003.jpg
    bindtap=”detail“大家还记得这个意思吗,绑定一个事件,事件名称叫做detail,大家打开post.js进行编写detail事件,如图:
    36004.jpg
    这次我用的跳转方法是另一种叫做wx.navigateTo()方法,它和wx.redirectTo()方法的区别是什么呢?大家自己看界面着不同吧,哈哈。这个方法写完之后,是不是就可以跳转了呢?当然可以啦,那么跳转是跳转了,大家想一下,我有五个文章列表页,那么我怎么能够让文章跳到属于它的列表页呢,大家应该能够懂我的意思吧。想解决这个问题,就得给每个文章一个ID,上篇文章我给大家准备数据里面就有一个postid,如图:
    36005.jpg
    postid是给每一个文章都分配一个id号,就相当于我们的身份证号,通过postid,我们就可以找到这个文章的详情页了,我们在在外层的view标签自定义一个变量,这里自定义变量都是如图的格式,data开头:
    36006.jpg
    然后在js我们怎么取呢,如图:
    36007.jpg
    首先我们在function()里面添加一个event,因为我们要通过这event来获取自定义变量,大家不用理解,就只需要知道这个envent是用来获取自定义变量就行。var postId=event.currentTarget.dataset.id 中


    event.currentTarget.dataset.id ,event代表这个事件,currentTarget代表当前你点击的这个模块,也就是列表页,dataset就是所有的自定义数据的集合,id就是我们定义的id,串起来就是获取当前模块自定义数据集合中的id这个数据。有了这个postid,我们就要把id通过url带过去,如图:
    36008.jpg
    然后我们取post-datail.js文件接收数据,在onload里面写上:
    36010.jpg
    如果大家不知道为什么要在onload函数里面写的话,就自己百度吧,这个太简单了我就不说了。function里面有个options,options就是用来接受传来的id。这样的话我们就拿到了id,我们在post-detail.js的data里面把我上篇文章的数据复制进来,如图:
    36009.jpg
    然后我们在onload里面添加如下代码:
    36011.jpg
    this.setData我就不说啥意思了,我说说this.data.post,它的意思是获取data数组里面定义的数据,因为它是一个数组,所以我们把postId穿进去,就获取到了postId对应的文章了,然后我们在渲染到wxml页面,如图:
    36012.jpg
    效果如下:
    360123.jpg
    哈哈,大功告成,这篇文章对于小白来说有一定难度,对有过经验的来说自然是不是问题,所以说我们不会的还有很多,千万不要骄傲自满哦。


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


    希望大家多多关注,多多支持,多多收藏,多多分享,如果有什么不明白,评论哦,我给大家详细解答。
    本文采集自百度百家号:web开发那些事 原文网址:https://mbd.baidu.com/newspage/d ... A%22bjhauthor%22%7D

    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-5-22 23:52 , Processed in 0.060469 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表