微信小程序入门之组件（一）

一、组建的创建与引用

1. 创建组件 ：根目录下新建components文件夹-->test文件夹-->右键新建Component
2. 引用组件

（1）局部引用 ，适合某组件在特定页面被使用。在页面的.json文件中引入组件，在页面的.wxml文件中使用组件 。

//.json文件中，采用键值对方式，键为使用的组件名，值为组件的存放路径
{
  "usingComponents": {
      "my-test1": "/components/test/test"
    },
 }
 
 //.wxml中
 <my-test1></my-test1>

（2）全局引用，适合某组件在多个页面被经常使用。在app.json全局配置中引入组件。

//app.json文件
{
  "pages":[/* 代码省略 */],
  "window":{/* 代码省略 */},
  //配置底部导航栏
  "tabBar": {/* 代码省略 */},
  //全局引入组件
  "usingComponents": {
    "my-test2": "/components/test2/test2"
  }
}

1. 组件和页面的区别

（1）组件的 .json 文件中需生明"component": true,

//组件 .json 文件
{
    "component": true,
	"usingComponents": {}
}

//页面 .json 文件
{
  "usingComponents": {}
}

（2）调用函数不同。

//组件 .js 文件
Component({...})

//页面 .js 文件
Page({...})

（3）事件处理函数位置不同。组件需定义到methods节点中，页面上定义与data()平级

二、样式隔离

默认情况自定义样式只对当前组件生效。

注意：1、app.wxss中设置的全局样式对组件无效

2、只有class选择器会有央视隔离的效果，id.属性以及标签选择器不受样式隔离的影响

在外界控制组件内部样式，可以通过stylelsoIation修改组件的样式隔离选项

//在组件的 .js 文件中新增如下配置
Component({
	options: {
		styleIsolation: "isolated"
	}
  ...
 })


//或在组件的 .json 文件中新增如下配置
{	
	...
	"styleIsolation": "isolated"
}

三、数据、方法和属性

1、data数据

用于组件模板渲染的私有数据，需要定义到data节点中。

2、methods方法

事件处理函数和自定义方法需要定义到methods节点中

3、properties属性

组件的对外属性，用来接收外界传递到组件中的数据。

Component({
    properties: {
  	    max: {        // 完整定义属性的方式
    	    type: Number,
          value: 10
        }
    },
	data: {
		count: 0
	},
    methods: {
  	    addCount() {},   // 事件处理函数
        ...,
        _showCount() {}     // 自定义方法建议以 _ 开头
    }
})

<my-test max="20"></my-test>

4、data和properties的区别

在小程序组件中，二者用法相同，都是可读可写的。

console.log(this.data === this.properties) //true

• data更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到组件中的数据

5、使用setData修改properties的值，方法同修改data中数据

四、数据监听器

1、什么是数据监听器？

用于监听和响应任何属性和数据字段的变化，作用类似于vue中的watch侦听器。在小程序组件中，基本语法格式如下：

Component({
	observers: {
  	'字段A, 字段B': function(A的新值, B的新值) {
    	......
    }
  }
})

2、基本用法，示例代码如下：

// .wxml
<button type="primary" bindtap="addn1">n1 + 1</button>
<button type="primary" bindtap="addn2">n2 + 2</button>
<view>{{n1}} + {{n2}} = {{sum}}</view>


// .js
Component({
	data: {
		n1: 0,
		n2: 0,
		sum: 0
	},

	observers: {
		"n1, n2": function(newN1, newN2) {
			this.setData({
				sum: newN1 + newN2
			})
		}
	},

	methods: {
		addn1() {
			this.setData({
				n1: this.data.n1 + 1
			})
		},
		addn2() {
			this.setData({
				n2: this.data.n2 + 2			
            })
		}
	}
})

3、监听对象属性的变化

支持监听对象中单个或多个属性的变化，示例如下:

五、纯数据字段

1、纯数据字段指的是那些不用于界面渲染的data字段。纯数据字段有助于提升页面更新的性能。

2、使用规则

在Component构造器的options节点中指定pureDataPattern为一个正则表达式，字段名符合这个表达式的字段将成为纯数据字段，示例如下：

六、组件的生命周期

1、全部生命周期

2、主要的三个生命周期函数：

1）、created：组件实例刚被创建好时触发

• 此时还不能调用setData
• 通常只能用于给组件的this添加一些自定义的属性字段

2）、attached：组件完全初始化完毕、进入页面节点树后被触发

• 此时，this.data已初始化完毕
• 这个生命周期很有用，绝大多数初始化的工作可以在此进行（例如发送请求获取初始数据）

3）、detached：组件离开页面节点树后被触发

• 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
• 此时适合做一些清理性质的工作

3、lifetimes节点，在其中定义生命周期函数优先级最高。

Component({
	// 推荐用法
	lifetimes: {
		created() {},
		attached() {},
		detached() {}
	}
  
  //旧式的定义方式
  created() {},
	attached() {},
	detached() {}
 })

4、组件所在页面的生命周期

自定义组件中，组件所在页面的生命周期有如下三个：

5、pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifeTimes节点中，如：

Component({
        pageLifetimes: {
	    show() {}
            hide() {}
            resize() {}
	}
 })