微信小程序-组件

自定义组件-组件的创建与引用

     1.创建组件 

        ①在项目的根目录中，鼠标右键，创建components->test文件夹

        ②在新建的components->test 文件夹上，鼠标右键，点击“新建component”

        ③ 键入组件的名称之后回车，会自动生成组件对应的4 个文件，后缀分别为 .js, .json, .wxml和 .wxss

      2.引用组件

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

   ·局部引用：组件只能在当前被引用的页面内使用

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

   //在页面的 .json 文件中，引入组件 

"usingComponents": {

        "my-test1":"/components/test1/test1"

    }

//在页面的 .wxml 文件中，使用组件

<my-test1></my-test1>

   

·全局引用： 组件在每个小程序页面内使用

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

//在app.json 文件中，跟Pages节点评级 ，键入 

"usingComponents": {

        "my-test1":"/components/test1/test1"

    }

//在页面的 .wxml 文件中，使用组件

<my-test1></my-test1>

全局引用 VS 局部引用

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

    ①如果某组在多个页面中经常被用到，建议进行“全局引用”

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

组件和页面的区别

  ·组件的.json 文件中需要声明"component":true属性

  ·组件的.js 文件中调用的是Component()函数

  ·组件的事件处理函数需要用到定义到的methods 节点中

---

自定义组件-样式

1.组件样式隔离

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

   ·组件 A 的样式不会影响组件 C 的样式

   ·组件 A 的样式不会影响小程序页面样式

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

  好处：

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

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

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

  ·app.wxss 中的全局样式对组件无效

 ·只有class 选择器会有样式隔离的效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

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

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

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

//在组件的 .js 文件中新增如下配置

Component({

    options:{

        styleIsolation:"isolated"

    }  

})

//或者在 组件.json 文件中新增如下配置

{

"styleIsolation":"isolated"

}

styleIsolation 的 可选值

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

---

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

数据、方法

data: {

        count : 0

    },

    /**

     * 组件的方法列表

     */

    methods: {

       addCount(){  

           this.setData({ count:this.data.count +1})

           this._showCount()

       },

       _showCount(){

            wx.showToast({

            title: 'count值为：' + this.data.count,

            icon: 'none'

           })

       }

    }

属性

在小程序中，properties 是组件对外属性，用来接收外界传递到组件中的数据，示例代码如下：

 properties: {

        //第一种方式

        max:Number,

        //第二种方式，可以指定默认值

        max:{

            type :Number,

            value:10

        }

    },

//外界传参方式

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

4.data和properties 的区别

    在小程序组件中，properties 属性和 data 数据的用法相同，他们都是可读 可写 的，只不过：

·data 更倾向于存储组件的私有数据

·properties 更倾向于存储外界传递到组件中的数据

5.使用setData 修改 properties

    由于 data 数据 和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于渲染，或使用setData为properties 中的属性重新赋值，示例代码如下：

this.setData({ max: