微信小程序中如何使用template模板(template,微信小程序,开发技术)

微信小程序template模板使用

前言

微信小程序中提供了template使用，即相同的板块可以进行代码互用，如下方的效果图，就可以用template。

效果图

一、模板定义

模板最重要的是模板的名称，即""

以下是实例模板代码

<templatename="postItem"><viewclass='post-container'><viewclass='post-author-date'><imageclass='post-author'src='{{avatar}}'></image><textclass='post-date'>{{date}}</text></view><textclass='post-title'>{{title}}</text><imageclass='post-image'src='{{imgSrc}}'></image><textclass='post-content'>{{content}}</text><viewclass='post-like'><imageclass='post-like-image'src='/images/icon/chat.png'></image><textclass='post-link-text'>{{collection}}</text><imageclass='post-like-image'src='/images/icon/view.png'></image><textclass='post-link-text'>{{reading}}</text></view></view></template>

wxss文件

.post-container{display:flex;flex-direction:column;margin-top:20rpx;margin-bottom:40rpx;background-color:white;border-bottom:1pxsolid#ededed;border-top:1pxsolid#ededed;padding-bottom:5px;}.post-author-date{margin:10rpx020rpx10rpx;}.post-author{width:60rpx;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;margin-right:10px;}.post-image{margin-left:16px;width:100%;height:340rpx;margin:auto0;margin-bottom:15rpx;}.post-content{color:#666;font-size:28rpx;margin-bottom:20rpx;margin-left:20rpx;margin-right:20rpx;letter-spacing:2rpx;line-height:40rpx;}.post-like{font-size:13px;flex-direction:row;line-height:16px;margin-left:16px;color:gray;}.post-like-image{height:16px;width:16px;margin-right:8px;vertical-align:middle;}.post-link-text{vertical-align:middle;margin-right:20px;}

二、模板使用

引入模板文件

使用模板文件 用is 使用 模板定义时的名称 data里面是循环里面里面的数据 用“...”表示的话，就可以把item里面的数据全部平铺出来，这样在template里面就不用写“item.xx”了，直接写item里面的属性就可以了 要使用template的程序wxml文件

<importsrc="post-item/post-item-template.wxml"/><view><blockwx:for="{{postList}}"wx:for-item="item"><templateis="postItem"data="{{...item}}"/></block></view>

wxss 文件

@import'post-item/post-item-template.wxss';