前言

关于这一篇为什么换标题了？其实这一篇还是我的入门教程系列文章，因为涉及的东西有点多不好起名字，所以我暂时改一个标题😝，这一篇讲的是小程序的数据绑定，和两种特殊的渲染以及<swiper>组件，这一篇讲的东西可以说是很重要了，特别是数据绑定。它可以帮我们将从后台得到的数据绑定到你要展示的位置，所以这些学好，又离我们写一个好的小程序的小目标近了一步，ok，学起来。

数据绑定

数据绑定是很好理解的，通俗一点就是，我想动态的在这展示我的数据，那么我就在这用一个标记把这里标记起来，然后我通过这个标记把数据放过来。没错就是这么简单，语法也简单，就是用两个大括号将变量包裹起来，像这样<view>{{ message }}</view>，这样就声明了这需要一个叫message的数据，那这个数据哪里来？这和 js 中的data有关，可以说这里是我们定义数据的地方，在这可以给标记赋值，然后当页面启动的时候，框架就会知道将data中的数据方法对应的标记位置。当我们想在一个函数中动态传一些数据的话，就是可以使用**this.setData({ })**方法来实现,数据绑定还有很多的玩法建议看文档。下面举一个简单的例子

wxml代码

<view>你好！！</view>
<view>{{value}}</view>

js代码

Page({
  data: {
    value:"你好小程序"
  }
})

效果图

条件渲染

wx:if 是小程序的一个控制渲染的属性，也就是符合条件的才会渲染，而不符合条件的就不渲染，它的用法就是<view wx:if="{{condition}}"></view>，判断的条件要写在双引号里面，可以是静态的值，也可以是数据绑定的动态值，也可以是带有判断运算符的值，因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。（<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。引文档）它还有两个兄弟wx:elif 和 wx:else ，这和一些语言的 if 三件套使用是很接近的，意思是一样的，那就不多说了，总之符合条件才会渲染。

wxml代码

<!--代码来自文档-->
<view wx:if="{{condition}}">True</view>

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

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

js代码

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

效果图

列表渲染

wx:for 是一个很实用的属性，举个例子，在web页面里面你想要展示三个大小一样的盒子，是不是要复制两次代码，有了wx:for就不用这么麻烦了，直接在view上加上这个属性，循环3次框架就会渲染出三个一样的view，在组件上使用 wx:for 控制属性绑定一个数组（也可以是数值），即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
如果你不想用默认的，你可以使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名，wx:for的例子就不举了，文档关于这块写的很好

这里提一下为什么要把swiper组件连在一起讲呢！在swiper组件中会用到这些内容，所以既可以当作练习以上内容，顺便也就把swiper学了

swiper组件

讲真，小程序的组件真的是很方便，如果要是在web端实现一个轮播图那是要费点力气啊！但是通过<swiper>和<swiper-item>（注：swiper-item只能在swiper里面使用）的配合，再加上<swiper>组件的一些属性，轻松就能生成一个漂亮美观的轮播图。当你需要自动滚动的时候只需要设置autoplay为true就行，要设置滚动时间的话只需要使用interva属性就行，lindicator-dots可以控制要不要面板指示点。属性比较多，所以建议看文档。

wxml代码

<!--我这没有设置滚动时间，默认5秒-->
<swiper class="swiper_" autoplay='true' indicator-dots="true" indicator-active-color='orange'>
  <swiper-item wx:for="{{imgUrls}}" wx:key>
    <image src='{{item}}'></image>
  </swiper-item>
</swiper>

js代码

Page({
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ]
  }
})

效果图

结语

谢谢大家的支持！