微信小程序-wxml语法

卡卡舅舅2024-03-13 16:58

介绍

WXML（WeiXin Markup Language）是框架设计的一套标签语言，可以进行页面布局，声明事件，数据绑定，条件判断。

语法

数据绑定

html 复制代码

<view> {{message}} </view>

javascript 复制代码

// page.js
Page({
  data: { // 状态
    message: 'Hello MINA!' 
  }
})

列表渲染

javascript 复制代码

<!-- 在wxml文件中 -->
<view wx:for="{{array}}" wx:key="index">
  <view>{{item}}</view>
</view>

javascript 复制代码

// page.js
Page({
  data: { // 状态
    array: ['cat','dog']
  }
})

条件渲染

html 复制代码

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

javascript 复制代码

// page.js
Page({
  data: {
    view: 'MINA'
  }
})