（学习总结）微信小程序开发WXML

因为对Vue比较熟悉，所以会结合vue对微信小程序的语法进行理解

微信小程序开发使用的是WXML(与html同作用)和WXS（与JS同作用）

微信官方文档入口

WXML语法参考

一、数据绑定

1、在页面上展示内容：

<view>{{ message }}</view>

Page({
    data:{
        message:'Hello'
    }
})

展示效果为：

2、通过变量控制组件属性（需要在双引号之内）

<view id="{{ hello }}"></view>

Page({
    data:{
        hello:'word'
    }
})

此view标签的id为word

3、通过变量控制是否显示（需要在双引号之内）

<view wx:if="{{condition}}">显示了！</view>
//在wx:if与vue中的v-if作用相同

Page({
    data:{
        condition:true
    }
})

这个view会显示在页面上，当condition的值改为false后就不会显示。

4、关键字（需要在双引号中）

<checkbox checked="{{false}}"> </checkbox>

当前的勾选框为未选中状态，当值为true时，状态为选中。

注意：不能直接写checked = "false",这时会将引号内容识别为字符串，而只要不是空的字符串都会转化为true。是需要写在双大括号中的。

5、在{{ }}中运算

（1）三元运算

<view hidden = "{{flag ? true :false}}">Hidden</view>
//hidden的作用于vue中的v-show相同

（2）算数运算

<view>{{ a + b }} + {{ c }} + d </view>

Page({
    data:{
        a:1,
        b:2,
        c:3
    }
})

会先计算{{}}中的a + b，然后获取到{{}}中的c的值，而d没有{{}}，显示为字符d

页面效果为：

（3） 逻辑判断

<view wx:if="{{ length > 5}}">aaa</view>


Page:({
    data:{
        length:6.
    }
})

此时length=6,大于5布尔值为true，所以会显示aaa;当值为4或者5时，不大于5，布尔值为false，所以不会显示

（4）字符串运算

<view>{{ "hello" + name}}</view>

Page({
    data:{
        name:'Mina'
    }
})

显示结果为：也就是字符串拼接

 （5）数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
//wx:for与vue中的v-for相似

Page({
  data: {
    zero: 0
  }
})

首先会拿到zero的内容0，然后遍历，页面效果为：

（6） 模板中传值

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
//个人理解为vue中的自定义组件

Page({
  data: {
    a: 1,
    b: 2
  }
})

这段代码能够向objectCombine的模板中传入for:1和bar:2,也就是在objectCombine模板中能够使用这两个变量的值。

还可以用扩展运算符...将对象展开传值

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

首先会展开obj1，拿到a，b;然后展开obj2，拿到c,d；然后结合e，objectCombine就可以拿到abcde的值。

（7）存在同名变量时后面会覆盖前面的

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

因为最后的会覆盖前面的，所以结果为{a:5,b:3,c:6}

注意：

如果括号和引号之间有空格会被解析成字符串！

就是{{“hello”}} 与 {{ “hello”}}不相等！

二、列表渲染

1、wx:for

作用与vue中v-for一值，就是重复渲染，

使用在组件上，控制属性绑定一个数组，可以用数组中的每项循环渲染这个组件。

在重复渲染过程中，当前渲染的数据是在数组中的下角标为index，此项的变量名默认为item。比如绑定的数组为student,当前渲染到数组中的第一项，此时的index的值为0，而此时的item就是student[0]；第二项时，index的值为1,此时的item就等于student[1]。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

页面展示为：

0:foo

1:bar

可以通过wx:for-item指定用什么变量名来表示item；

可以通过wx:for-index指定用什么变量名来表示index;

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

//与vue不同的是，vue中v-for是可以通过v-for="(item,index) in array"切换变量名
//就是vue是通过参数位置来指定变量名，v-for="(ite,ind) in array"就能进行切换

2、block wx:for

就是将wx:for绑定在block标签上，得到循环渲染一块代码的效果：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

