微信小程序视图层WXML_模板

微信小程序视图层WXML_小程序模板



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

定义微信小程序的模板



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

原文地址:https://www.cnblogs.com/lanshu/p/9269831.html

时间: 2024-08-18 16:03:27

微信小程序视图层WXML_模板的相关文章

微信小程序视图层WXML_小程序条件渲染

微信小程序视图层WXML_小程序条件渲染 wx:if 在微信小程序的框架中,我们用wx:if="{{condition}}"来判断微信小程序页面是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用wx:elif和wx:else来添加一个else块: <view wx:if="{{length > 5}}"> 1 </view> &

微信小程序视图层WXML_引用

微信小程序视图层WXML_小程序引用 微信小程序WXML提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在微信小程序的item.wxml中定义了一个叫item的template: <!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> 在小程序的i

微信小程序视图层WXML_事件

微信小程序视图层WXML_小程序事件 什么是微信小程序事件 小程序事件是视图层到逻辑层的通讯方式. 小程序事件可以将用户的行为反馈到逻辑层进行处理. 小程序事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 小程序事件对象可以携带额外信息,如id, dataset, touches. 微信小程序事件的使用方式 在小程序组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该微信小程序页面对应的Page中找到相应的事件处理函数. <view id="

微信小程序视图层WXML_小程序事件

微信小程序视图层WXML_小程序事件 什么是微信小程序事件 小程序事件是视图层到逻辑层的通讯方式. 小程序事件可以将用户的行为反馈到逻辑层进行处理. 小程序事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 小程序事件对象可以携带额外信息,如id, dataset, touches. 微信小程序事件的使用方式 在小程序组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该微信小程序页面对应的Page中找到相应的事件处理函数. <view id="

微信小程序视图层WXS_变量

微信小程序视图层WXS_小程序变量 微信小程序变量的概念 WXS 中的变量均为值的引用. 没有声明的变量直接赋值使用,会被定义为全局变量. 如果只声明变量而不赋值,则默认值为 undefined. var表现与javascript一致,会有变量提升. var foo = 1; var bar = "hello world"; var i; // i === undefined 上面代码,分别声明了 foo. bar. i 三个变量.然后,foo 赋值为数值 1 ,bar 赋值为字符串 

微信小程序视图层WXS_注释

微信小程序视图层WXS_小程序注释 微信小程序在WXS 主要有 3 种注释的方法. 示例代码: <!-- wxml --> <wxs module="sample"> // 方法一:单行注释 /* 方法二:多行注释 */ /* 方法三:结尾注释.即从 /* 开始往后的所有 WXS 代码均被注释 var a = 1; var b = 2; var c = "fake"; </wxs> 上述例子中,所有 微信小程序 的 WXS 代码均

微信小程序视图层WXS_条件语句

微信小程序视图层WXS_条件语句 if 语句 在 WXS 中,可以使用以下格式的 if 语句 : if (expression) statement : 当 expression 为 truthy 时,执行 statement. if (expression) statement1 else statement2 : 当 expression 为 truthy 时,执行 statement1. 否则,执行 statement2 if ... else if ... else statementN

微信小程序视图层WXS_数据类型

微信小程序视图层WXS_数据类型 数据类型 WXS 语言目前共有以下几种数据类型: number : 数值 string :字符串 boolean:布尔值 object:对象 function:函数 array : 数组 date:日期 regexp:正则 number 语法 number 包括两种数值:整数,小数. var a = 10; var PI = 3.141592653589793; 属性 constructor:返回字符串 "Number". 方法 toString to

微信小程序视图层WXS_小程序WXS模块

微信小程序视图层WXS_小程序WXS模块 微信小程序的WXS 代码可以编写在 小程序wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内. 模块 每一个微信小程序的 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现. .wxs 文件 在微信开发者工具里面,右键可以直接创建