微信小程序开发框架组成——简明教程（五）

一、开发框架基本构成

如图，微信小程序的开发框架基本是由下面的四个部分构成。于小程序代码结构——简明教程（二）我们已经知道除了WXS的其他三个的功能和作用。WXML其实就是描述页面的内容；WXSS就是描述一个页面的样式；JavaScript是处理页面的交互逻辑以及数据的通讯。

那么WXS是做什么的呢？WXS其实是对WXML能力增强的脚本语言，可以把我们请求到的数据进行计算出来，帮助WXML快速构建内容结构。

二、WXML

1、WXML之语法

WXML是WeiXin Markip Language的缩写，是款家设计的一套标签语言，结合组件，WXS和事件系统，可以构建出页面的结构。

和我们的html一样，也是有属性的。

这里我们要注意的是，WXML中的标签是一定要闭合的；属性是大小写敏感的。

例如:

<view class="className" data-name="A">
hello world
  <view>
    hello me!
  </view>

</view>

2、WXML语言特性

WXML语言有4个语言特性，通过这4个语言也行，我们可以方便构建一些复杂页面的内容。

1）、WXML特性之数据绑定

例如我们的vue框架就是典型的动态更新页面数据的框架，我们的小程序也需要有动态更新页面数据的能力。

文本绑定 在小程序里面我们通过WXML语言的数据绑定功能来实现数据的更新。和我们的vue框架一样，WXML动态更新的数据都来自JavaScript中。小程序数据的绑定使用Mustache语法，就是的语法。

例如：

// wxml部分
<view>
  <text></text>
</view>

// js 部分
Page({
  data: {
    message: "hello me!!",
  }
})

属性绑定

既然可以绑定文本，当然也是可以绑定属性的。需要注意的是，绑定的属性和组价都是需要小写的。

例如：

// wxml部分
<view>
  <text data-name=""></text>
</view>

// js 部分
Page({
  data: {
    name: "Lily",
  }
})

运算符绑定

另外我们还可以惊醒运算符的绑定。

例如：

<view>
  <text hidden="">show</text>
</view>


// js 部分
Page({
  data: {
    show: true,
  }
})

属性

具体的属性，可以通过下图更加直观的了解：

2）、WXML特性之列表渲染

说到列表渲染我们想到的是v-for，不过在小程序中使用的是wx:for，wx:for-item和wx:key。

index变量指的是当前元素的下标，item变量指的是当前元素。wx:key是唯一表示符，如果页面是静态的列表，或者不必维护列表的状态，就可以忽略这个属性的设置，但是，如果我们想列表数据发生改变重新触发页面渲染，列表中的项能保持自身的状态，在页面重新渲染的时候，确保带有wx:key的项重新排序，而不是重新渲染，从而提高页面渲染性能的效率。

例如：

<view>
  <view wx:for="" wx:for-item="item" wx:key="index">
    <view>:</view>
  </view>
</view>

// js 部分

Page({
  data: {
    student:[
      {name:"小红"},
      { name: "小米" },
      { name: "小明" },
      { name: "小马" },
    ]
  }
})

3）、WXML特性值条件渲染

WXML条件渲染用的是wx:if，wx:elif又或者是wx:else。

这里和我们的vue框架的v-if是一样的，那vue中有v-show，小程序中是用hidden属性来控制元素的显示和影藏，wx:if是局部渲染，而hidden属性是不用渲染的。

例如：

<view>今天吃什么？？</view>
<view wx:if="">吃饭吧</view>
<view wx:elif="">吃面吧</view>
<view wx:else>吃米共吧</view>

// js 部分
Page({
  data: {
    condition:Math.floor(Math.random()*3+1),
  }
})

// 结果
今天吃什么？？
吃米共吧

4）、WXML特性之模板及引用

小程序也是可以自定义模板的，使用<template>标签来定义模板，定义模板的时候带一个name属性，使用模板的时候直接用is属性来指定使用的是哪个模板，这里也可以进行动态绑定，data属性是像模板传入数据。这里要注意的是，因为template模板有自己的作用域，所以这里只能使用data属性来传值。

例如：

<template name="template1">
  <view>
    <view>收件人：</view>
    <view>电话：</view>
    <view>地址：</view>
  </view>
</template>

<template is="template1" data=""></template>


// js 部分
Page({
  data: {
     people:{
      name:"阿明",
      phone:"123456",
      address:"花都"
    }
  }
})

上面的是wxml内部引用，如果想外部引用，是有两种方式的，分别是import和include。

import

import引用模板是通过src属性来引用模板文件，引用的模板是文件内已经定义的模板。另外import涉及到一个作用域的问题，如果模板文件wxml中也引入了其他的模板，不会被二次渲染出来，避免了死循环的问题。

例如：

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


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

// 结果
hello world!

include

include和import不同，include相当于把模板文件中除了模板代码块的其他内容全部复制到目标文件中。例如：

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


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

// 结果
hello

以上就是小程序开发框架基本构成中的wxml的详细讲解，有关其他的三部分留在下一节。