小程序的模板化编程

// 将数据整合成数组类型
var local_database = [
  {
    date: "Jan 06 2018",
    title: "正是虾肥蟹壮时",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "“山明水净夜来霜，数树深红出浅黄。试上高楼清入骨，岂如春色嗾人狂。”金秋时节，天高云淡，秋风送爽，气候宜人。秋风秋阳中，硕果坠挂枝头，玉米抚须含笑，高粱引颈高歌，豆荚饱满圆润。",
    reading: "112",
    collection: "96",
  },
  {
    date: "Jan 03 2018",
    title: "比利·林恩的中场战事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "伊拉克战争时期，来自美国德州的19岁技术兵比利·林恩（乔·阿尔文 Joe Alwyn 饰）因为一段偶然拍摄的视频而家喻户晓。那是一次规模不大却激烈非常的遭遇战，战斗中林恩所在的B班班长（范·迪塞尔 Vin Diesel 饰）遭到当地武装分子的伏击和劫持，而林恩为了营救班长不惜铤而走险冲锋陷阵。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 05 2018",
    title: "肖申克的救赎",
    imgSrc: "/images/post/xs.jpg",
    avatar: "/images/avatar/3.png",
    content: "20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯 Tim Robbins 饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为肖申克的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 01 2018",
    title: "霸王别姬",
    imgSrc: "/images/post/bj.jpg",
    avatar: "/images/avatar/4.png",
    content: "段小楼（张丰毅）与程蝶衣（张国荣）是一对打小一起长大的师兄弟，两人一个演生，一个饰旦，一向配合天衣无缝，尤其一出《霸王别姬》，更是誉满京城，为此，两人约定合演一辈子《霸王别姬》。但两人对戏剧与人生关系的理解有本质不同，段小楼深知戏非人生，程蝶衣则是人戏不分。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 08 2018",
    title: "这个杀手不太冷",
    imgSrc: "/images/post/ss.jpg",
    avatar: "/images/avatar/5.png",
    content: "里昂（让·雷诺饰）是名孤独的×××，受人雇佣。一天，邻居家小姑娘马蒂尔达（纳塔丽·波特曼饰)敲开他的房门，要求在他那里暂避杀身之祸。原来邻居家的主人是警方缉毒组的眼线，只因贪污了一小包×××而遭恶警（加里·奥德曼饰）杀害全家的惩罚。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 04 2018",
    title: "阿甘正传",
    imgSrc: "/images/post/ag.jpg",
    avatar: "/images/avatar/1.png",
    content: "阿甘（汤姆·汉克斯 饰）于二战结束后不久出生在美国南方阿拉巴马州一个闭塞的小镇，他先天弱智，智商只有75，然而他的妈妈是一个性格坚强的女性，她常常鼓励阿甘“傻人有傻福”，要他自强不息。",
    reading: "92",
    collection: "65",
  },
]

// 设置一个数据出口，当前这个文件相当于是一个js模块
module.exports = {
  // 输出的是一个Array对象
  postList: local_database,
}

// 注意：这里只能使用相对路径
var postsData = require('../../data/posts-data.js')

Page({
  data: {
  },

  onLoad: function (options) {
    this.setData({
      // 通过postsData来拿到postList对象
      posts_key: postsData.postList
    });
  },
})

<!-- 模板文件需要使用template标签包围 -->
<template name="postItem">
  <view class='post-container'>
      <view class='post-author-date'>
        <image src='{{item.avatar}}' class='post-author'></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.imgSrc}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <image src='../../images/icon/chat.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.reading}}</text>
        <image src='../../images/icon/view.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.collection}}</text>
      </view>
    </view>
</template>

<!-- 通过import标签引入模板文件，可以使用相对路径也可以使用绝对路径 -->
<import src="post-item/post-item-template.wxml" />
<view>
  <!-- 需要在父节点里定义宽高，indicator-dots属性指定显示轮播图的小点，纵向滚动则使用vertical属性 -->
  <swiper 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>

  <!-- wx:for需要接收一个数组、集合类型的值，wx:for-item用于设置一个变量来代表子元素 -->
  <!-- wx:for-index用于设置一个变量来代表下标值 -->
  <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index" >
    <!-- is的值是模板文件中定义的模板名称，data是将循环出来的子元素对象传递到模板文件中 -->
    <template is="postItem" data="{{item}}" />
  </block>
</view>

.post-author-date{
  margin: 10rpx 0px 20rpx 10rpx ;
}
.post-author{
  width: 30px;
  height: 60rpx;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
  margin-top: 15px;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-img{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

<!-- 使用@import来引用模板样式 -->
@import "post-item/post-item-template.wxss";

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

swiper image{
  width:100%;
  height:600rpx
}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top:20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}