11.开发框架基本介绍

四个组成部分，其它三个前面介绍过了，主要WXS：

WXS:对wxml增强的一种脚本语言，可以对请求的数据进行filter或者做计算处理，帮助wxml快速构建出页面结构。

12.WXML之语法

概念

WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合组件、WXS和时间系统，可以构建出页面的结构。

语法

    <标签名 属性名="“属性名2”...">
         ...
    

简单例子

    
       Hello World!  
     
            hello china!  
     
    

13.WXML特性之数据绑定

WXML四个特性

• 数据绑定
• 列表渲染
• 条件渲染
• 模板引用

简单实例

第一种

index.wxml

      
     
      {
    {message}}
     
    

index.js

Page({  data:{    message:"Hello World"  }})

第二种

index.wxml

Page({  data:{    flag: false  }})

WXML属性

14.WXML特性之列表渲染

实例：

index.wxml

      
         
      
       {
    {index}}:{
    {item.name}}
        
     
    

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

    
     今天吃什么？
    
    
     饺子
    
    
     馒头
    
    
     米饭
    

index.js

Page({  data:{    condition:Math.floor(Math.random()*3+1)  }})

随机结果：

---