微信小程序 Template详解及简单实例


Posted in Javascript onJanuary 05, 2017

微信小程序 Template

模板

WXML提供模板(Template),可以在模板中定义代码片段,然后在不同的地方使用。可以保证格式以及数据的相同。

1-定义模板

使用`<template name="tempName"></template>`标签定义模板,并将模板名称命名为tempName,赋值给属性name。在标签内部,定义模板结构。如下:

<!-- template.wxml -->
<!-- 
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

2-使用模板

使用<template is="tempName" />标签,在需要使用模板的地方。如果要用到js文件中的数据,则需要添加data属性。如下:

<!-- template.wxml -->

<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
此时在页面上就会重复显示三次相同的信息。
data中的数据,来源于js文件,如下:

<!-- template.js -->
Page({
 data: {
  item: {
   index: 0,
   msg: 'this is a template',
   time: '2016-09-15'
  }
 }
})

3-is属性

is属性不仅可以静态的指向渲染的模板,也可以使用Mustache语法,来动态决定具体需要渲染哪个模板。如下:

<!-- template.wxml -->

// templates
<template name="odd">
  <view> odd </view>
</template>
<template name="odd">
  <view> even </view>
</template>

// is属性使用Mustache语法动态渲染template
<block wx:for="{{[1, 2, 3, 4,5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

如上代码,则会在页面中根据条件来显示odd 或是 even

4-模板的引用

如上都是在同一个wxml文件中定义和引用模板,而模板的定义和引用是可以分开的。即在一个文件中定义模板,而在其他一个或多个文件wxml文件中都可以使用定义好的模板。
从外部文件中引用模板,使用import src="templateUrl" />标签。同样使用is属性来指向要引用的标签。
如目录如下:

-pages
  |--index
    |--index.js
    |--index.json
    |--index.wxml
    |--index.wxss
  |--template
    |--template.js
    |--template.json
    |--template.wxml
    |--template.wxss

要在index.wxml中使用template中定义的模板,则需要先在index中利用import来导入该模板:

<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的数据

要注意import作用域,其仅仅引用目标文件中template。如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

参考

微信小程序文档-框架-视图层-WXML-模板

微信小程序文档-框架-视图层-WXML-引用

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
javascript拖拽应用实例
Mar 25 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
js中arguments对象的深入理解
May 14 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 #Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 #Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 #Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
jQuery电话号码验证实例
Jan 05 #Javascript
纯原生js实现table表格的增删
Jan 05 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
Javascript 类型转换方法
2010/10/24 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JS重载实现方法分析
2016/12/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
打包发布Python模块的方法详解
2016/09/18 Python
django实现前后台交互实例
2017/08/07 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Django跨域请求原理及实现代码
2020/11/14 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
学院领导推荐信
2013/10/30 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
节约用水标语
2014/06/11 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
Python操作CSV格式文件的方法大全
2021/07/15 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
用JS创建一个录屏功能
2021/11/11 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python