微信小程序-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'
  }
})
相关推荐
阿隆_趣编程3 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
黑马源码库miui5208621 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue2 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北2 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
猫七先生2 天前
微信小程序一键登录可行性方案
前端·微信小程序
canglingyue2 天前
微信小程序截屏与录屏功能详解
微信小程序·小程序