微信小程序 - 组件

深碍√TFBOYSˉ_ 2021-12-05 17:47 581阅读 0赞

> 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。

### 一、基础组件 ###

> 基础组件主要分为：**视图容器**、**基础内容**、**表单组件**、**导航**、**媒体组件**、**地图**、**画布**、**开放能力**、**原生组件**、**无障碍访问**。  
> 微信小程序官方文档 - 组件：[https://developers.weixin.qq.com/miniprogram/dev/component/][https_developers.weixin.qq.com_miniprogram_dev_component]

使用以上基础组件，可以快速搭建视图层。具体使用方法详见官方文档。

### 二、自定义组件 ###

> 自定义组件：类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

创建自定义组件

*  点击 **+**，创建 **components** 目录  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]
 *  在 **components**目录上右键，新建目录， 创建 **list** 自定义组件目录  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]
 *  在 **自定义组件** 目录上右键，新建**Component组件**，生成 **自定义组件** 文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]  
    自定义组件配置
 *  json文件

{ 
      "component": true, // 用于声明自定义组件
      "usingComponents": { }
    }

*  js 文件

Component({ 
      options: { 
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      externalClasses: ['my-list-class'], // 使用外部样式类
      // 组件自定义属性
      properties: { 
        innerText: {  type: String, value: "Default Component" }
      },
      // 组件基础数据 
      data: { 
      },
      // 组件方法
      methods: { 
      }
    })

*  wxml文件

<view>
      <slot name="before"></slot>  
      <text>{
       { innerText }}</text>
      <slot name="after"></slot> 
    </view>

自定义组件使用

*  在使用页面配置

{ 
      "usingComponents": { 
        "List": "../../components/list/list"  // 定义要使用的自定义组件
      },
      "navigationBarTitleText": "Demo"
    }

<List class="my-list-class" innerText="自定义组件">
      <view slot="before">before</view>
      <view slot="after">after</view>
    </List>

/* 外部样式类 */
    .my-list-class { 
      margin-top: 10px;
      text-align: center;
    }

使用效果  
![在这里插入图片描述][20190717142317394.png]

> 微信小程序官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]

[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211205/f3d9bc38a189453794b456ffab9e4982.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211205/0d66321179d648148b892723b27a74c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211205/00bad57fa8a44b60bee3b9d177b490d9.png
[20190717142317394.png]: /images/20211205/c292e36d873b432294017622a5645005.png
[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/