模板语法

Last updated: ... / Reads: 31 Edit

微信小程序的模板语法是一套简单的语法规则，它允许开发者在WXML（WeiXin Markup Language，微信标记语言）文件中声明式地描述页面结构。以下是微信小程序模板语法的主要特点：

  1. 数据绑定：

    • 单向数据绑定：使用双大括号 {{}} 将变量绑定到视图上，当数据发生变化时，视图会自动更新。 
      <view>{{ message }}</view>
    • 动态属性绑定：可以绑定到元素的属性上，如class、style等。 
      <view class="item-{{index}}">{{ item.text }}</view>

  2. 列表渲染：

    • 使用 wx:for 属性在模板中渲染一个数组。 
      <view wx:for="{{array}}" wx:for-item="item" wx:key="*this">
  {{item}}
</view>
    • wx:for-item 可以指定数组元素的别名，默认为 item。
    • wx:key 用于提高列表渲染性能，指定列表中项目的唯一标识符。

  3. 条件渲染：

    • 使用 wx:if、wx:elif 和 wx:else 控制条件渲染。 
      <view wx:if="{{condition}}">True</view>
<view wx:elif="{{condition2}}">Else if</view>
<view wx:else>False</view>

  4. 模板引用：

    • 可以定义模板，并在不同的地方引用，以复用代码。 
      <!-- 定义模板 -->
<template name="temp">
  <view>{{text}}</view>
</template>

<!-- 使用模板 -->
<template is="temp" data="{{text: 'Hello World'}}"></template>

  5. 事件处理：

    • 绑定事件到元素上，如点击、长按、输入等。 
      <button bindtap="handleTap">Click me</button>

  6. 引用：

    • 使用 import 和 include 引入外部WXML文件，import 用于引入模板，include 用于包含页面内容。

  7. 双向数据绑定（仅限于表单组件）：

    • 使用 model:value 和 bindinput 实现类似Vue的v-model效果。 
      <input model:value="{{inputValue}}" bindinput="inputChange"/>

这些模板语法特性大大简化了视图层的开发，使得开发者可以更加高效地构建小程序的用户界面。

Comments

Make a comment

  • Index