微信小程序自定义组件components(代码详解)

微信小程序自定义组件是小程序框架中非常重要的一个功能，允许开发者封装一些通用的功能模块，以便在小程序的多个页面中重用。这样做不仅能够提高代码的复用性，也方便了项目的维护和扩展。 ### 微信小程序自定义组件的创建 创建一个自定义组件需要在小程序的`components`目录下新建一个文件夹，用于存放该组件的代码。这个文件夹里包含四个文件：`.wxml`、`.wxss`、`.js`和`.json`。 - `.wxml`文件定义了组件的结构； - `.wxss`文件定义了组件的样式； - `.js`文件定义了组件的行为逻辑； - `.json`文件则是组件的配置文件，用于声明组件的自定义属性等。 例如，在本文的实例中，创建了一个名为`g-swiper`的轮播图组件，其中包含上述提到的四个文件。 ### 自定义组件的使用 在使用自定义组件之前，需要在引用该组件的页面的`.json`文件中声明组件。声明格式如下： ```json { "usingComponents": { "g-swiper": "/components/g-swiper/g-swiper" } } ``` 声明之后，就可以在页面的`.wxml`文件中使用自定义组件标签了，如： ```html <g-swiper list="{{imageList}}" class="swiper"></g-swiper> ``` ### 自定义组件的属性与方法 自定义组件可以通过`properties`定义外部传入的属性，比如上例中的`list`属性，它是一个数组，用于展示图片列表。而组件内部可以通过`methods`定义组件的方法，例如绑定的事件处理函数。 在组件的`.js`文件中，可以使用`Component`构造器来封装组件： ```javascript Component({ externalClasses: ["g-class"], properties: { list: { type: Array, value: [] } }, methods: { // 事件处理函数或其他方法 } }) ``` ### 自定义组件与外部的交互 自定义组件还可以通过`triggerEvent`方法触发事件，并将事件传递给外部的页面或组件。在本文的实例中，有一个自定义的按钮组件`g-btn`，它绑定了一个`tap`事件，并在事件触发时发送一个`action`事件到外部： ```javascript Component({ methods: { btnTest: function(){ this.triggerEvent('action') } } }) ``` 在引用该组件的页面中，需要在页面的`.wxml`文件中声明绑定该事件： ```html <g-btn bind:action="btnTest"></g-btn> ``` 在页面的`.js`文件中，则实现相应的事件处理函数： ```javascript Page({ btnTest: function(){ console.log('g-btn is clicked now!') } }) ``` ### 弹窗组件实例 文章中还提到了一个弹窗组件`dialog`的实例。`dialog`组件在页面`.wxml`中使用，并绑定了取消和确认事件： ```html <dialog id="dialog" bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></dialog> ``` 对应的`.js`事件处理函数`_cancelEvent`和`_confirmEvent`需要在页面的`.js`文件中定义，如： ```javascript Page({ _cancelEvent: function() { // 处理取消事件 }, _confirmEvent: function() { // 处理确认事件 } }) ``` 通过这些代码实例，可以发现，自定义组件实际上是小程序中的一个封装好的模块，它具有自己的模板、样式、逻辑和配置。自定义组件的这些特性，使得小程序开发者可以将常用的界面元素和逻辑抽象成组件，以提高开发效率和维护的便捷性。