我是靠谱客的博主 热心苗条,最近开发中收集的这篇文章主要介绍微信小程序如何使用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模板?的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是热心苗条为你收集整理的微信小程序如何使用template模板?的全部内容,希望文章能够帮你解决微信小程序如何使用template模板?所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(92)

评论列表共有 0 条评论

立即
投稿
返回
顶部