<直接从印象笔记复制的，图片上看着不是很舒服，但不影响内容>

对于一个函数，可以通过module来实现复用，但是如果我们希望复用一个有一定样式、同时具有逻辑功能的部分的时候，我们就需要用到自定义的组件。

通过选择     新建--component 即可新建一个组件目录。

可以看到，组件与page具有相同的目录结构。

一些说明：首先是无论是pages还是components，目录名都可以与具体的pages或components名不同；

第二、新建components输入的名称其实并不是真正的组件的名称，如这里的index，真正的组件名并不是index，而是可以任意的。

component的使用：

需要在要用到该组件的界面的json文件里去配置，配置的格式就是"key":"value"

这里的key就是组件的名称，value则是组件的路径。这里的key是可以任意设置的，只需要保持在wxml里保持一致即可。

如下图，我们要引用目录like里定义的组件，我们可以把key（组件名）设置为v-like,value(路径)配置好

然后在要用到该组件的wxml文件中使用该组件即可：

这时，在模拟器中，我们可以看到v-like组件的内容就显示在了要显示该组件的wxml上

概括：使用组件的流程：先在json文件里引用，然后在wxml文件里使用 

2.px与rpx

小程序尺寸单位有两种：px与rpx

px是一种绝对的像素大小，而rpx具有自适应的效果，能够在屏幕较大的机型上将像素放大，在屏幕较小的机型上将像素调小

在iPhone 6 的尺寸（375×667）上，恰好满足一种比较简单的视觉大小与真实尺寸的换算关系：

视觉大小/真实尺寸(px为单位)=2:1

视觉大小/真实尺寸(rpx为单位)=1:1

因此，一般要求设计师在（375*2×667*2）的大小的机型设计设计稿，这样在px为单位下刚好是1:1的关系

对于px和rpx的选择：鉴于rpx的自适应的特点，大多数时候都可以使用rpx作为单位。但是，如果你希望大小在任何大小的屏幕上都不变，则使用px

3.全局样式设置--隐藏的page标签

可以看到， 生成的wxml里，外面自动的生成了<page></page>标签

我们就可以在app.wxss里，通过page 元素选择器 对所有的界面进行配置

可以看到，虽然这里是对page标签进行的css选择器，但是因为被使用的组件也被导入page中，所以被使用的component也受到了这里定义的样式的影响，对于这一现象，我们称为     该组件继承了全局样式    。

需要注意的是，组件并不能继承所有的全局样式。实际上，只有很小一部分样式能被组件继承。

观察下面的现象：

我们在组件的wxss里设置background-color为blue

效果：

ok，没问题。

假如我们把在组件的wxss设置的.container以及background-color整个部分转移到app。wxss，希望组件能够继承该属性：

效果：

可以发现，这里组件并没有继承到我们设置的.container。

实际上，官方文档中已有说明，只有font、color属性才能被继承。

而在pages界面中的wxml使用app.wxss定义的样式类时，大多数样式都可以继承。

在前面，我们提到，组件，是为了考虑复用性，是为了整个项目中可能会有多个页面用到某个带有样式的界面。

但是实际上，这种可以直接引用写好的组件而不加修改的机会是很少的，而组件实际上还有另一个作用：将整个界面分解为多个组件，有助于解耦合以及代码的维护，每个组件完成一个简单的功能，每个组件自身也的逻辑也会比较清晰。

对于一个component的js文件中，有properties、data、method三个部分

其中，properties是开放给组件外部的数据·，data则是组件内部使用的数据

对于properties中数据的定义，不能像data那样直接用键值对，这样会报错

而是需要在properties中定义对象的方式来定义数据

例如在上图中，我们定义了一个名为like的对象

定义在properties中的对象，有三个属性，type（数据类型）、value（初始值）、observer。

其中，type是必填的，而value和observer都是选填的。

如果我们想要在js中访问properties中的属性，我们可以通过this.properties.属性名    来获取该属性。

如果我们要修改properties中的数据，可以通过this.setData来实现

理解setData函数：setData起到的是  数据更新  的作用

在其他位置直接用this.data.数据名=数据值     这样的语句是不会修改Data的值，只有在setData中才有效。

对于setData函数，如果是data中原来有的，则会对其进行修改，如果是data中没有的数据，那么setData会先将该数据添加到data中，然后赋值。