微信小程序 自定义组件

1. 微信小程序 自定义组件

  微信小程序支持组件化开发，这有助于我们复用代码，提高开发效率。下面我将给出一个简单的微信小程序组件化示例，包括一个自定义组件的创建和使用。

1.1. 创建自定义组件

  首先，在项目的 components 目录下创建一个新的组件文件夹，比如命名为 my-component。在该文件夹内，至少包含三个文件：my-component.js（组件的逻辑）、my-component.json（组件的配置文件）、my-component.wxml（组件的结构）、my-component.wxss（组件的样式）。

1.1.1. my-component.json

  配置文件声明了这是一个组件。

{  
  "component": true,  
  "usingComponents": {}  
}

1.1.2. my-component.wxml

  组件的模板，它包含一个文本节点，文本内容通过数据绑定从组件的JS文件中获取.

<view class="inner">  
  <text>{{text}}</text>  
</view>

1.1.3. my-component.wxss

  组件的样式文件。

.inner {  
  padding: 20rpx;  
  border: 1px solid #ccc;  
  margin-top: 10rpx;  
}

1.1.4. my-component.js

  组件的样式文件。

Component({  
  properties: {  
    // 这里定义了组件的外部属性  
    text: {  
      type: String,  
      value: 'Hello, this is a custom component!'  
    }  
  },  
  methods: {  
    // 这里定义组件的方法  
    // 示例：无  
  }  
})

1.2. 在页面中使用自定义组件

  在页面的 JSON 配置文件中声明组件

1.2.1. customView.json

  首先，在需要使用该组件的页面的 JSON 配置文件中，声明组件。比如，在 pages/customView/customView.json 中：

{  
  "backgroundColor": "#f6f6f6",
  "navigationBarBackgroundColor": "#3691FB",
  "navigationBarTitleText": "自定义组件",
  "enablePullDownRefresh": true,
  "usingComponents": {  
    "my-component": "../../component/my-component/my-component"  
  }  
}

1.2.2. customView.wxml

   在页面的 WXML 文件中使用组件
  然后，在该页面的 WXML 文件中，就可以像使用基础组件一样使用自定义组件了。比如，在 pages/customView/customView.wxml 中：

<view>  
  <my-component text="你好，我是自组件"></my-component>  
</view>

  这里，我们给 my-component 组件的 text 属性传递了一个新的值 “Hello, this is a test!”。

1.2.3. customView.wxml 预览和调试

  完成上述步骤后，你就可以在微信开发者工具中预览和调试你的小程序了。如果一切正常，你应该能在页面上看到由 my-component 组件渲染的文本内容。
  这就是微信小程序组件化的一个基本示例。通过组件化，你可以将复杂的页面拆分成多个可复用的组件，从而提高开发效率和代码的可维护性。