微信小程序-视图模板
定义模板
使用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传入的数据。
微信小程序-视图模板的更多相关文章
- 微信小程序开发--模板(template)使用,数据加载,点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序发送模板消息
微信小程序发送模板消息 标签(空格分隔): php 看小程序文档 [模板消息文档总览]:https://developers.weixin.qq.com/miniprogram/dev/framewo ...
- 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:
小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程序之模板消息推送
最近在用sanic框架写微信小程序,其中写了一个微信消息推送,还挺有意思的,写了个小demo 具体见官方文档:https://developers.weixin.qq.com/miniprogram/ ...
- 微信小程序 发送模板消息的功能实现
背景 - 小程序开发的过程中,绝大多数会满足微信支付 - 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯 - 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道 ...
- 如何在微信小程序的模板渲染中使用JS?
在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...
随机推荐
- (转载)(收藏)OceanBase深度解析
一.OceanBase不需要高可靠服务器和高端存储 OceanBase是关系型数据库,包含内核+OceanBase云平台(OCP).与传统关系型数据库相比,最大的不同点, 是OceanBase是分布式 ...
- MWeb 1.4 新功能介绍二:静态博客功能增强
MWeb 比较有特色的是一键生成静态博客功能,然后从 MWeb 最开始规划要做静态博客生成功能时,我就希望 MWeb 的静态博客生成功能在易用的同时,还要有很强大的扩展性. 比如说能自己增加网站公告, ...
- [原创]java WEB学习笔记107:Spring学习---AOP切面的优先级,重用切点表达式
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- 开通博客的第一天上传我的C#基础笔记,个人觉得很好用。
1.索引器 string arrStr = "sddfdfgfh"; 索引器的目的就是为了方便而已,可以在该类型的对象后面直接写[]访问该对象里面的成员 Console.Wr ...
- 网络适配器输入的IP地址 已经分配给另一个适配器
解决步骤:1.开始-运行-cmd2. set devmgr_show_nonpresent_devices=123.set devmgr_show_nonpresent_devices=14.star ...
- WBS功能分解
WBS功能分解表格如下: 功能 子功能 二级子功能 预计花费时间 (小时) 实际花费时间(小时) 地图显示跑道 制作地图 获得开发权限key 1 2 将sdk导入程序 0.5 1 调试程序 1 2 ...
- Qt之QStringList讲解
QStringList类提供了一个字符串列表 从QString继承而来,它提供快速索引为基础的接入以及快速插入和清除. 成员函数用于操作这个字符串列表如: append(),insert(),repl ...
- VS2015 VisualStudio Emulator for Android 模拟器目录
C:\Users\wangbin5542\AppData\Local\Microsoft\VisualStudioEmulator\Android\Containers\Local\Devices 目 ...
- linux shell脚本使用结构化命令(2)
一.for命令 二.while命令 三.until命令 1.for命令基本格式 for var in list do commands done oracle@suse:~/testshell> ...
- XML Schema choice 元素
XSD : <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:sch="http://w ...