微信小程序 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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
谈谈PHP语法(4)
2006/10/09 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
json简单介绍
2008/06/10 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue中created和mounted的区别浅析
2019/08/13 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Python 元类实例解析
2018/04/04 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python读取几个G的csv文件方法
2019/01/07 Python
python列表的逆序遍历实现
2020/04/20 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
工程资料员岗位职责
2014/03/10 职场文书
绿色环保口号
2014/06/12 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
客户经理岗位职责
2015/01/31 职场文书
五四青年节活动总结
2015/02/10 职场文书
锦旗赠语
2015/06/23 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python