定义模板

使用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传入的数据。

微信小程序-视图模板的更多相关文章

  1. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  2. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  3. 微信小程序发送模板消息

    微信小程序发送模板消息 标签(空格分隔): php 看小程序文档 [模板消息文档总览]:https://developers.weixin.qq.com/miniprogram/dev/framewo ...

  4. 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:

    小程序开发模板消息的时候  出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...

  5. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  6. 微信小程序开发——模板中加载html代码

    最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...

  7. 微信小程序之模板消息推送

    最近在用sanic框架写微信小程序,其中写了一个微信消息推送,还挺有意思的,写了个小demo 具体见官方文档:https://developers.weixin.qq.com/miniprogram/ ...

  8. 微信小程序 发送模板消息的功能实现

    背景 - 小程序开发的过程中,绝大多数会满足微信支付 - 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯 - 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道 ...

  9. 如何在微信小程序的模板渲染中使用JS?

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

随机推荐

  1. python_编程规范

    缩进 4个"空格"作为一个缩进层次,永远不要使用"制表位" 空格 运算符两边放置一个空格 命名  模块名:模块应该是不含下画线的.简短的.小写的名字.  类名: ...

  2. Android studio 出现 Unsupported major.minor version 52.0

    参考资料:http://blog.csdn.net/fakine/article/details/51241202 最近更新了Android studio 之后,出现了Error:java.lang. ...

  3. 【转】PHP ob_start() 函数介绍

    php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数. ob_start([string output_callback])- 打开输出缓冲区,所有的输出信息不在直接 ...

  4. WLAN协议相关协议

    802.11协议 CAPWAP协议: RFC5415:https://tools.ietf.org/html/rfc5415 DTLS握手处理流程: RFC4347DTLS 认证: RFC5246 U ...

  5. Leetcode: Heaters

    Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...

  6. CAS学习笔记(一)

    近期做单点登录,看了一些CAS资料,做下总结 一.cas简介 全名:Central Authentication Service 特点: 1.开源的.多协议的 SSO 解决方案: Protocols  ...

  7. JQ 数字验证

    $.fn.extend({ checknum: function (min, max, accurate) { if ($(this).val() != "") { $(this) ...

  8. FTF登入tiny210开发板

    配置环境一: 第一步:安装虚拟机             1)安装虚拟机+Linux12.04             2)安装FTP软件 第二步:配置超级终端(串口)             1)开 ...

  9. PHP 使用编码树,生成easyui中的tree样式

    生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename  节点名称 这样的形 ...

  10. py2exe使用方法

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...