微信小程序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 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js实现自定义路由
2017/02/04 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python中的日期时间处理详解
2016/11/17 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
基于Python log 的正确打开方式
2018/04/28 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
有趣的广告词
2014/03/18 职场文书
优秀应届生求职信
2014/06/16 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
小马王观后感
2015/06/11 职场文书