微信小程序实战–集阅读与电影于一体的小程序项目（二）

### 9.文章列表页跳转到文章详情页 **给每篇文章添加个postId** posts-data.js ```python var local_database = [{ date: "2018/8/16", title: "荷塘月色", imgSrc: '/images/post/sls.JPG', content: '这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。', reading: "100", collection: '50', avatar: '/images/avatar/1.png', postId:0 }, { date: "2018/7/15", title: "背影", imgSrc: '/images/post/bl.png', content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影 。那年冬天，祖母死了，父憨穿封费莩渡凤杀脯辑亲的差使也交卸了，正是祸不单行的日子', reading: "120", collection: '150', avatar: '/images/avatar/2.png', postId: 1 }, { date: "2018/6/2", title: "济南的冬天", imgSrc: '/images/post/crab.png', content: '对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。', reading: "80", collection: '50', avatar: '/images/avatar/3.png', postId: 2 }, { date: "2018/5/1", title: "江南之雨", imgSrc: '/images/post/vr.png', content: '江南之春雨如此缠绵，然煽情，如此醉，影青青之烟雨巷，雨丝风，润之使人动心如此', reading: "80", collection: '50', avatar: '/images/avatar/3.png', postId: 3 }, { date: "2018/4/6", title: "忆江南", imgSrc: '/images/post/xiaolong.jpg', content: '昨晚和阿浩谈起诸多童年记忆，不知不觉眼前浮现一片油菜花海，黄灿灿，一眼望不到头，连空气都带着甜香。', reading: "80", collection: '50', avatar: '/images/avatar/4.png', postId: 4 }, ] module.exports = { postlist:local_database } ``` **post.wxml** [事件文档](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html "事件文档") - 绑定事件 - 添加自定义属性，把文章id传到js中 ```html ``` **post.js** - 获取到文章id - 跳到详情页面 ```js var postsData = require('../../data/posts-data.js') Page({ data: { postlist: postsData.postlist }, onPostTap: function (event) { var postId = event.currentTarget.dataset.postid; wx:wx.navigateTo({ url: 'post-detail/post-detail' }) } }) ``` 在posts目录下新建post-detail目录  post-detail.wxml ```html 这是文章详情页 ``` app.json全局配置 ```js { "pages": [ "pages/welcome/welcome", "pages/posts/post", "pages/posts/post-detail/post-detail" ], "window": { "navigationBarBackgroundColor": "#405f80" } } ``` 现在点击文章，就可以跳转到文章详情页面了。 ### 10.文章详情页面布局 post-detail.wxml ```html 朱自清 发表于 一天前 背影 我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！” ``` post-detail.wxss ```css .container{ display:flex; flex-direction: column; } .head-image{ width: 100%; height: 460rpx; } .author-date{ flex-direction: row; margin-left:30rpx; margin-top: 20rpx; } .avatar{ height: 64rpx; width: 64rpx; vertical-align: middle; } .author{ font-size: 30rpx; font-weight: 300; margin-left: 20rpx; vertical-align: middle; color: #666; } .const-text{ font-size: 24rpx; color: #999; margin-left: 20rpx; } .date{ font-size: 24rpx; margin-left: 30rpx; vertical-align: middle; color: #999; } .title{ margin-left: 40rpx; font-size: 36rpx; font-weight: 700; margin-top: 30rpx; letter-spacing: 2px; color: #4b556c; } .tools{ margin-top: 20rpx; } .circle-img{ float: right; margin-right: 40rpx; vertical-align: middle; } .circle-img image{ width: 90rpx; height: 90rpx; } .share-img{ margin-left: 30rpx; } .horizon{ width: 660rpx; height: 1px; background-color: #e5e5e5; vertical-align: middle; position: relative; top: 46rpx; margin: 0 auto; z-index: -99; } .detail{ color: #666; margin-left: 30rpx; margin-top: 20rpx; margin-right: 30rpx; line-height: 44rpx; letter-spacing: 2px; } ``` app.wxss ```css text{ font-family:MicroSoft yahei; font-size: 24rpx; } ``` 效果预览  ### 11.播放按钮和导航栏 post-detial.wxml添加一个播放按钮图片 ```html 朱自清 发表于 一天前 背影 我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！” ``` post-detail.wxss ```css .audio{ width: 102rpx; height: 110rpx; position: absolute; left: 50%; margin-left: -51rpx; top: 180rpx; opacity: 0.6 } ``` post-detail.json添加导航栏文字 ```python { "navigationBarTitleText": "阅读" } ``` 效果  ### 12.使用数据填充文章详情页面 post-data.js ```js var local_database = [{ date: "2018/8/16", title: "荷塘月色", imgSrc: '/images/post/sls.JPG', content: '这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。', reading: "100", collection: '50', avatar: '/images/avatar/1.png', postId: 0, headImgSrc: "/images/post/sls.JPG", author: "朱自清", datetime: "24小时前", detail: "这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个*的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。" }, { date: "2018/7/15", title: "背影", imgSrc: '/images/post/bl.png', content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影 。那年冬天，祖母死了，父憨穿封费莩渡凤杀脯辑亲的差使也交卸了，正是祸不单行的日子', reading: "120", collection: '150', avatar: '/images/avatar/2.png', postId: 1, headImgSrc: "/images/post/bl.png", author: "朱自清", datetime: "三天前", detail: "我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！” " }, { date: "2018/6/2", title: "济南的冬天", imgSrc: '/images/post/crab.png', content: '对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。', reading: "80", collection: '50', avatar: '/images/avatar/3.png', postId: 2, headImgSrc: "/images/post/crab.png", author: "老舍", datetime: "一月前", detail: "对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？小山整把济南围了个圈儿，只有北边缺着点口儿。这一圈小山在冬天特别可爱，好像是把济南放在一个小摇篮里，它们安静不动地低声地说“你们放心吧，这儿准保暖和。真的，济南的人们在冬天是面上含笑的。他们一看那些小山，心中便觉得有了着落，有了依靠." }, { date: "2018/5/1", title: "江南之雨", imgSrc: '/images/post/vr.png', content: '江南之春雨如此缠绵，然煽情，如此醉，影青青之烟雨巷，雨丝风，润之使人动心如此', reading: "80", collection: '50', avatar: '/images/avatar/3.png', postId: 3, headImgSrc: "/images/post/crab.png", author: "老舍", datetime: "一月前", detail: "对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？小山整把济南围了个圈儿，只有北边缺着点口儿。这一圈小山在冬天特别可爱，好像是把济南放在一个小摇篮里，它们安静不动地低声地说“你们放心吧，这儿准保暖和。真的，济南的人们在冬天是面上含笑的。他们一看那些小山，心中便觉得有了着落，有了依靠." }, { date: "2018/4/6", title: "忆江南", imgSrc: '/images/post/xiaolong.jpg', content: '昨晚和阿浩谈起诸多童年记忆，不知不觉眼前浮现一片油菜花海，黄灿灿，一眼望不到头，连空气都带着甜香。', reading: "80", collection: '50', avatar: '/images/avatar/4.png', postId: 4, headImgSrc: "/images/post/crab.png", author: "老舍", datetime: "一月前", detail: "对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？小山整把济南围了个圈儿，只有北边缺着点口儿。这一圈小山在冬天特别可爱，好像是把济南放在一个小摇篮里，它们安静不动地低声地说“你们放心吧，这儿准保暖和。真的，济南的人们在冬天是面上含笑的。他们一看那些小山，心中便觉得有了着落，有了依靠." }, ] module.exports = { postlist: local_database } ``` post.js ```js var postsData = require('../../data/posts-data.js') Page({ data: { postlist: postsData.postlist }, onPostTap: function (event) { var postId = event.currentTarget.dataset.postid; wx:wx.navigateTo({ url: "post-detail/post-detail?id=" + postId }) } }) ``` post-detail.js ```js var postsData = require('../../../data/posts-data.js') Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var postId = options.id; var postData = postsData.postlist[postId]; this.setData({ postData:postData }) }, }) ``` post-detail.wxml ```html {{postData.author}} 发表于 {{postData.datetime}} {{postData.title}} {{postData.detail}} ``` ### 13.使用缓存实现文章收藏 [缓存文档](https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstoragesynckeydata "缓存文档") post-detail.wxml ```html ``` post-detail.js ```js var postsData = require('../../../data/posts-data.js') Page({ data: { }, onLoad: function(options) { var postId = options.id; var postData = postsData.postlist[postId]; this.setData({ postData: postData, 'currentPostId': postId }) var postsCollected = wx.getStorageSync('posts_Collected') if (postsCollected) { var postCollected = postsCollected[postId] this.setData({ collected: postCollected }) } else { var postsCollected = {}; postsCollected[postId] = false; wx.setStorageSync('posts_Collected', postsCollected); } }, onCollectionTap: function(ev) { var postsCollected = wx.getStorageSync('posts_Collected') var postCollected = postsCollected[this.data.currentPostId] postCollected = !postCollected; postsCollected[this.data.currentPostId] = postCollected; // 更新文章是否收藏的缓存值 wx.setStorageSync('posts_Collected', postsCollected) // 更新数据绑定变量，实现切换图片 this.setData({ collected: postCollected }) } }) ``` 可以看到缓存的状态