定义模板

使用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. 如何使用Profiler跟踪阻塞信息

    Blocked Process ReportProfiler提供一个被阻塞进程报告的事件Errors and Warnings->Blocked Process Report 指示某个任务已被阻 ...

  2. 安装ionic出现node-sass无法下载的解决方法

    解决方法: 修改C:\users\[用户名]下的.npmrc文件: registry=https://registry.npm.taobao.org sass-binary-site=https:// ...

  3. webapi post 请求多个参数

    Some programmers are tring to get or post multiple parameters on a WebApi controller, then they will ...

  4. 教你分分钟学会用python爬虫框架Scrapy爬取心目中的女神

    本博文将带领你从入门到精通爬虫框架Scrapy,最终具备爬取任何网页的数据的能力.本文以校花网为例进行爬取,校花网:http://www.xiaohuar.com/,让你体验爬取校花的成就感. Scr ...

  5. postgresql修炼之道学习笔记(1)

    好好学习吧. 本笔记 仅作为摘要记录 前两章,主要是数据库对比和安装等. 对比,就比多说了,总是和别人比较,会显得自己身价低,呵呵. 安装也有很多文章,不多说. 第二章提到了一些简单的配置, 其在 d ...

  6. web前端基础知识 jQuery

    通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...

  7. Model Validation in ASP.NET Web API By Mike Wasson|July 20, 2012 268 of 294 people found this helpful

    using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using ...

  8. Android 多媒体视频播放一( 多媒体理解与经验分享)

    前言 说到android的多媒体,一把辛酸一把泪,当初听说会多媒体的比较牛掰,公司也有需求,于是乎我也积极的加入研究android多媒体的行列,记得以前刚接触的时候,最开始还是比较头大的,主要是但是很 ...

  9. 戴尔3542安装ubuntu时出现:failed to lead ldlinux.c32

    解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...

  10. JSSDK用法//////////////////zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

    参照微信官方文档,调试成功之后总结如下: 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 步骤二: ...