从品牌网站建设到网络营销策划,从策略到执行的一站式服务
怎么在微信小程序中使用template模版?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联主营新邵网站建设的网络公司,主营网站建设方案,app开发定制,新邵h5微信小程序开发搭建,新邵网站营销推广欢迎新邵等地区企业咨询1. 创建 template 模版
不同于 page 和 Component 的创建, 在开发者工具中并不能快速创建一个 template 模版。所以需要单独创建 wxss wxml 文件。
template.wxml 文件语法
一个 template.wxml 文件中使用 标签包含一个模版, 一个 template.wxml 文件可以包含多个 模版, 使用 name 属性作为模版的名称。
在模版中可以接受变量, 使用 {{}} 展示。 为变量的传递者由调用该模版的页面传递。
template name: {{name}} template name: {{name}} {{msg}}
template.wxss 模版样式文件
模版可以拥有自己的样式文件
text{ color: #cccccc; }
2. 引用 template 模版
template 模版的引用需要使用
template 模版的使用用 标签。 使用 is 属性来区别模版文件中定义的模版。
使用 data 传入模版中的数据。
index.wxml
3. 引用模版样式
在 调用页面的 wxml 中引用了 template.wxml 后,模版的样式并不会引用, 需要在调用页面的 wxss 中单独引用 template.wxss 文件。
index.wxss
@import "./tpls/template.wxss"
4. 模版文件中的事件处理
在模版中定义的事件, 需要调用页面中执行。
template.wxml
template name: {{name}}
index.js
Page({ data: {}, handleTap() { console.log('template 模版 click') } })
5. import 有作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。
例如:C 引用 B,B 引用A,在C中可以使用B定义的 template,在B中可以使用A定义的 template ,但是C不能使用A定义的template
6. include 配合 template 模版
如同使用
引用和使用模版一样, 同样也可以使用
需要注意的是:
使用
include 可以将目标文件中除了
外的整个代码引入,相当于是拷贝到 include 位置。
body
header
footer
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图