小程序（六）template模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

1 将业务中的数据分离到单独的数据文件中

我们要在根目录下创建一个data本地数据库文件夹，在data文件夹下创建 newslist-data.js ,然后将newslist.js中onLoad 函数下的 var 复制过来
newslist-data.js

var local_database = [{
    date: "Sep 18 2016",
    title: "正是虾肥蟹壮时",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/avatar.jpg",
    content: "菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为",
    reading: "92",
    collection: "65"
  },
  {
    date: "Nov 25 2016",
    title: "比利·林恩的中场故事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "一“李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的”",
    reading: "112",
    collection: "96",
  },
  {
    date: "Nov 12 2016",
    title: "当我们在谈论经济学时，我们在谈论什么？",
    imgSrc: "/images/post/sls.png",
    avatar: "/images/avatar/3.png",
    content: "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况",
    reading: "62",
    collection: "92",
  }
]
module.exports = {//给数据定义一个出口
  postList: local_database
}

2 使用require方法加载js模块儿文件

newslist.js

var postsData = require("../../data/newslist-data.js") //获取数据库中的数据，只能用相对路径
Page({
  data: {
    //小程序总是会读取data对象来做数据绑定，这个动作我们成为动作A
    //而这个动作A的执行，是在onLoad事件执行之后发生的
  },
  onLoad: function (options) {// 页面初始化 options 为页面跳转所带来的参数
    //this.data.postList = postsData.postList  //wxml调用时 wx:for={{postList}}
    this.setData({
      posts_key:postsData.postList
    }); 
  },
})

3 template模块的使用

创建一个模板文件夹newslist-item，在该文件夹下创建newslist-item-template.wxml和newslist-item-template.wxss文件
newslist-item-template.wxml

<!-- 使用 name 属性，作为模板的名字 -->
<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src='{{item.avatar}}'></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-title'>{{item.content}}</text>
    <view class='post-like'>
      <image class='post-like-image' src='../../images/icon/chat.png'></image>
      <text class='post-like-font'>{{item.reading}}</text>
      <image class='post-like-image' src='../../images/icon/view.png'></image>
      <text class='post-like-font'>{{item.collection}}</text>
    </view>
  </view>
</template>

引入template模板 <import src="newslist-item/newslist-item-template.wxml" />
newslist.wxml

<import src="newslist-item/newslist-item-template.wxml" /> <!-- 引用template模板-->
<view><!-- 页面json配置 只能配置window属性，所以页面json配置中不需要写window -->
  <block wx:for="{{posts_key}}" wx:key="posts_key" wx:for-item="item">
    <!-- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入 -->
    <template is="postItem" data="{{item}}" />
  </block>
</view>

将模板的样式复制到模板的wxss文件下，
newslist-item-template.wxss

.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;  
}
.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  border-radius: 50%;
}
.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;
  margin-bottom: 15px;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 20rpx;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-image{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

在newslist.wxss中直接引入模板样式就可以了 @import"newslist-item/newslist-item-template.wxss";

小程序template模板就到这里了 ^ _ ^