微信小程序如何使用template模板?

青灯夜游
发布: 2020-04-17 09:42:15
转载
2952 人浏览过

微信小程序如何使用template模板?

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

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

1.png

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

import src=../../templates/courseList.wxml
登录后复制

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

2.png

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

模板样式

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

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

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

推荐:《小程序开发教程

以上是微信小程序如何使用template模板?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板