（五）微信小程序：模板template

模板Template

　　1.为什么要引入template？

　　　　模板：在模板中定义代码片段，然后在不同地方调用

　　　　实现：需要数据时引入时引入，不需要时则不必引入，达到代码的灵活性！

　　2.创建模板

　　　　目录结构：

　　　　（1）news-template.wxml

<template name="newsTemplate">
   <view class="articlelist">  
    <view class="author-time">
      <image class="author-icon" src="{{ icon }}"></image>
      <text class="author-name">{{ author }}</text>
      <text class="author-date">{{ time }}</text>
    </view>
    <text class="title">{{ title }}</text>
    <image class="article-img" src="{{ image }}"></image>
    <text class="article-text">{{ desc }}</text>
    <view class="article-like">
      <image class="article-like-icon" src="../../image/sc.png"/>
      <text class="article-like-text">{{ good }}</text>
      <image class="article-like-icon" src="../../image/fx.png"></image>
      <text class="article-like-text">{{comment}}</text>
    </view>   
  </view>
</template>

View Code

　　　　代码解析：设置了template模板+name（便于依据那么进行导入）

　　　　（2）news-template.wxml

　　　　　　与上节中的css渲染代码一致

　　　　（3）news.wxml

<!--pages/news/news.wxml-->
<import src="./news-template/news-template.wxml"/>

<block wx:for="{{ news }}" wx:for-index="idx" wx:for-item="item" wx:key="{{ idx }}">
  <template is="newsTemplate" data="{{ ...item }}"></template>
</block>

View Code

　　　　　代码解析：<import src="导入数据的路径"/>   ; 运用<template is="模板名称" data="{{ ...item }}">,此处的“点点点”相当于去掉date数组对象中的{}--》直击　　　　　　　　　　属性

　　　　（4）news.wxss

　　　　　　使用@import "路径"；

/* pages/news/news.wxss */
@import "./news-template/news-template.wxss";
.swiperimg{
  width: 100%;
}

View Code

此节实现了 “template模板方便代码灵活性”功能，下节制作新闻详情页~