Web微信小程序开发-视图层（三）

我们在学了一些基本的知识点后，需要正规的接触它的语法，学过HTML和CSS的应该会觉得语法很相近，但是也有不同的地方，故我们这篇涉及其视图层

WXML（Weixin Makeup Language）
是一种框架设计的一套标签语言，结合基础组件，时间系统，可以构建出页面的结构

一、数据绑定

e.g
新建一个index3，并在index3中的js里面设定data的值


同时利用view打印分行刚设定好的值等操作
别的操作就不细说，可参看文档：数据绑定

但要注意的是
bool类型的变量设定true或false时应该有两个大括号包围
同时这里使用了checkbox即一个勾选框，设定为false即未勾选，而设定为true即为勾选上

二、运算

就是在大括号里进行简单的运算，可参考链接：运算

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

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

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

view中的内容为 3 + 3 + d

逻辑判断

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

字符串运算

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

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

注意

花括号与引号之间不要有空格，将最终被解析为字符串

三、列表渲染

wx:for

项的变量名默认为item wx:for-item，可以指定数组当前元素的变量名
下标变量名默认为index wx:for-index，可以指定数组当前下标的变量名

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

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

wx:key

这里提供了几种关于wx的用法，我们可以看到同样的效果

四、条件渲染

wx:if

<view wx:if="{{condition}}"> True </view>

hidden

hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

---

第三篇Web微信小程序开发的学习就到此结束啦！
主要是要去专研官网上的文档，知道其语句的用法，实际上前端开发的语法都很类似，精通一门就能更好的学习其他的