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

9.文章列表页跳转到文章详情页

给每篇文章添加个postId

posts-data.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
},
{
  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

事件文档

• 绑定事件
• 添加自定义属性，把文章id传到js中

 <block wx:for="{{postlist}}" wx:for-item="item">
    <view catchtap="onPostTap" data-postid="{{item.postId}}">
      <template is="postItem" data="{{...item}}" />
    </view>
  </block>

post.js

• 获取到文章id
• 跳到详情页面

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

<view>这是文章详情页</view>

app.json全局配置

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/post",
    "pages/posts/post-detail/post-detail"  
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  }
}

现在点击文章，就可以跳转到文章详情页面了。

10.文章详情页面布局

post-detail.wxml

<view class="container">
  <image class="head-image" src="/images/post/sls.JPG"></image>
  <view class="author-date">
    <image class="avatar" src="/images/avatar/2.png"></image>
    <text class="author">朱自清</text>
    <text class="const-text">发表于</text>
    <text class="date">一天前</text>
  </view>
  <text class="title">背影</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class='detail'>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</text>
</view>

post-detail.wxss

.container{
  display:flex;
  flex-direction: column;
}

.head-image{
   100%;
  height: 460rpx;
}

.author-date{
  flex-direction: row;
  margin-left:30rpx;
  margin-top: 20rpx;
}

.avatar{
  height: 64rpx;
   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{
   90rpx;
  height: 90rpx;
}

.share-img{
  margin-left: 30rpx;
}

.horizon{
   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

text{
    font-family:MicroSoft yahei;
    font-size: 24rpx;
}

效果预览

11.播放按钮和导航栏

post-detial.wxml添加一个播放按钮图片

<view class="container">
  <image class="head-image" src="/images/post/sls.JPG"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="/images/avatar/2.png"></image>
    <text class="author">朱自清</text>
    <text class="const-text">发表于</text>
    <text class="date">一天前</text>
  </view>
  <text class="title">背影</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class='detail'>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</text>
</view>

post-detail.wxss

.audio{
   102rpx;
  height: 110rpx;
  position: absolute;
  left: 50%;
  margin-left: -51rpx;
  top: 180rpx;
  opacity: 0.6
}

post-detail.json添加导航栏文字

{
  "navigationBarTitleText": "阅读"
}

效果

12.使用数据填充文章详情页面

post-data.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

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

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

<view class="container">
  <image class="head-image" src="{{postData.headImgSrc}}"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.datetime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class='detail'>{{postData.detail}}</text>
</view>

13.使用缓存实现文章收藏

缓存文档

post-detail.wxml

 <view class="circle-img">
      <image wx:if="{{collected}}" catchtap='onCollectionTap' src="/images/icon/collection.png"></image>
      <image wx:else catchtap='onCollectionTap' src="/images/icon/collection-anti.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
  </view>

post-detail.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
    })
  }
})

可以看到缓存的状态