如何使用微信小程序模板

前言

小程序开发语言虽然只能在微信小程序中运行，但其设计也遵循了主流前端框架的主要特点：——组件化。在小程序中实现组件化有两种方式：模板和组件。这两种方法适用于不同的场景。

模板模板主要用于显示。模板中不涉及事件处理，要处理的事件逻辑放在调用模板的页面上。模板模板只包含wxml wxss文件。作为一个独立的功能模块，组件组件不仅可以包含页面显示，还可以包含该模块的事件逻辑处理。像页面一样，组件组件可以包含wxml wxsss json文件。1.创建模板模板

与页面和组件的创建不同，在开发人员工具中无法快速创建模板。因此，wxss wxml文件需要单独创建。

Template.wxml文件语法

一个template.wxml文件包含一个使用模板标记的模板，一个template.wxml文件可以包含多个模板模板，其中name属性作为模板的名称。

可以在模板中接受变量，并用{{}}显示。是变量的传递者，由调用模板的页面传递。

模板名称=' a ' texttemplatename : { { name } }/text/template name=' b ' texttemplatename 3360 { { name } } { { msg }/text/template template . wxss模板样式文件

模板可以有自己的样式文件

text { color: # cccccc}2.参考模板模板

模板模板引用需要导入标签。此标记的src属性是模板需要引用的路径。模板标签用于模板模板的使用。使用is属性来区分模板文件中定义的模板。使用数据在模板中传递数据。index.wxml

导入src=' http:/tpls/template . wxml/视图模板为=' a ' data=' { { name } } '/模板为=' b' data=' {{name，msg } } '/视图3。参考模板样式

Template.wxml在调用页面的wxml中被引用，所以不会引用模板样式，需要在调用页面的wxss中单独引用template.wxss文件。

index.wxss

@import。/TPS/template . wxss ' 4。模板文件中的事件处理

模板中定义的事件需要在调用页面中执行。

template.wxml

模板名='A' text bindtap='handleTap '模板名： { { name } }/text/template index . js

page({ data : } }，handletap () {console.log('模板模板单击')}})5。导入有范围

导入有范围的概念，即只导入目标文件中定义的模板，不导入目标文件中导入的模板。简而言之，导入不具有递归特性。

比如C指B，B指A，B定义的模板可以用在C中，A定义的模板可以用在B中，但是A定义的模板不能用在C中。

6.包含模板模板

就像使用import src=' http 3360 xx/xx/xx . wxml ' tempalteis=' a '/来引用和使用模板一样，也可以使用include src=' http 3360 xx/xx . wxml/'来引用模板。

应该指出的是：

使用include引用模板文件时，模板文件的模板块不能单独列出，因此include引用的模板文件中只能定义一个模板块。Include可以在目标文件中引入除template/wxs/之外的整个代码，这相当于将其复制到include位置。-index . wxml-include src=' http : header . wxml '/视图正文/视图include src=' http : footer . wxml '/！- header.wxml -查看标题/视图！- footer.wxml -查看页脚/查看摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。