【微信小程序篇】- 组件

最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。

因为最近某些原因，所处的环境网络没办法科学上网，剩下的页面优化需要自己做。

组件

大家都比较讨厌屎山代码。所以我们在不断增加业务代码的过程中，需要不断的重构代码。在代码的世界里有个词叫封装，相信这个词大家都不陌生，封装的方式有很多种，在前端的世界里有个东西叫组件，个人认为这也是封装的一部分。当然还有就是工具封装，之前有写一篇文章叫【微信小程序篇】-请求封装，这也是封装的一种方式。

微信小程序自定义组件

为什么在不论是VUE、小程序等会有一个组件的概念呢？

核心是为了把一些公用的页面代码、交互代码、样式代码封装为一个整体，让其他页面引用的时候，不需要再写重复代码，只需要引入组件，通过组件的方式进行页面渲染，不影响预期的设计，同时减少重复的代码量。这是组件最重要的应用场景。

1.组件的定义及使用

在微信小程序的官方开发文档中已经很明确了组件的定义，我们可以再一起来实际操作一番。我们一起来使用微信小程序原生实现一遍。

1.在目录components下创建组件目录demoCard；

2.在demoCard下面创建component（组件）；

3.确定组件创建成功：

3.1 查看demoCard.json中，component的值为true

javascript 复制代码

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

3.2 在demoCard.wxml中定义组件内容

html 复制代码

<view>这里是demo组件</view>

4.在页面中引入组件：

4.1 在页面的demo.json文件中增加组件引用

javascript 复制代码

{
    "usingComponents": {
        "dynamicCard": "/components/demoCard/demoCard"
    }
}

4.1 在页面的demo.wxml中使用组件

html 复制代码

<demoCard></demoCard>

2.外部数据传入组件

我们在实际使用中，经常需要把页面的数据传入到组件中，那么我们应该怎么传入呢？下面我们开始实际操作：

1.在demoCard.js/demoCard.ts（这里我使用的是ts）中的properties中定义我们需要的属性

javascript 复制代码

Component({
    /**
     * 组件的属性列表
     */
    properties: {
		dateStr: null
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

2.在使用组件的时候，把值符给属性

html 复制代码

<demoCard dateStr='测试传值'></demoCard>
<!-- 或者 -->
<demoCard dateStr='{{ demoDateStr }}'></demoCard>

3.在组件的demoCard.wxml中使用属性

html 复制代码

<view>这里是demo组件：{{ dateStr }}</view>

这里我们会发现，组件只要定义了属性，这些属性作为外部传值的承载，在组件内部页面我们可以和正常页面做数据使用。

关于组件就介绍到这里，如果有问题可以在评论区留言，记得三连哦。