代码顺序为test.js--test.json--test.wxml--test.wxss--post-detail.js--post-detail.json--post-detail.wxml--post-detail.wxss

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

  /**
   * 页面的初始数据
   */
  data: {
    test:'uploads/hongshaorou.jpg',
    host:''
  },
  // process:function(){
  //   var date = 'Nov 18 2019'
  // },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const app = getApp()
    this.setData({
      posts_key: postsData.postList
    })
console.log('onload')
   },
   onPostTap:function(event){
    var postId = event.currentTarget.dataset.postid;
     wx.navigateTo({
       url: 'post-detail/post-detail?id='+postId
     })
   },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{

    "navigationBarBackgroundColor":"#405f80",
    "navigationBarTitleText":"标题"

}

<!--pages/test/test.wxml-->
 <import src="post-item/post-item-template.wxml"/>

<view>
  <!-- 轮播图 -->
  <swiper indicator-dots="true" autoplay="true">
    <swiper-item><image src="/images/wx.png" class="ima"></image></swiper-item>
    <swiper-item><image src="/images/vr.png" class="ima"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png" class="ima"></image></swiper-item>
  </swiper>
  <!-- 文章列表 -->
  <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
      <view bind:tap="onPostTap" data-postId="{{item.postId}}">
        <template is="postItem" data="{{...item}}"/>
      </view>
  </block>
</view>

/* pages/test/test.wxss */
@import"post-item/post-item-template.wxss";
swiper{
  width: 100%;
  height: 600rpx;
}
.ima{
  width: 100%;
  height: 600rpx;
}

// pages/test/post-detall/post-detall.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var postId = options.id
    var postData = postsData.postList[postId]
    this.setData({postData})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{
  "navigationBarBackgroundColor":"#405f80",
  "navigationBarTitleText":"阅读"
}

<!--pages/test/post-detall/post-detall.wxml-->
<view class="container">
  <image class="head-image" src="{{headImgSrc}}"></image>
  <view class="author-date">
    <image class="avatar" src="{{avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{dateTime}}</text>
  </view>
  <text class="title">{{titel}}</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">{{detail}}</text>
</view>

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

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

.hide{
  opacity: 0;
}

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

.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;
}

.tool {
  margin-top: 20rpx;
}

.circle-img{
  margin-right: 40rpx;
  display: flex;
  flex-direction: row;
  /* 在水平方向的末尾 */
  justify-content: flex-end;
}
.circle-img Image {
  width: 90rpx;
  height: 90rpx;
}
.horizon{
  width: 660rpx;
  height: 1px;
  background-color: #e5e5e5;
  position: relative;
  bottom: 45rpx;
  z-index: -1;
  margin: 0 auto;
}
.share-img{
  margin-left: 30rpx;
}
.detail{
  color: #666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}