微信小程序 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 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
详解用node编写自己的cli工具
May 23 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
tsconfig.json配置详解
May 17 Javascript
JavaScript仿京东轮播图效果
Feb 25 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 编写的日历
2006/10/09 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
小程序实现选择题选择效果
2018/11/04 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
Python 常用string函数详解
2016/05/30 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python操作链表的示例代码
2020/09/27 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
幼儿园教师国培感言
2014/02/02 职场文书
村安全生产责任书
2014/08/25 职场文书
个人作风建设剖析材料
2014/10/11 职场文书