微信小程序 - 组件-蒲公英云

微信小程序 - 组件

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

一、基础组件

基础组件主要分为：视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、开放能力、原生组件、无障碍访问。
微信小程序官方文档 - 组件：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文件

{
{ innerText }}

自定义组件使用

在使用页面配置

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

before
after

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