微信小程序-wxml语法

介绍

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'
  }
})
相关推荐
丁总学Java4 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
mosen8685 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165026 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
小飞哥liac15 小时前
微信小程序的组件
微信小程序
stormjun17 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie23419 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong19 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
1 天前
微信小程序运营日记(第四天)
微信小程序·小程序
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
一只不会编程的猫2 天前
微信小程序配置
微信小程序·小程序