微信小程序 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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
一个程序下载的管理程序(二)
2006/10/09 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php数组去除空值函数分享
2015/02/02 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python主线程捕获子线程的方法
2018/06/17 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
初入社会应届生求职信
2013/11/18 职场文书
教师产假请假条范文
2014/04/10 职场文书
面试自我评价范文
2014/09/17 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers