如下图，我在做华企商学院小程序的时候，课程搜索结果页和课程列表页结构是完全一样的，这时就非常适合使用模板来完成页面搭建。实现一次定义，到处使用。

模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个courseList.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。

注意：
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分；
b.模板中的数据都是展开之后的属性。

<template name="courseLeft"><navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}"><view class="item mr26"><image src="{{imagePath}}" mode="aspectFill"></image><view class="course-title"><text class="title">{{courseName}}</text><text class="author">- {{teacherName}}</text></view><view class="course-info clearfix"><view class="fl"><text class="play">{{playCount}}</text></view><view class="fr"><text class="grade">{{score}}</text></view></view><view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view></view></navigator>
</template><template name="courseRight"><navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}"><view class="item"><image src="{{imagePath}}" mode="aspectFill"></image><view class="course-title"><text class="title">{{courseName}}</text><text class="author">- {{teacherName}}</text></view><view class="course-info clearfix"><text class="play fl">{{playCount}}</text><text class="grade fr">{{score}}</text></view><view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view></view></navigator>
</template>

二、使用模板

1、使用 is 属性，声明需要的使用的模板

<import src="../../templates/courseList.wxml"/>

2、将模板所需要的 data 传入，一般我们都会使用列表渲染。

<block wx:for="{{courseList}}"><template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template>
</block>

注意：
a.可以通过表达式来确定使用哪个模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"
或者通过wx:if来确定。index是数组当前项的下标。

<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

b. data 是要模板渲染的数据，data="{{...item}}" 写法是ES6的写法，item是wx:for当前项，... 是展开运算符，在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。
2、在需要使用模板的页面 .wxss文件中import进来；或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";

微信小程序-template模板使用相关推荐

微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
回顾微信小程序template模板的使用循环赋值点击事件
1.模板样式实现在components目录下新建一个的wxml文件,eg:index.wxml // 自定一个名为的customCard模板 <template name="cust ...
小程序template模板为知你客服传入微信头像和昵称
小程序template模板为知你客服传入微信头像和昵称自从利用了知你客服以来,我们自己的小程序已经完全完成了服务内环化,即所有操作已经可以完全在微信内部完成,不必在使用qq联系客户,但在未配置 ...
微信小程序-WXML-template模板
微信小程序-WXML-template模板微信小程序中的模板,可以在其中定义代码片段,然后再不同的地方调用. 1.定义模板 name属性,取值为模板的名字 <tempalte name=&qu ...
php+实现群发微信模板消息_使用php实现微信小程序发送模板消息（附代码）
本篇文章给大家带来的内容是关于使用php实现微信小程序发送模板消息(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本章将会简单说一下微信小程序的模板消息发送,相对来说比较简 ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
商城模板_商城模板网站html5_微信小程序商城模板
分享一个商城模板平台,商城模板网站html5平台,微信小程序商城模板平台,这个平台可以提供超60+行业的商城模板. ☞商城模板平台另外给大家分享一下,在这个商城模板平台可以制作商城网站,电脑商城和微 ...
微信小程序发送模板消息踩的坑
在微信的微信小程序中,微信提供了和微信服务号相同的模板消息功能. 但是,虽然都是发送模板消息,小程序和服务号的模板消息的使用还是有差别的. 对于微信服务号的模板消息只要通过查看文档就能够知道我们使用模 ...

微信小程序-template模板使用

模板

一、定义模板

二、使用模板

三、模板样式

微信小程序-template模板使用相关推荐

最新文章

热门文章