微信小程序-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'
  }
})
相关推荐
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
云起SAAS3 小时前
ai周公解梦抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai周公解梦
從南走到北12 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
狂团商城小师妹19 小时前
智尚房产中介小程序
微信小程序·小程序
狂团商城小师妹1 天前
预约洗车小程序
微信小程序·小程序
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐1 天前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序