微信小程序-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'
  }
})
相关推荐
Emma歌小白9 小时前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子9 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
毕设源码-钟学长1 天前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
nodcloud2 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
项目題供诗3 天前
微信小程序开发教程(八)
微信小程序·小程序
拼图2093 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082853 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
海绵宝宝不喜欢侬3 天前
uniapp微信小程序保存海报到手机相册canvas
智能手机·微信小程序·uni-app·canva可画