微信小程序 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写的日历(包括日历的样式及功能)
Apr 23 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
JS前端笔试题分析
Dec 19 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python单链表实现代码实例
2013/11/21 Python
使用python统计文件行数示例分享
2014/02/21 Python
python获取网页状态码示例
2014/03/30 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Django实现学员管理系统
2019/02/26 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python 魔法函数实例及解析
2019/09/25 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
Java程序员综合测试题
2014/04/25 面试题
实习推荐信
2014/05/10 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Python实现视频中添加音频工具详解
2021/12/06 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis