微信小程序学习笔记（三）----初识小程序代码、轮播图实现

从这一节开始我们就开始接触小程序前台代码了，其实前台逻辑还是比较简单的，学习难度比学习一个前端框架难不了多少，记得以前一开始学前端框架的时候，流程就是：熟悉一下--查看组件--找到要用的--复制粘贴，其实对于大部分人来说，小程序前台也是一样。

首先，我们可以先看下小程序的组件，这里是他的官方介绍，很详细：

https://developers.weixin.qq.com/miniprogram/dev/component/

在小程序组件的官方介绍里，将这些组件分成了七类，今天就以视图容器组件里面的滑块视图容器来向大家做一个简单的介绍，所谓举一反三，在看明白之后，学习能力强有兴趣的朋友可以依照相同的办法将其他的组件也看一看。

这次要实现的是一个轮播图的效果，其实就是滑动视图容器加点内容就实现了，但是可以借此来看一看小程序的代码逻辑是什么样的。

首先我们来新建一个小程序项目，如果不会的话可以看看前面的两节课程。

微信小程序学习笔记（一）----微信小程序入门简介，开发者工具基础使用

https://blog.csdn.net/qq_24127447/article/details/83242675

微信小程序学习笔记（二）----微信文件结构、类型简单介绍

https://blog.csdn.net/qq_24127447/article/details/83244199

建立好项目我们可以先清理一下，首先把logs文件夹删了，这里用不到，然后把index文件夹下面：

这四个文件里面的内容清空，这时候全局配置文件app.json会报错，我们进去直接修改成这样，然后保存就可以了：

然后我们可以在index.wxml里面写下如下的代码（来自小程序文档）：

然后在index.js里面写下这些代码（来自小程序文档）：

//index.js
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,//是否显示面板指示点
    autoplay: true,//是否自动播放
    interval: 2000,//播放间隔
    duration: 1000,//滑动动画时长
  }
})

然后点击顶部的编译，就可以出现这样的效果了：

在这里可以对这几点进行介绍：

swiper标签：滑块视图容器，拥有的属性可以在小程序官方文档的属性里面看到，在上面的代码里面有这样的描述：

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

这些属性都是和index.js里面的值对应的，如果这里没有这些属性描述，就算是在js文件里写了也没有用，依然会取默认值

swiper-item标签：只能放在swiper容器里面的标签，如上面就是这样，然后在里面增加了image的图片标签，图片标签里面同样是这样的属性：，和index.js里面的内容对应

block标签：我们都知道for在程序里面大部分是循环的意思，在这里同样也是，block并不是一个组件，它仅仅是一个包装元素，只能够控制属性，比如wx:for就是一个控制属性，控制循环

index.js：在这个里面能够很明显的看出来是json格式，可以有属性、数组，然后在.wxml里面进行取用

这就是今天的介绍，还有很多组件，以后也会介绍一部分，但肯定不会全部介绍，有兴趣的朋友可以根据这个逻辑，自己去试一试。