四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出页面结构。
概念
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合组件、WXS和时间系统,可以构建出页面的结构。
语法
<标签名 属性名=“属性名1” 属性名=“属性名2”...>
...
</标签名>
简单例子
<view>
Hello World!
<view>
hello china!
</view>
</view>
WXML四个特性
简单实例
第一种 index.wxml
<view>
<text>{{message}}</text>
</view>
index.js
Page({
data:{
message:"Hello World"
}
})
第二种 index.wxml
<view hidden='{{flag ? true : false}}'>
Hidden
</view>
Page({
data:{
flag: false
}
})
WXML属性
实例:
index.wxml
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>
index.js
Page({
data:{
items: [
{name:"商品A"},
{ name: "商品B" },
{ name: "商品C" },
{ name: "商品D" },
{ name: "商品E" }
]
}
})
显示结果
说明
实例
index.wxml
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">饺子</view>
<view wx:if="{{condition === 2}}">馒头</view>
<view wx:else>米饭</view>
index.js
Page({
data:{
condition:Math.floor(Math.random()*3+1)
}
})
随机结果: