微信小程序开发基础知识5----自定义组件

一、组件的创建与引用

1、创建组件

① 在项目的根目录中，鼠标右键，创建components ->test 文件夹
②) 在新建的 components ->test 文件夹上，鼠标右键，点击“新建 Component'
③ 键入组件的名称之后回车，会自动生成组件对应的4个文件，后名分别为.js，json，.wxml和.wxss

2、引用组件

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

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

3、局部引用组件

在页面的.json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下:

// 在页面.json文件中，引入组件
{
    "usingComponents":{
        "my-test1":"/components/test1/test1"
    }
}

//在页面的.wml文件中，使用组件
<my-test1></my-test1>

4、全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下:

//在app.json文件中，引入组件
{
    "pages":[/*省略不必要的代码*/],
    "window":{/*省略不必要的代码*/},
    "usingComponents":{
        "my-test2":"/components/test2/test2"
    }
}

//在页面的.wml文件中，使用组件
<my-test2></my-test2>

5、全局引用VS局部引用

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

• 如果某组件在多个页面中经常被用到，建议进行“全局引用”
• 如果某组件只在特定的页面中被用到，建议进行“局部引用”

6、组件和页面的区别

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

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

二、样式

1、组件样式隔离

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

• 组件A的样式不会影响组件C的样式
• 组件 A的样式不会影响小程序页面的样式
• 小程序页面的样式不会影响组件A和C的样式

好处:
①防止外界的样式影响组件内部的样式

②防止组件的样式破坏外界的样式

2、组件样式隔离的注意点

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

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

3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation 修改组件的样式隔离选项，用法如下：

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

})

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

4、styleIsolation的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了appy-shared或share的自定义组件

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

1、data数据

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

Compnoent({

/**
* 组件的初始数据
*/
data:{
    count:0
    }
})

2、methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods节点中，示例代码如下：

Component({
    methods:{ //组件的方法列表【包含事件处理函数和自定义方法】
        addCount(){ //事件处理函数
            this.setDate({ count:this.data.count + 1})
            this._showCount() // 通过this直接