微信小程序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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue实现表单录入小案例
Sep 27 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
smarty实现多级分类的方法
2014/12/05 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
电大自我鉴定
2013/10/27 职场文书
超市采购员岗位职责
2014/02/01 职场文书
《锄禾》教学反思
2014/04/08 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
住房租房协议书
2014/08/20 职场文书
公司授权委托书范文
2014/09/21 职场文书
专项资金申请报告
2015/05/15 职场文书
企业宣传语大全
2015/07/13 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
js不常见操作运算符总结
2021/11/20 Javascript