🎥 作者简介： 阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容

🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

WXML 模板语法

数据绑定

数据绑定的基本原则

在小程序开发中，WXML模板语法用于描述页面的结构。为了将数据动态地展示在页面上，就需要使用数据绑定。数据绑定的基本原则是“在data中定义数据，在WXML中使用数据”。

  1. 在data中定义数据：
  • 在小程序的Page页面的JS文件中，我们需要定义页面的初始数据。这些数据会被存储在一个名为data的对象中。
  • 例如，如果我们想要在页面上显示一个用户的名字，我们就可以在data对象中定义一个名为userName的属性，并给它赋予一个初始值。
  1. 在WXML中使用数据：
  • 在WXML模板中，我们可以使用双大括号{{}}来将数据绑定到页面上。这些双大括号被称为插值表达式。
  • 例如，如果我们想要在文本节点中显示用户的名字，我们就可以在文本节点内部使用插值表达式{{userName}}。当页面加载时，WXML模板引擎会自动将data对象中userName属性的值插入到这个文本节点中。

这样，通过数据绑定，我们就可以实现数据在Page页面的JS文件和WXML模板之间的动态传递和展示。每当data对象中的数据发生变化时，WXML模板会自动更新页面上展示的数据，从而实现页面的动态效果。

在 data 中定义页面的数据

在小程序开发中，页面的数据通常是在页面的.js文件中定义的。这些数据被组织在一个名为data的对象中，该对象可以包含各种类型的数据，如字符串、数字、数组、对象等。在WXML模板中，我们可以使用这些数据来动态地渲染页面的内容。

以下是一个简单的例子，展示了如何在data中定义页面的数据：

index.js文件

Page({
    data: {
      // 字符串类型的数据
      user_name: '张三', 
      // 数组类型的数据
      city_name: [
        {city: '北京'},
        {city: '上海'}
      ]
    }
    // ... 其他的方法和属性
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

在这个例子中，Page对象有一个data属性，它是一个对象，包含了两个属性：user_name和city_name。

  • user_name是一个字符串类型的数据，用于存储一些简单的文本信息。
  • city_name是一个数组类型的数据，它包含两个元素，每个元素都是一个对象，这些对象有一个city属性，用于存储消息文本。
Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法(双大括号)将变量包起来即可。

上面定义了数据之后，我们就可以在WXML模板中使用这些数据了。使用的方法是使用双大括号{{}}将数据包裹起来，这样WXML模板引擎就会在渲染页面时将双大括号内的数据替换为实际的值。

例如，如果我们想要在页面上显示info和msglist数组中的消息，我们可以这样写WXML：

index.wxml文件

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view>
  <!-- 显示user_name属性的值 -->
  <text>{{user_name}}</text>
  
  <!-- 显示city_name数组中的消息 -->
  <block wx:for="{{city_name}}" wx:key="index">
    <text>{{item.city}}</text>
  </block>
</view>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

在这个WXML模板中，{{user_name}}会被替换为data对象中user_name属性的值，而wx:for="{{city_name}}"则是一个循环指令，用于遍历city_name数组，并为数组中的每个元素创建一个文本节点，显示其city_name属性的值。

零基础微信小程序开发——WXML 模板语法之数据绑定(保姆级教程+超详细)_css

Mustache 语法的应用场景

Mustache语法在小程序开发中扮演着重要的角色，它主要用于数据的绑定和运算。在小程序的WXML模板中，Mustache语法通过双大括号{{}}来包裹变量或表达式，从而实现数据的动态展示和运算。

  1. 绑定内容
    Mustache语法最常见的应用场景就是绑定数据到模板的内容中。例如，你可以将页面数据中的某个字段通过Mustache语法绑定到文本、图片或其他组件的显示内容中。这样，当数据发生变化时，页面上的显示内容也会相应地更新。
  2. 绑定属性
    除了绑定内容外，Mustache语法还可以用于绑定组件的属性。例如，你可以将数据的某个值绑定到按钮的disabled属性上，从而控制按钮的禁用状态。这样，当数据值发生变化时，按钮的禁用状态也会相应地更新。
  3. 运算
    Mustache语法还支持进行基本的数学运算和三元运算等。通过运算，你可以对页面数据进行处理后再展示到页面上。例如，你可以使用算术运算来计算两个数字的和或差，并使用Mustache语法将结果展示在页面上。此外，你还可以使用三元运算来根据条件选择性地展示某个值或执行某个操作。

Mustache 语法案例

动态绑定文本和超链接

WXML文件(index.wxml)

<navigation-bar title="公zong号：小白的大数据之旅" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="container">
  <!-- 动态绑定文本 -->
  <text>当前用户名：{{userName}}</text>
  
  <!-- 动态绑定超链接 -->
  <navigator url="{{ userProfileUrl }}" hover-class="none">
    <text>访问用户主页</text>
  </navigator>
</view>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • {{userName}} 用于动态绑定用户名，当 data 中的 userName 值改变时，页面上显示的用户名也会相应更新。
  • {{userProfileUrl}} 用于动态绑定超链接地址，当用户点击“访问用户主页”时，会跳转到指定的用户主页页面。

JS文件(index.js)

Page({
    data: {
      userName: '长风清留扬', // 动态绑定的用户名
      userProfileUrl: '' // 动态绑定的用户主页链接
    }
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

结果：

零基础微信小程序开发——WXML 模板语法之数据绑定(保姆级教程+超详细)_css_02

算术运算

WXML文件(index.wxml)

<view class="container">
  <!-- 算术运算：计算两个数的和 -->
  <text>两个数的和：{{num1 + num2}}</text>
</view>
  • 1.
  • 2.
  • 3.
  • 4.

JS文件(index.js)

Page({
  data: {
    num1: 5,
    num2: 10
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

零基础微信小程序开发——WXML 模板语法之数据绑定(保姆级教程+超详细)_css_03

三元运算

WXML文件(condition.wxml)

<view class="container">
  <!-- 三元运算：根据条件显示不同的文本 -->
  <text>{{score >= 60 ? '及格' : '不及格'}}</text>
</view>
  • 1.
  • 2.
  • 3.
  • 4.

{{score >= 60 ? ‘及格’ : ‘不及格’}} 是一个三元运算表达式，用于根据 score 的值显示“及格”或“不及格”。

JS文件(condition.js)

Page({
  data: {
    score: 75 // 可以修改这个值来测试不同的结果
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

零基础微信小程序开发——WXML 模板语法之数据绑定(保姆级教程+超详细)_小程序_04