模板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>
代码解析：设置了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>
代码解析：<import src="导入数据的路径"/> ; 运用<template is="模板名称" data="{{ ...item }}">,此处的“点点点”相当于去掉date数组对象中的{}--》直击 属性
（4）news.wxss
使用@import "路径"；
/* pages/news/news.wxss */ @import "./news-template/news-template.wxss"; .swiperimg{ width: 100%; }
此节实现了 “template模板方便代码灵活性”功能，下节制作新闻详情页~