微信小程序 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 相关文章推荐
javascript中的缓动效果实现程序
Dec 29 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
Django实现文件上传下载
2019/10/06 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
小学感恩教育活动总结
2014/07/07 职场文书
离婚财产处理协议书
2014/09/30 职场文书
医学生自荐信范文
2015/03/05 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
使用scrapy实现增量式爬取方式
2022/06/21 Python