定义模板

使用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. iOS 9后修改状态栏方法

    1.plist文件中添加View controller-based status bar appearance字段 值为NO 2.程序中添加 [UIApplication sharedApplicat ...

  2. MVC中自带的异步((Ajax.BeginForm)无效

    1.确定unobtrusive-ajax已经引用,VS2012带,2013不带 2.注意jq和unobtrusive-ajax引用顺序问题,确保jq在前 3.注意JQ和unobtrusive-ajax ...

  3. python爬虫感想

    老师说,能用程序解决一个实际问题,说明已经会使用工具了.今天用python做了一个小爬虫,很幸运,成功了. 有几个难点:就是学会伪装,还有一个觉得打开的方式太多,有点糊涂,正则表达式也要加强了.

  4. CLI:使用Go开发命令行应用

      原文地址 CLI或者"command line interface"是用户在命令行下交互的程序.由于通过将程序编译到一个静态文件中来减少依赖,一次Go特别适合开发CLI程序.如 ...

  5. Java操作excel

    慕课网的好课程: http://www.imooc.com/learn/354

  6. Windows Phone 十六、HttpClient

    HttpClient 对象也可以实现网络请求 相对于 HttpWebRequest 对象来说,HttpClient 操作更简单,功能更强大 HttpClient 提供一系列比较简单的API来实现基本的 ...

  7. python执行线程方法

    转自: http://www.jb51.net/article/71908.htm 由于python线程没有提供abort方法,所以我们需要自己想办法解决此问题,面对这一问题,小编帮大家解决phtho ...

  8. 怎样给Myeclipse配置tomcat服务器

    http://jingyan.baidu.com/article/4853e1e53465271909f72690.html Meclipse是java Web企业级开发中最流行的工具,java we ...

  9. Prime Time使用

    PrimeTime一般用作sign off的timing check,也可用在DC之后的netlist的timing analysis 一般的使用流程: 1) Read design data,--- ...

  10. 查看Android应用的package name和activity name方面

    使用android自动化测试工具monkeyrunner启动应用时,需要填写被测程序的包名和启动的Activity,以下有两种查看应用包名package和入口activity名称的方法:方法一:使用a ...