微信小程序 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索引在使用中的一些困惑
Oct 24 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
JavaScript简易计算器制作
Jan 17 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中call_user_func_array()函数的用法演示
2012/02/05 PHP
php防止sql注入代码实例
2013/12/18 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php中序列化与反序列化详解
2017/02/13 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
python 接口测试response返回数据对比的方法
2018/02/11 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python K近邻算法的kd树实现
2018/09/06 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
EJB的几种类型
2012/08/15 面试题
《故都的秋》教学反思
2014/04/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
小学数学国培研修日志
2015/11/13 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
Mysql 一主多从的部署
2022/05/20 MySQL
React自定义hook的方法
2022/06/25 Javascript