1. 组件的创建
组件的创建，在项目的根目录下创建components文件夹（只是为了见名知意），然后点击右键新建component即可。
点击新建component之后，会自动为你创建四个文件，.js,.json,.wxml,.wxss
注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中
2. 组件的引用
组件的引用方式分为“局部引用”和“全局引用”，
局部引用：组件只能在当前被引用的页面内使用。
全局引用：组件可以在每个小程序页面中使用。
2.1. 局部引用
局部引用组件，只需要在需要使用该组件的页面的.json文件中进行配置即可。局部引用组件，只能在当前页面进行引用。
格式如下，我们只需要在usingComponents中设定组件，以键值对的方式设定即可。"usingComponents": {组件名:组件位置,}
例如：
{
"usingComponents": {
"my-component":"/components/test/test"
}
}
使用方式：
<my-component></my-component>
2.2. 全局引用
全局引用同理，则需要在当前应用的的.json文件中进行配置。
全局引用配置，则可以在当前应用的所有页面进行使用
{
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#13A7A0",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
// 全局引用组件
"usingComponents": {
"my-component2":"/components/test/test"
},
}
使用方式：
<my-component2></my-component2>
2.3. 组件和页面的区别
从文件组成结构来看，组件和页面的构成都是由.js,.json,.wxml,.wxss文件组成，但是其中.js与.json文件有明显不同。
.json文件，组件的.json文件中需要声明 “component”: true 属性
.js 文件，组件的.js文件中调用的是component函数，页面的.js文件中调用的是page函数。
组件的方法下需要定义到methods中，而页面的话方法是可以随意定义的只要在Page函数中就行。
3. 组件的样式隔离
3.1. 默认情况，组件样式隔离性
默认情况下，组件的样式具有隔离性，即自定义组件的样式只会对当前组件生效，不会影响到组件之外的其他元素。同时组件的样式也不会影响到外界其他元素的样式。
tips:只有class选择器会有样式的隔离效果，id选择器，属性选择器，标签选择器不受样式隔离的影响。
3.2. 修改组件的样式隔离选项
虽然默认情况下，自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。可以通过配置 option 中的 styleIsolation 的值来修改组件的样式隔离选项。
其中styleIsolation 可以配置的值有 isolated,apply-shared和shared
styleIsolation 选项从基础库版本 2.6.5 开始支持：
● isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
● apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
● shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
Component({
properties: {
},
data: {
},
methods: {
},
options:{
styleIsolation :'isolated'}
})
4. 组件的data,methods和properties
4.1. 组件中的data
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中（与页面的data作用是一样的）。
// components/test/test.js
Component({
/**
* 组件的初始数据
*/
data: {
count:0
},
}
4.2. 组件的methods
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中.
一般情况下为了区分事件处理函数和自定义方法，我们在自定义方法前加一个下划线以示区分。
// components/test/test.js
Component({
methods: {
// bindTap 绑定的事件处理函数
addCount(){
this.setData({
count:this.data.count+1
})
this._showCount()
},
// 自定义的方法
_showCount(){
console.log(this.data.count)
}
},
}
4.3. 组件的properties
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据.
// components/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 简写定义，可以忽略默认值，只给数据类型
max:Number,
// 完整定义
age:{
type:Number,
value:20
}
},
}
当我们在组件的properties中声明了属性，那么我们在组件中就可以使用这些属性。
<my-component max="20" age="10"></my-component>
4.4. data 与 properties 的异同
在组件中，data与properties都是用来存放数据的，用法也都一样。
只不过data 更倾向于存储组件的私有数据,properties 更倾向于存储外界传递到组件中的数据
由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值。
组件的js部分
// components/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 简写定义，可以忽略默认值，只给数据类型
max:Number,
// 完整定义
age:{
type:Number,
value:20
}
},
/**
* 组件的初始数据
*/
data: {
count:0
},
/**
* 组件的方法列表
*/
methods: {
addCount(){
this.setData({
count:this.data.count+1,
max:this.properties.max+1
})
this._showCount()
},
_showCount(){
console.log(this.data.count)
}
},
options:{
styleIsolation :'apply-shared'
}
})
组件的wxml部分
<!--components/test/test.wxml-->
<text class="t-color t-bold">components/test/test.wxml</text>
<view>{
{max}}</view>
<button bindtap="addCount">+1</button>
页面的效果：
5. 组件的数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作（一般都是监听setData的数据，即当有data中的字段或者对象被setData时就会触发数据监听）
在组件中，需要在组件的.js文件中配置observers配置项即可，格式如下：
5.1. 字段上的数据监听格式
// components/test/test.js
Component({
// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
observers:{
'字段A,字段B':function(字段A的新值,字段B的新值){
// 函数体 ---- 字段A或字段B被setData赋新值时会触发
}
}
})
这里的字段A，字段B可以是任意多个的字段，如果太多则可以使用**通配符来匹配。
5.2. 对象属性上的数据监听格式
对象的属性上的数据监听，只需要以对象.属性的方式即可。
// components/test/test.js
Component({
// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
observers:{
'对象.属性A,对象.属性B':function(对象.属性A的新值,对象.属性B的新值){
// 函数体 ---- 对象的属性A或属性B,被setData赋新值时会触发
}
}
})
5.3. **通配符的数据监听格式
**通配符，可以用作匹配任意字段，也可以用作匹配对象的任意属性
- 匹配任意字段
// components/test/test.js
Component({
// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
observers:{
'**':function(){
// 函数体 ---- 数据的任意setData都会触发
}
}
})
- 匹配对象的任意属性
// components/test/test.js
Component({
// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
observers:{
'obj.**':function(newObj){
// 函数体 ---- 对象的任意属性的setData都会触发
}
}
})
5.4. 数字求和的数据监听小demo
组件的结构（.wxml）
<view>{
{num1}} + {
{num2}} = {
{sum}}</view>
<button bindtap="addNum1">num1+1</button>
<button bindtap="addNum2">num2+1</button>
组件的.js部分
// components/test2/test2.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
num1:0,
num2:0,
sum:0
},
/**
* 组件的方法列表
*/
methods: {
addNum1(){
this.setData({
num1:this.data.num1+1
})
},
addNum2(){
this.setData({
num2:this.data.num2+1
})
}
},
// 数据监听器
observers:{
'num1,num2':function(newNum1,newNum2){
this.setData({
sum:newNum1+newNum2
})
}
}
})
组件的全局引用，为了方便就直接全局引用了(app.json)
{
"usingComponents": {
"my-test2":"/components/test2/test2"
},
}
页面的使用
<my-test2></my-test2>
5.5. 颜色RGB按钮的数据监听小demo
组件wxml部分：
<view style="background-color: rgb({
{
fullColor}});" class="colorBox">
颜色值:{
{fullColor}}
</view>
<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>
组件wxss部分：
.colorBox{
line-height: 200rpx;
font-size: 24rpx;
color:white;
text-shadow: 0rpx 0rpx 2rpx black;
text-align: center;
}
组件js部分：
// components/test3/test3.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
rgb: {
r: 0,
g: 0,
b: 0
},
fullColor: '0,0,0'
},
/**
* 组件的方法列表
*/
methods: {
changeR: function () {
this.setData({
'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
})
},
changeG: function () {
this.setData({
'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
})
},
changeB: function () {
this.setData({
'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
})
}
},
observers:{
// 监听 rgb对象的所有属性的setData
'rgb.**':function(obj){
this.setData({
fullColor:`${
obj.r},${
obj.g},${
obj.b}`
})
}
}
})
全局配置引用组件：
{
"usingComponents": {
"my-test3":"/components/test3/test3"
},
}
页面使用组件及效果：
<my-test3></my-test3>
