11.开发框架基本介绍
四个组成部分，其它三个前面介绍过了，主要WXS：
WXS:对wxml增强的一种脚本语言，可以对请求的数据进行filter或者做计算处理，帮助wxml快速构建出页面结构。
12.WXML之语法
概念
WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合组件、WXS和时间系统，可以构建出页面的结构。
语法
<标签名 属性名=“属性名1” 属性名=“属性名2”...> ...</标签名>简单例子
<view> Hello World! <view> hello china! </view></view>
13.WXML特性之数据绑定
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属性
14.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" } ] }})显示结果
说明
- 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
- 使用 wx:for-item 可以指定数组当前元素的变量名，
- 使用 wx:for-index 可以指定数组当前下标的变量名：
- wx:key 来指定列表中项目的唯一的标识符。
15.WXML特性之条件渲染
实例
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) }})随机结果：
11.开发框架基本介绍
四个组成部分，其它三个前面介绍过了，主要WXS：
WXS:对wxml增强的一种脚本语言，可以对请求的数据进行filter或者做计算处理，帮助wxml快速构建出页面结构。
12.WXML之语法
概念
WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合组件、WXS和时间系统，可以构建出页面的结构。
语法
<标签名 属性名=“属性名1” 属性名=“属性名2”...> ...</标签名>简单例子
<view> Hello World! <view> hello china! </view></view>
13.WXML特性之数据绑定
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属性
14.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" } ] }})显示结果
说明
- 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
- 使用 wx:for-item 可以指定数组当前元素的变量名，
- 使用 wx:for-index 可以指定数组当前下标的变量名：
- wx:key 来指定列表中项目的唯一的标识符。
15.WXML特性之条件渲染
实例
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) }})随机结果：