轮播图 - 自定义组件（微信小程序）

  在大部分项目中，轮播图都是必不可少的。接下来通过轮播图这一实例来学习微信小程序中的自定义组件。

一、自定义组件的学习

 1. 小程序组件化思想

  将一个完整的页面拆分成很多组件，每个组件都用于实现页面的一个功能块。
  每个功能块都可以独立运作并且可以复用，那么整个页面在后续的管理和维护都是非常容易的，并且扩展性也更强。

 2. 创建自定义组件

  类似于页面，自定义组件由 .js .json .wxml .wxss 4个文件组成。

  创建步骤：

  ① 首先需要在 .json文件中进行自定义组件声明（将component字段设为true，即可将这一组文件设为自定义组件）

  ② 在 .wxml 中编写属于组件自己的模板

  ③在 .wxss 中编写属于组件自己的相关样式

  ④在 .js 文件中，定义数据或组件内部的相关逻辑

 3. 注意事项

• 因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
• 自定义组件也可以引用一定义组件（usingComponents字段）
  
• 自定义组件和页面所在项目根目录不能以“wx-”为前缀名
• 如果在app.json的usingComponents声明某个组件，那么所有页面和组件都可以使用该组件
• 样式细节：组件内的class样式和组件外的class样式，默认是有一个隔离效果的。为了防止样式的错乱，官方不推荐使用id、属性、标签选择器。

 4. 样式的相互影响

  在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。styleIsolation有三个取值：

• isolated：表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响（默认取值）；
• apply-shared：表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面；
• shared：表示相互影响，页面wxss样式影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置
  
  其他相关样式细节：
  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

 5. 组件和页面通信

  很多情况下，组件内展示的内容（数据 properties 、样式 externalClasses 、标签 slot ），并不是在组件内写死的，而是可以由使用者来决定的。（实现传入内容）

  （1）向自定义组件传递

   数据 properties：

    支持的类型：String、Number、Boolean、Object、Array、null

   样式 externalClasses：

    ① 在Component对象中，定义externalClasses属性