微信小程序开发（三）小程序开发框架之WXML

• WXML(WeiXin Markup Language)

  1. 介绍：WXML是框架设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构

  2.语法：由开始标签和结束标签包裹我们的内容构成，熟悉前端开发的小伙伴肯定明白，WXML就相当于是HTML文件了
  注：WXML的标签一定是闭合的，并且大小写敏感
  <标签名 属性名='属性名1' 属性名='属性名1' ...> ...
  如下就是一段WXML代码和展示效果：
  

  wxml.png

3.WXML特性
(1) 数据绑定
在WXML里通过数据绑定来实现页面数据的动态更新，如气象、股市等页面。WXML中的数据都来自js文件中Page的data对象，数据绑定我们使用Mustache的方法，也就是变量名加{{}}的语法把变量包起来。注意所有的组件和属性都要是小写

//index.wxml

  {{message}}

//index.js
Page({
  data:{
    message:"hello world"  
  }
})

数据绑定还可以进行一些运算符绑定，如下：标签里的hidden属性来确定view里面的内容是否显示，我们可以吧data里的flag这个boolean值设置个hidden来动态进行内容的显示隐藏

//index.wxml

  text

//index.js
Page({
  data:{
    flag:false
  }
})

小程序的标签组件共有6中共同属性

wxml标签组件属性.png

(2) 列表渲染
在一些网购网站上某个品牌的所有商品要展示出来，当数量比较少的时候我们可以在wxml里一行一行的写，但是当商品数量比较多且不固定时就需要用到小程序的列表渲染的功能。如下：我们在js中定义一个items数组，通过wxml文件里的一个标签中的wx:for属性来绑定items，其中的index变量指的是当前元素在我们的数组里对应的下标，item变量指的是数组中的当前元素。可以通过wx:for-item来指定我们想要的一个变量名，wx:key属性代表了列表中项目的唯一标识符。
注意：标签不是一个组件，只是包装元素，我们在页面渲染的时候可以看到这个标签不会被渲染出来。

//index.wxml

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

//index.js
Page({
  data:{
    items:[
      {name:"商品1"},
      {name:"商品2"},
      {name:"商品3"},
      {name:"商品4"},
    ]
  }
})

(3) 条件渲染
当我们需要在不同的条件下展示不同的内容时就需要用到条件渲染，一般我们通过wx:if wx:elif wx:else这个属性来控制条件渲染。

//index.wxml
今天的晚餐

  米饭


  粥


  面条

//index.js
Page({
  data:{
    //Math.random()是生成一个0-1的浮点随机数  Math.floor()是对浮点数进行处理，返回一个下取整的整数
    //生成一个1-3的随机整数
    condition : Math.floor(Math.random()*3 + 1)
  }
})

(4) 模板引用
小程序支持在模板中定义自己的代码片段，然后在不同的地方调用或引入。在wxml里我们定义一个tempItem的模板，在