慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-从文章列表跳转到新闻详情页面（组件自定义属性及获取属性）

从文章列表跳转到新闻详情页面（组件自定义属性及获取属性）

1.进入目录 pages/posts，修改文件posts.wxss，调整代码把漏了的公用css代码剪切到目录 pages/posts/post-item 下文件 post-item-template.wxss

/* pages/posts/posts.wxss */
@import "post-item/post-item-template.wxss";

swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

2.进入目录 pages/posts/post-item，修改文件 post-item-template.wxss

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:40rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

.post-author-date {
  margin:10rpx 0 20rpx 10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.post-author {
  width:60rpx;
  height:60rpx;
  /*vertical-align:middle;*/
}

.post-date {
  margin-left:20rpx;
  /*vertical-align:middle;*/
  font-size:26rpx;
}

.post-title {
  font-size:34rpx;
  font-weight:600;
  margin-bottom:10px;
  margin-left:10px;
  color:#333;
}

.post-image {
  width:100%;
  height:340rpx;
  margin-bottom:15px;
}

.post-content {
  font-size:28rpx;
  color:#666;
  letter-spacing:2rpx;
  margin-left:20rpx;
  margin-bottom:20rpx;
}

.post-like {
  display:flex;
  flex-direction:row;
  align-items:center;
  font-size:26rpx;
  margin-left:20rpx;
}

.post-like-image {
  height:32rpx;
  width:32rpx;
  margin-right:16rpx;
}

.post-like-font {
  margin-right:40rpx;
}

3.进入目录 pages/posts/post-item，修改文件 post-item-template.wxml，去掉所有变量前的 item，原因是 item 在这里虽然是默认值，但是别人无法明白，换另外方式

<template name="postItem">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{avatar}}"></image>
        <text class="post-date">{{date}}</text>
      </view>
      <text class="post-title">{{title}}</text>
      <image class="post-image" src="{{imgSrc}}"></image>
      <text class="post-content">{{content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../images/icon/chat.png"></image>
        <text class="post-like-font">{{collection}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{reading}}</text>
      </view>
    </view> 
</template>

4.查看效果，数据无法显示

5.进入目录 pages/posts，修改文件posts.wxml，在 template 模板代码中的 item 前加了三个点

<import src="post-item/post-item-template.wxml" />
<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
      <!--//template-->
      <template is="postItem" data="{{...item}}" />  
  </block>  
</view>

6.查看效果，数据有可以看到了，三个小点的意思把数据文件中的数据对象展开了

7.进入目录 pages/posts，新建目录 post-detail

8.进入目录 pages/posts/post-detail，新建文件 post-detail.js、post-detail.wxml、post-detail.wxss、post-detail.json

9.进入目录 pages/posts，修改文件 posts.wxml，添加新闻列表到详情页的链接，首先在 template 模板中加事件

<template is="postItem" data="{{...item}}" catchtap="onPostTap"/>

10.进入目录 pages/posts，修改文件 posts.js

// pages/posts/posts.js
var postsData = require('../../data/posts-data.js')

Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      posts_key: postsData.postList
    });
  },
  onPostTap:function() {
    console.log("onPostTap");
  }
})

11.经过测试，事件不成功，在 template 模板上加不行，查看生成后的源码，发现页面上没有这个事件，最后使用了一个小技巧，在 template 模板外层加一个 view 标签，事件加到标签上

12.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
      <!--//template-->
      <view catchtap="onPostTap">
        <template is="postItem" data="{{...item}}"/>
      </view>
  </block>  
</view>

13.测试成功

14.进入目录 data，修改文件 posts-data.js，添加一个 postId，以区分文章

var local_database = [{
    date: 'Sep 18 2019',
    title: '正是虾肥蟹壮时',
    imgSrc: '/images/post/crab.png',
    avatar: '/images/avatar/1.png',
    content: '菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
    reading: '112',
    collection: '96',
    postId:0,
  },
  {
    date: "Nov 25 2016",
    title: "比利·林恩的中场故事",
    imgSrc: "/images/post/bl.png",
    avatar: '/images/avatar/1.png',
    content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
    reading: "112",
    collection: "96",
    postId:1,
  },
  {
    //按住alt + shift + F 可以格式化代码样式
    date: "Nov 12 2016",
    title: "当我们在谈论经济学时，我们在谈论什么?",
    imgSrc: "/images/post/sls.jpg",
    avatar: "/images/avatar/3.png",
    content: "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况：...",
    reading: 62,
    collection: 92,
    postId:2,
  },
  {
    date: "Nov 20 2016",
    title: "微信·小程序开发工具安装指南",
    imgSrc: "/images/post/xiaolong.jpg",
    avatar: "/images/avatar/5.png",
    content: "这两天闲来无事，也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验，过两天我会写一篇文章以开发者的角度来详细评价微信小程序",
    reading: 102,
    collection:92,
    postId:3,
  },
  {
    date: "Nov 20 2016",
    title: "从视觉到触觉 这款VR手套能给你真实触感",
    imgSrc: "/images/post/vr.png",
    avatar: "/images/avatar/3.png",
    content: "8月29日消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品",
    reading: 102,
    collection: 26,
    postId:4,
  },
]

module.exports = {
  postList:local_database
}

15.进入目录 pages/posts，修改文件 posts.wxml

<import src="post-item/post-item-template.wxml" />
<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
      <!--//template-->
      <view catchtap="onPostTap" data-postId="{{item.postId}}">
        <template is="postItem" data="{{...item}}"/>
      </view>
  </block>  
</view>

16.进入目录 pages/posts，修改文件 posts.js，测试 postId

// pages/posts/posts.js
var postsData = require('../../data/posts-data.js')

Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      posts_key: postsData.postList
    });
  },
  onPostTap:function(event) {
    var postId = event.currentTarget.dataset.postid;
    console.log("on post id is " + postId);
  }
})

17.测试，点击新闻列表

18.进入目录 pages/posts，修改文件 posts.js

// pages/posts/posts.js
var postsData = require('../../data/posts-data.js')

Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      posts_key: postsData.postList
    });
  },
  onPostTap:function(event) {
    var postId = event.currentTarget.dataset.postid;
    // console.log("on post id is " + postId);
    wx.navigateTo({
      url:"post-detail/post-detail"
    })
  }
})

19.提示错误

20.修改文件 app.json

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

21.测试，还存在不少问题

22.进入目录 pages/posts/post-detail，修改文件 post-detail.js

Page({
})

22.进入目录 pages/posts/post-detail，修改文件 post-detail.json

{}

23.测试成功