微信小程序之自定义组件篇

前言：小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。但是样式部分还是有所欠缺，所以总结了微信小程序之自定义组件

一、创建组件：

自定义一个components文件夹，用来存放所有自定义的组件。再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。比如mybox这个组件，那么可以创建一个mybox的一个文件夹。在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其申明为一个组件。在wxml文件中做好组件的节点布局。比如以下代码： <view class="outter"> <view class="inner">幕课网</view> </view>

二、使用组件：

在需要使用自定义组件的页面的json文件中注册组件。添加类似如下代码： { "usingComponents": { "mybox": "/components/mybox/mybox" } } 然后在wxml模板文件中使用组件： <mybox></mybox>

三、给自定义组件添加属性：

在组件的js文件中，在properties中添加属性，添加属性的时候，需要指定两个值，一个是type，代表的是这个属性的类型，一个是value，代表的是这个属性的默认值。示例代码如下： Component({ properties: { showInner: { type: Boolean, value: false } } }) 然后在wxml模板中就可以使用了。示例代码如下： <view class="outter"> <view wx:if="" class="inner">幕课网</view> </view> 在使用组件的时候，可以直接在组件上给这个属性设置值： <mybox showInner="true"></mybox> 还有另外一种使用data的形式，data中的数据可以渲染到组件的代码中，但是使用data不能作为属性来使用。

四、在组件中添加节点：

在使用小程序内置的组件的时候，比如view，我们还可以在view中添加其他的组件。这个功能可以通过slot节点来实现。示例代码如下： <view class="outter"> <view wx:if="" class="inner">幕课网</view> <slot></slot> </view> 以后在使用这个组件的时候，还可以添加自己的节点。示例代码如下： <mybox showInner="true"> <view>这是index中添加的</view> </mybox> 以上是添加一个slot，如果想要添加多个slot，那么需要在js文件中添加一个multipleSlots属性，示例代码如下： Component({ options: { multipleSlots: true }, 然后在wxml文件中，需要给每一个slot都指定name。示例代码如下： <view class="outter"> <slot name="before"></slot> <view wx:if="" class="inner">幕课网</view> <slot name="after"></slot> </view> 最后在使用这个组件的时候，也需要指定放在那个slot中。示例代码如下： <mybox showInner="true"> <view slot="before">这是before的组件</view> <view slot="after">这是after的组件</vie## 标题w> </mybox>

组件样式注意事项：

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。继承样式，如 font 、 color ，会从组件外继承到组件内。除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。 #a { } /* 在组件中不能使用 */ [a] { } /* 在组件中不能使用 */ button { } /* 在组件中不能使用 */ .a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

事件：

组件可以直接再外面绑定事件。示例代码如下： // my-component组件代码 <view> 组件内的代码 </view>

然后在使用的时候，直接在上面绑定就可以了。

<my-component bindtap="tapEvent"></my-component> 自定义组件事件。直接在组件内绑定事件。并且如果我们想在组件内捕获到事件后，要通知到父组件，那么可以通过triggerEvent方法来触发自定义的事件。示例代码如下： // my-component组件代码 <view class="outter"> <view class="inner" bindtap="onInnerTapEvent"></view> </view>

然后在组件的js文件中，使用以下代码进行捕获和传递给父组件。示例代码如下：

Component({ method: { onInnerTapEvent: function(event){ console.log("组件内监听到了innerTapEvent事件"); var detail = {} // detail对象，提供给事件监听函数 var option = {} // 触发事件的选项 this.triggerEvent("customevent",detail,option); } } })

然后在使用组件的地方，需要给自定义事件绑定监听方法。示例代码如下：

<my-component bindcustomevent="onCustomEventEvent"> </my-component>

其中的detail是在触发innerEvent事件的时候，传递给外面接收这个事件的对象一些额外的信息，option是一些选项。这些选项可以如下：

| 选项名 | 类型 | 是否必填 | 默认值 | 描述 | | — | — | — | — | — | | bubbles | Boolean | 否 | false | 事件是否冒泡 | | composed | Boolean | 否 | false | 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部 | | capturePhase | Boolean | 否 | false | 事件是否拥有捕获阶段 |

生命周期：

组件本身的生命周期：

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是created/attached/detached，包含一个组件实例生命流程的最主要时间点。（注意：在2.2.3基础库之前，生命周期函数写在Component中就可以，在2.2.3后应该写在lifetimes中。）

组件实例刚刚被创建好时，created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。在组件完全初始化完毕、进入页面节点树后，attached生命周期被触发。此时，this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。在组件离开页面节点树后，detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached会被触发。