微信小程序 教程之模板

 更新时间:2016年10月18日 10:38:19   投稿:lqh  
这篇文章主要介绍了微信小程序 模板的相关资料,并附实例代码,需要的朋友可以参考下

系列文章:

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
 index: int
 msg: string
 time: string
-->
<template name="msgItem">
 <view>
 <text> {{index}}: {{msg}} </text>
 <text> Time: {{time}} </text>
 </view>
</template>

使用模板

使用is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:

<template is="msgItem" data="{{...item}}"/>

Page({
 data: {
 item: {
 index: 0,
 msg: 'this is a template',
 time: '2016-09-15'
 }
 }
})

is属性可以使用Mustache语法,在运行时来决定具体需要渲染哪个模板:

<template name="odd">
 <view> odd </view>
</template>
<template name="even">
 <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
 <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域,只能使用data传入的数据。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 图片按比例缩放函数

    图片按比例缩放函数

    图片按比例缩放函数...
    2006-06-06
  • javascript 判断是否是微信浏览器的方法

    javascript 判断是否是微信浏览器的方法

    这篇文章主要介绍了javascript 判断是否是微信浏览器的方法的相关资料,需要的朋友可以参考下
    2016-10-10
  • JS面试异步模拟红绿灯实现详解

    JS面试异步模拟红绿灯实现详解

    这篇文章主要为大家介绍了JS面试异步模拟红绿灯实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • sockjs前端WebSocket二次封装示例详解

    sockjs前端WebSocket二次封装示例详解

    这篇文章主要为大家介绍了sockjs前端WebSocket二次封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Javascript 之封装(Package)

    Javascript 之封装(Package)

    Javascript是一种基于对象(object-based)的语言,我们在JS中遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程语言,因为它的语法中没有class(类)那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象
    2018-09-09
  • 微信小程序 122100版本更新问题解决方案

    微信小程序 122100版本更新问题解决方案

    这篇文章主要介绍了微信小程序 122100版本更新问题解决方案的相关资料,这里对微信小程序版本更新该如何解决提供解决方案,需要的朋友可以参考下
    2016-12-12
  • 实现一个简单得数据响应系统

    实现一个简单得数据响应系统

    这篇文章主要介绍了实现一个简单得数据响应系统,文章介绍的数据响应系统会用到Dep,其实,这就是一个依赖收集的容器, depend 收集依赖, notify 触发依赖,下面来看看详细的内容结介绍,需要的朋友可以参考一下
    2021-11-11
  • JavaScript节点的增删改查深入学习

    JavaScript节点的增删改查深入学习

    这篇文章主要为大家介绍了JavaScript节点的增删改查深入学习示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

    详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

    这篇文章主要介绍了微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07

最新评论