微信小程序 - 组件

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

一、基础组件

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

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

二、自定义组件

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

创建自定义组件

• 点击 +，创建 components 目录
  

• 在 components目录上右键，新建目录， 创建 list 自定义组件目录
  

• 在 自定义组件 目录上右键，新建Component组件，生成 自定义组件 文件
  
  自定义组件配置

• 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;
}

使用效果

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