微信小程序开发（五）wxml基本语法

本篇文章，带大家来了解一下，wxml基本语法，与html相同的部分就不说了，默认你已掌握了，如果没有掌握，那就先去学学，或者留言，我给你点资料。

wxml语法帮助文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

1.数据绑定

WXML 中的动态数据来自对应 Page 的 data设置，使用 Mustache 语法，即双大括号模式

{{变量名}}

来个示例：在index.wxml键入如下代码：

<view>{{test}}</view>

在index.js中键入如下代码：

Page({
    data: {
        test: '老杨学堂'
    }
})

保存，即可在模拟器中看到显示老杨学堂这几个字，如图示：

太简单了是吧，只要格式写对，括号没有问题，那就没有问题。

但这有何意义？在wxml页面直接写 “老杨学堂”几个字不香吗？为什么还要费用做数据绑定。这是因为，数据绑定技术，将js业务逻辑数据通过数据绑定显示到wxml页面，实现了动态数据，将来我们无论是网络获取的数据还是用户输入的数据，都将通过这种方式进行数据传递，实现动态交互。

数据绑定也可以是表达式

在index.wxml文件中键入

<view>{{age+10<30?'成家立业':'自由活动'}}</view>

在index.js文件中键入：

Page({
    data: {
        test: '老杨学堂',
        age:22
    }
})

在页面显示什么，自由活动。

其他的各位可以参考文档自由测试一下。

补充一下，数据绑定可能会出现在标签的多个位置，包括属性值，样式值等，为标签的显示渲染提供了多种可能性，为wxml页面灵活控制提供了有力支持。

2.wx:if条件渲染

在wxml页面用到条件语句来控制组件显示时，需要用到wx:if语句，

格式是：

wx:if="{{逻辑语句}}"

示例：

<view wx:if="{{age>18}}">
    成人
</view>
<view wx:elif="{{age<12}}">
    儿童
</view>
<view wx:else>
    青少年
</view>

还可以做另外一种写法，需要用到< block>标签，block标签本身并无实际意义，最终不会在页面留下任何东西，只是为了包装控制语句

<block wx:if="{{age>18}}">
    <view>
        成人
    </view>
</block>
<block wx:elif="{{age<12}}">
    <view>
        儿童
    </view>
    </block>
<block wx:else>
    <view>
        青少年
    </view>
</block>

以上种写法完全一样，你喜欢哪种写法呢？

3.wx:for列表渲染

列表展示是目前各种移动应用必备布局，需要熟练掌握应用

首先准备一下列表数据，即数组数据，在index.js页面，data节内进行如下配置

Page({
    data: {
        test: '老杨学堂',
        age: 1,
        items: [{ text: 'red', color: '#f00' },
            { text: 'green', color: '#0f0' },
            { text: 'blue', color: '#00f' }
        ]
    }
})

在index.wxml页面进行展示，代码如下：

<block wx:for="{{items}}" wx:key="*this">
    <view style="color:{{item.color}}">
        {{item.text}}
    </view>
</block>

展示效果如图：

简单解释一下：

wxml页面中的wx:for="{{items}}"，items要与page中的items键对应，当然，你也可以用别的名字

item 代表是for循环中的每一项，这个不能换，如果要换成别的名字，必须显示指定。

wx:key是指定列表中项目的唯一的标识符，通常用*this表示，代表当前循环对象。

我们再来看，指定循环对象的名字和索引怎么做

在index.wxml页面代码如下：

<block wx:for="{{items}}" wx:key="*this" wx:for-item="style" wx:for-index="myIndex">
    <view style="color:{{style.color}}">
        {{myIndex+","+style.text}}
    </view>
</block>

展示效果如图：

OK，这篇文章就到这了，有问题，请留言！

关注我，你会获得更好的学习体验！

原文地址：https://www.cnblogs.com/lyxt/p/12560052.html