微信小程序 -02
一、自定义组件1. 创建自定义组件在微信小程序中，自定义组件是指开发者创建的可以被重复使用的 UI 组件。要创建一个自定义组件，我们需要在 `components` 目录下新建一个 JSON 文件，例如 `my-component.json`。
```json{
"component": true,
"usingComponents": []
}
```
在这个例子中，我们只需要声明该文件是自定义组件（`"component": true"`），其他选项可以根据实际需求进行配置。
2. 引用组件引用组件有两种方式：全局引用和局部引用。
(1) 局部引用组件在页面中使用 `components` 属性，可以直接引入自定义组件。
```json{
"navigationBarTitleText": "Hello World",
"usingComponents": {
"myComponent": "/components/my-component"
}
}
```
在 WXML 中可以通过 `myComponent` 来引用这个组件。
```wxml
```
(2) 全局引用组件全局引用组件需要在 `app.json` 文件中进行配置。
```json{
"pages": [
"index/index",
"components/my-component"
],
"usingComponents": ["myComponent"]
}
```
然后在任何页面中都可以通过 `myComponent` 来引用这个组件。
3. 局部引用组件局部引用组件是指在一个页面中引入另一个页面的组件。这种方式通常用于需要共享一些 UI 组件或逻辑的场景。
```json{
"navigationBarTitleText": "Hello World",
"usingComponents": {
"myComponent": "/pages/components/my-component"
}
}
```
在 WXML 中可以通过 `myComponent` 来引用这个组件。
```wxml
```
4. 全局引用组件全局引用组件是指在所有页面中都能使用的组件。这种方式通常用于需要共享一些 UI 组件或逻辑的场景。
```json{
"pages": [
"index/index",
"components/my-component"
],
"usingComponents": ["myComponent"]
}
```
然后在任何页面中都可以通过 `myComponent` 来引用这个组件。
5. 全局引用和局部引用的建议* 如果一个组件需要被多个页面使用，应该将其设置为全局引用。
* 如果一个组件只需要在某个特定页面中使用，应该将其设置为局部引用。
二、自定义组件与页面的区别1. 组件和页面的区别组件和页面都是微信小程序中的基本构建块，但它们有着不同的作用和用途。
* 页面是用户直接访问的小程序界面，通常包含了一个或多个组件。
* 组件则是可以被重复使用的 UI 元素，可以在多个页面中使用。
2. 组件与页面的关系组件和页面之间存在着一种依赖关系。组件需要被引用到某个页面中才能显示出来，而页面则可以包含一个或多个组件来构成其界面。
三、自定义组件的应用场景1. 共享 UI 组件在微信小程序中，共享 UI 组件是非常常见的需求。例如，一个小程序可能需要在多个页面中使用相同的头部或底部导航栏，这时就可以创建一个自定义组件来实现。
2. 共享逻辑除了共享 UI 组件之外，自定义组件还可以用于共享逻辑。例如，一个小程序可能需要在多个页面中使用相同的登录或注册逻辑，这时就可以创建一个自定义组件来实现。
3. 高度定制化自定义组件还可以用于高度定制化的需求。在某些情况下，开发者可能需要根据具体需求创建一个非常复杂的 UI 组件，而不是使用现有的组件，这时就可以通过创建一个自定义组件来实现。
四、总结在微信小程序中，自定义组件是非常重要的构建块，它们可以帮助开发者共享 UI 组件和逻辑，从而提高开发效率。通过了解如何创建和引用自定义组件，以及它们与页面之间的关系，开发者可以更好地利用这些功能来构建出色的小程序应用。
