小程序基础13:模板

1.模板

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

定义模板

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

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

时间: 2024-08-09 02:19:14

小程序基础13:模板的相关文章

.NET教程:微信小程序基础入门

.NET教程:微信小程序基础入门 准备 Demo 项目地址 (https://github.com/zce/weapp-demo) Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 (https://github.com/zce/

大牛带您微信小程序基础

前言什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画图"小程序等,小程序不同于APP一点的是,小程序成本低,前期宣传,可以靠扫描二维码,分享群,朋友圈等,来提高微信小程序的使用.无需安装即可下载的特点,也深受广大群众的喜欢.介绍小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务.小程序就是那

小程序基础

一.准备 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 小程序的 AppID 相当于小程序平台的一个身份证. 开发工具的使用 界面:模拟器(iphone6标准).编辑器.调试器: 编译:普通编译.添加编译模式(调试某个页面). 详情(选择开发版本.是否验证合法域名) 二.代码构成 最简单的小程序 ├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │

微信小程序基础入门

准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 安装开发环境 下载地址 Windows 64位 Windows 32位 macOS 安

微信小程序基础语法总结

本文介绍微信小程序语法 配置文件 app.json的配置(全局) { // 用来配置页面的路径 "pages":[ "pages/index/index", // 首页 "pages/Test/Test" // 跳转的页面 ], "window":{ "enablePullDownRefresh": true, // 是否支持下拉刷新 "backgroundTextStyle":&quo

关于小程序基础库

基础库 基础库与客户端之间的关系 小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微信客户端. 关于基础库的兼容方法,可以查看「兼容处理」章节. 基础库更新时机 为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带 上一个稳定版 的基础库发布的. 在新版本客户端发布后,再通过后台灰度新版本基础库,灰度时长一般为 12 小时,在灰度结束后,用户设备上才会有新版本的基础库. 官方API地址 : linkhttps://dev

小程序基础介绍

1.app.json 小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部 tab 等 @1.pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.必填 @2.window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等. @3.tabBar底部tab栏表现 object @4.networkTimeout 网络超时时间 object @5.debug 是否开启debug boolean @6.funct

小程序基础知识梳理

微信开发者工具中新建项目 教程:https://blog.csdn.net/michael_ouyang/article/details/54923784 C:\Users\Administrator\WeChatProjects\miniprogram-1  1.将test 页面加入 app.json 打开全局文件 app.json,在文件里面添加 "pages/test/test"(加入一条 test 页面所在的目录 ) 2.全局对象获取 在app.js页面中有一个globalDa

小程序基础02:小程序的全局配置

1.配置 我们使用app.json文件来对来微信小程序进行全局配置. 作用:他决定了页面文件的路径,窗口表现,设置网络超时时间,设置多tab等 每一个小程序页面也可以使用 .json 文件来对本页面的窗口进行配置.页面的配置比app.json配置简单得多,只是设置app.json中的window配置项的内容.页面中的配置会覆盖app.json的window中相等的配置项 实例    //pages: String Array 设置页面路径 "pages":[ "pages/i