微信小程序 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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
vue购物车插件编写代码
Nov 27 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 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
实用函数3
2007/11/08 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Django中使用Celery的教程详解
2018/08/24 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
房贷收入证明范本
2015/06/12 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
浅谈redis整数集为什么不能降级
2021/07/25 Redis
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python