微信小程序實戰–集閱讀與電影於一體的小程序項目（二）

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

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{
  width: 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
    })
  }
})

可以看到緩存的狀態