(一)自定义组件

1.组件

1.1 创建组件

• 在项目的根目录中鼠标右键，创建components->test文件夹
• 在新建的components->test文件夹上，鼠标右键，点击"新建components"
• 键入组件的名称之后回车,会自动生成组件对应的四个文件,后缀名分别为.js.json.wxml 和.wxss

1.2 引用组件

组件的引用方式分为"局部引用"和"全局引用"

• 局部引用：组件只能在当前呗引用的页面内使用。
• 全局引用：组件可以在每个小程序页面使用

1.2.1 局部引用组件

在页面的.json配置文件中引用组件的方式，叫做"局部引用"

在页面的.json文件中，以键值对的形式引入，键是组件引用后的名字，值是组件的存放路径

1.2.2 全局引用组件

在app.json全局配置文件中引用组件的方式，叫做"全局引用"

1.2.3 全局引用VS局部引用

根据组件的使用频率和范围，选择合适的引用方式

1.2.4 组件和页面的区别

从表面上来看，组件和页面都是由 .js .json .wxml和.wxss这四个文件组成的，但是，组件和页面的.js与.json文件有明显的不同：

• 组件的.json文件中需要声明"component"：true属性
• 组件的.json文件中调用的是Component()函数
• 组件的事件处理函数需要定义到methods节点中

2.自定义组件-样式

2.1 组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的ui结构

2.2 组件样式隔离的注意点

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果,id选择器,属性选择器,标签选择器都不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用class选择器，不要使用id，属性，标签选择器

2.3 修改组件样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，但有时，需要外接能够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项,两种方式：

1:  2:

2.4 styleIsolation的可选值

3. 自定义组件-数据、方法和属性

3.1 data数据

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

3.2 methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods节点中 

注意：自定义方法都以 _ 开头，用来区分方法和事件处理函数

3.3 properties属性：声明属性节点

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据

 在自定义属性中，可以通过声明的方式来声明一些可用的属性节点

声明的方式有两种：一种是完整声明属性的方式，另一种是简化声明属性方式，

简化方式：属性名对应值的类型 max:Number , min:String , mid : Boolean;无法指定默认值

完整方式：指向配置对象，type用来规定自定义指令属性值的数据类型，value规定属性值的默认值，后续指定属性的值，指定的值会覆盖默认的值。

4. 自定义组件-数据监听器

4.1 什么是数据监听器

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

 声明一个observes配置对象，在字段里面可以监听字段的变化，监听多个字段的变化时，在中间使用逗号间隔不同字段，可任意在一个监听器里面监听多个字段的变化

4.2 数据监听器的基本用法

组件的UI结构：

 组件的.js文件代码：

 在js文件中华，声明n1,n2以及sum数据节点，定义n1,n2两个按钮的点击事件函数，sum和的值需要监听n1,n2的变化来自动进行求值，在监听器内部可以同时监听n1和n2

(二)使用npm包

(三)全局数据共享

(四)分包