这段代码的效果就是渲染三次代码，每一次都会渲染两个view，一个用于装index,一个用于装item.

3、wx:key

当列表中的数据是动态的时，希望数据变化的时候列表的项能够与对应的数据保持一直，（比如switch的选中状态，因为没有绑定key，会造成选中的位置错落，这个与index有关）需要用wx:key来指定列表中项目的唯一标识符

（不推荐index作为key的值，比如如果选中index=2，此时在前面插入一项，那么选中状态依然是index=2,但是选中的应该是index=3才对）。

注意：

（1）如果没有设置wx:key的话会报一个warning。如果是静态的话可以忽略。

（2）如果wx:for的值是字符串的话，会解析成字符串数组：

<view wx:for="array">
  {{item}}
</view>

//等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

（3）如果括号和引号之间有空格的话，就会解析成字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

//等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

三、条件渲染

1、wx:if

等同于vue中v-if，使用wx:if=""判断是否需要渲染这个代码快：

<view wx:if="{{condition}}"> condition的值为true时显示 </view>
<view wx:if="{{condition}}"> condition的值为false时不显示 </view>

与vue不同的是，还有wx:elif和wx:else来渲染：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

//相当于

if(length >5){
    //渲染第一个view
}else if(length > 2){
    //渲染第二个view
}else{
    //渲染第三个view
}

2、block wx:if

与block wx:for相同，能够将wx:if添加到block上，通过判断决定是否渲染整块的代码：

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

此时整块代码都会渲染，将true替换成false时，整块代码都不会渲染

wx:if与hidden

也就是vue中v-if和v-show的关系，wx:if会根据条件在切换时销毁或者重新渲染，当条件为false时，就不会执行任何操作，只有当条件为true时才会进行渲染。

hidden则不论是否需要显示都会进行渲染，只是根据控制决定是显示还是隐藏起来。

两者的区别是，wx:if因为每次切换时都会销毁或者重新渲染而较消耗性能，而hidden因为一开始就会渲染而较消耗性能。所以如果切换次数少的话，使用wx:if会较好，切换次数多的话使用hidden会更好。

四、template模板

模板类似于组件，但是于组件不同的点在于模板自身是没有js的，也就是自身是静态的，如果模板中有动态功能，那么js代码需要在使用的页面中定义

定义模板

关键是需要给模板使用name属性定义名称，否则无法调用

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!--
  index: int
  msg: string
  time: string
-->

使用模板

使用模板时，需要使用is属性，值为模板的名称，这也就是为什么不使用name就无法调用模板，饭后使用data传入参数

//一般模板都是在一个单独定义模板的文件，所以使用的时候需要引入
<import src="../../template/template.wxml" />

<template is="msgItem" data="{{...item}}"/>


Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

//模板如果有样式文件也需要在使用页面的wxss中引入
@import "../../template/template.wxss"; //引入template样式

is属性可以使用Mustache语法动态决定渲染哪个模板

<template name="odd">
  <view> odd </view>
</template>

<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

这样单数就会渲染odd，双数渲染even

注意：

1、模板有自己的作用域，只能使用data传入的数据以及模板定义文件中的<wsx/>模块中的数据

2、模板是没有js文件的，动态的功能需要在使用模板的页面的js代码中定义

五、引用

WXML提供两种文件引入方式import和include

import

官方文档的举例就是用于引入模板，并且能引入的只能是被引入文件中自己定义的模板，而被引入文件中引入的模板是不能使用的。

比如：C import B，Bimport A ，那么C只能使用B中定义的模板，

             如果是B中又引入了A中定义的模板，那么C是不能使用A中定义的模板的

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include能够将引入文件除了<template/><wxs/>外的所有代码都引入，相当于将除<template/>和<wxs/>外的代码拷贝到include的位置。

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>

<!-- header.wxml -->
<view> header </view>
<template name ="MU">
    123
</template>

index.wxml中代码就相当于

<!-- index.wxml -->
<view> header </view>
<view> body </view>