微信小程序template模版的使用方法

2024-12-09 14:41:56

前言

小程序开发语言虽然只能运行在微信小程序中，但是它的设计同样遵循了主流前端框架的主要特征——组件化，在小程序中组件化的实现有两种方式: template 模版和 Component 组件。这两种方式分别适用于不同的场景。

template 模版主要用于展示，模版中不涉及事件处理，需要处理的事件逻辑放在调用模版的页面中。一个 template 模版只包含 wxml wxss 文件。
Component 组件作为一个单独的功能模块，不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样， Component 组件可以包含 wxml wxss js json 文件。

1. 创建 template 模版

不同于 page 和 Component 的创建，在开发者工具中并不能快速创建一个 template 模版。所以需要单独创建 wxss wxml 文件。

template.wxml 文件语法

一个 template.wxml 文件中使用 <template> 标签包含一个模版，一个 template.wxml 文件可以包含多个 <template>模版，使用 name 属性作为模版的名称。

在模版中可以接受变量，使用 {{}} 展示。为变量的传递者由调用该模版的页面传递。

<template name="A">
 <text>template name: {{name}}</text>
</template>
<template name="B">
 <text>template name: {{name}} {{msg}}</text>
</template>

template.wxss 模版样式文件

模版可以拥有自己的样式文件

text{
 color: #cccccc;
}

2. 引用 template 模版

template 模版的引用需要使用 <import> 标签。该标签的 src 属性为需要引用模版的路径。
template 模版的使用用 <template> 标签。使用 is 属性来区别模版文件中定义的模版。
使用 data 传入模版中的数据。

index.wxml

<import src="../tpls/template.wxml" />

<view>
 <template is="A" data="{{name}}"/>
 <template is="B" data="{{name, msg}}"/>
<view>

3. 引用模版样式

在调用页面的 wxml 中引用了 template.wxml 后，模版的样式并不会引用，需要在调用页面的 wxss 中单独引用 template.wxss 文件。

index.wxss

@import "./tpls/template.wxss"

4. 模版文件中的事件处理

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

template.wxml

<template name="A">
 <text bindtap="handleTap">template name: {{name}}</text>
</template>

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 模版

如同使用 <import src="xx/xx/xx.wxml"> <tempalte is="A" /> 引用和使用模版一样，同样也可以使用 <include src="xx/xx/xx.wxml />" 来引用一个模版。

需要注意的是：

使用 <include> 引用模版文件时，并不能分别出模版文件的模版块，所以使用 <include> 引用的模版文件中只能定义一个模版块。
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

微信小程序 template模板详解及实例

微信小程序 template模板详解及实例首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q
微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &
微信小程序模板template简单用法示例

本文实例讲述了微信小程序模板template简单用法.分享给大家供大家参考,具体如下: 模板呢,就是为了方便你重复写一些代码而建立的,目前我指发现它的功能适合建立一些表格类型的数据, 比如,录入认得信息啥的(都有名字,年龄,性别啥的) 1. index.wxml代码 <view class="page"> <template name="aafa"> <view> <text> 姓名:{{name}} 年龄:{{age
微信小程序template模板实例详解

微信小程序template模板使用前言微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template. 效果图一.模板定义模板最重要的是模板的名称,即"" 以下是实例模板代码 <template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image cl
微信小程序模板（template）使用详解

本文为大家分享了微信小程序模板template的使用方法,供大家参考,具体内容如下效果图以MUI的实例首页和列表页面为实例通过上图,可以看出两个页面的列表部分很相近,以每行作为单元制作模板. template模板 1.模板存放的位置以及使用模板页面存放的位置 template模板的WXML  <template name="listNone"> <view class="tui-menu-list">
微信小程序实现给嵌套template模板传递数据的方式总结

本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use
微信小程序 template模板详解及实例代码

微信小程序 template模板详解如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b
微信小程序template模版的使用方法

前言小程序开发语言虽然只能运行在微信小程序中, 但是它的设计同样遵循了主流前端框架的主要特征--组件化,在小程序中组件化的实现有两种方式: template 模版和 Component 组件. 这两种方式分别适用于不同的场景. template 模版主要用于展示,模版中不涉及事件处理, 需要处理的事件逻辑放在调用模版的页面中. 一个 template 模版只包含 wxml wxss 文件. Component 组件作为一个单独的功能模块,不仅可以包含页面展示还可以包含该模块的事件逻辑处
微信小程序用户自定义模版用法实例分析

本文实例讲述了微信小程序用户自定义模版用法.分享给大家供大家参考,具体如下: 1.新建一个wxml(为测试方便,这里将wxml文件建立在home目录下) /home/home/botmenu.wxml: <template name="bottommenu"> <view class="bottomposition"> <navigator class="item_info" url="../home/ho
uniapp微信小程序:key失效的解决方法

uniapp 代码 <template> <view> <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image> </view> </template> <script> export default { props: { urlKey: {defau
uniapp在微信小程序中使用ECharts的方法

今天使用uniapp集成Echarts,实现地图图表的展示可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv
微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-
微信小程序中setInterval的使用方法

微信小程序中setInterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x
微信小程序按钮滑动的实现方法

微信小程序按钮滑动的实现方法一.先看东西滑动前滑动后二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&
微信小程序 Template详解及简单实例

微信小程序 Template 模板 WXML提供模板(Template),可以在模板中定义代码片段,然后在不同的地方使用.可以保证格式以及数据的相同. 1-定义模板使用`<template name="tempName"></template>`标签定义模板,并将模板名称命名为tempName,赋值给属性name.在标签内部,定义模板结构.如下:  <!-- index: int msg: stri

微信小程序template模版的使用方法

相关推荐

随机推荐