微信小程序 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实现分割提取页面所需内容
May 09 Javascript
jQuery 操作XML入门
Dec 25 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
js实现查询商品案例
Jul 22 Javascript
javascript函数式编程基础
Sep 15 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python控制台实现交互式环境执行
2020/06/09 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
电气个人求职信范文
2014/02/04 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
学校评语大全
2014/05/06 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
实操Python爬取觅知网素材图片示例
2021/11/27 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL