微信小程序开发（三）小程序开发框架之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
<view>
  <text>{{message}}</text>
</view>
//index.js
Page({
  data:{
    message:"hello world"  
  }
})

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

//index.wxml
<view hideen="{{flag ? true : false}}">
  text
</view>
//index.js
Page({
  data:{
    flag:false
  }
})

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

wxml标签组件属性.png

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

//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:"商品1"},
      {name:"商品2"},
      {name:"商品3"},
      {name:"商品4"},
    ]
  }
})

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

//index.wxml
<view>今天的晚餐</view>
<view wx:if="{{condition === 1}}" >
  米饭
</view>
<view wx:elif="{{condition === 2}}" >
  粥
</view>
<view wx:else="{{condition === 3}}" >
  面条
</view>
//index.js
Page({
  data:{
    //Math.random()是生成一个0-1的浮点随机数  Math.floor()是对浮点数进行处理，返回一个下取整的整数
    //生成一个1-3的随机整数
    condition : Math.floor(Math.random()*3 + 1)
  }
})

(4) 模板引用
小程序支持在模板中定义自己的代码片段，然后在不同的地方调用或引入。在wxml里我们定义一个tempItem的模板，在<template>标签里定义，name属性是模板名称。使用的时候通过is属性来声明我们使用的是哪个模板，data属性来传入我们想要的数据。模板有自己的作用域，我们只能通过data属性来传入。

//index.wxml
<template name="tempItem">
  <view>
    <view>收件人：{{name}}</view>
    <view>电话：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>

<template is="tempItem" data="{{...item}}"></template>
//index.js
Page({
  data:{
    item:{}
      name:"zhangsan"},
      phone:"123456"},
      address:"china"}
    }
  }
})

wxml模板.png

除了模板，wxml还提供了两种文件引入的方式：import和include。
import只能引用我们定义的模板文件里的模板内容。如下，在index.wxml里通过import的src属性引入模板文件的路径a.wxml，通过声明template的is属性来声明使用的是哪个模板。在外部模板文件a.wxml里定义了view和template两个标签，结果渲染出来的只有a.wxml文件里template中的内容。所以说import引入的模板文件它的模板只能渲染它对应的模板内容。

<!--index.wxml-->
<import src="a.wxml"></import>
<template is = "a"></template>

<!--a.wxml-->
<view>hello world</view>
<template name = "a">
  Hello World
</template>

import引用.png

注意import的作用域，如果import的目标文件嵌套了其他文件的template模板,则嵌套的不会被应用。如index.wxml引入了a.wxml目标文件，而a.wxml文件中又引入了b.wxml文件内的模板。最终显示的只有a.wxml文件里的模板内容，而不会显示b.wxml的模板内容。这样可以避免引用模板死循环的问题，如果在a.wxml中引用b.wxml，在b.xwml中引用a.wxml文件，就会造成死循环。

<!--index.wxml-->
<import src="a.wxml"></import>
<template is = "a"></template>

<!--a.wxml-->
<import src="b.wxml"></import>
<template name = "a">
  This is a.wxml
</template>
<template is = "b"></template>

<!--b.wxml-->
<template name = "b">
  This is b.wxml
</template>

import作用域.png

include则是把目标文件内除了模板代码块之外的所有内容都引入进来。如下：在index.wxml文件里我们引入了a.wxml目标文件，a.wxml文件包含了一个name属性是a的template模板以及一个内容时hello world的view标签。最后经过include引入渲染的只有hello world，并没有显示template模板内容

<!--index.wxml-->
<include src="a.wxml"></import>
<template is = "a"></template>

<!--a.wxml-->
<template name = "a">
  <view>this is a.wxml</view>
</template>
<view>Hello,world</view>

include引入.png