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


Posted in Javascript onApril 13, 2019

前言

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

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

1. 创建 template 模版

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

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

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>

总结

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

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
React中阻止事件冒泡的问题详析
Apr 12 #Javascript
TypeScript中的方法重载详解
Apr 12 #Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 #Javascript
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
php源码的使用方法讲解
2019/09/26 PHP
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
微信小程序自定义组件
2017/08/16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
银行实习自我鉴定
2013/10/12 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
集团薪酬管理制度
2014/01/13 职场文书
学校春季防火方案
2014/06/08 职场文书
2014年保洁工作总结
2014/11/24 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书