### [微信小程序如何使用template模板？](https://www.prosaas.cn/article/16719)

**Published:** 2020-04-17T01:42:15

**Author:** 5201314

**Excerpt:** 在小程序开发过程中，一个项目需要在多处页面使用类似的模块，就需要创建模板减少代码量，同时提高代码复用度。小程序…

![](https://img.php.cn/upload/article/000/000/024/5e99096b2709d204.jpg)

在小程序开发过程中，一个项目需要在多处页面使用类似的模块，就需要创建模板减少代码量，同时提高代码复用度。**小程序通过template 标签使用模板**，template 标签的 is 属性与模板的 name 属性对应，data 属性代表传入模板的数据。

在使用模板开发小程序前，需先定义模板，在开发项目中新建一个template文件夹用来管理项目中所有的模板。由于模板属于样式文件，因此新建一个courseList.wxml文件用于定义模板。使用name属性，作为模板的名字。然后在内定义代码片段。需要注意一个.wxml文件中可以定义多个模板，只需要通过name来区分。模板中的数据都是展开之后的属性。定义模板的代码如下：

![](https://img.php.cn/upload/image/368/393/463/1587087480968505.png)

在name中输入不同名称可以定义另一个完整的template，它们属于一个.WXML文件下，在使用模板中通过不同的名字调用定义的模板。使用 is 属性，声明需要的使用的模板：

import src=../../templates/courseList.wxml

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

![](https://img.php.cn/upload/image/465/858/548/1587087543500871.png)

值得注意的是，可以通过表达式来确定使用哪个模板，或者通过wx:if来确定。index是数组当前项的下标。

**模板样式**

在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。

在需要使用模板的页面 .wxss文件中import进来；或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。

总结小程序模板使用主要为在同一个WXML文件中创建多个类似的模板用name属性来区别，模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量。

推荐：《小程序开发教程》

以上就是微信小程序如何使用template模板？的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, if, 微信小程序

**Categories:** 后端开发

---