前言：本文重点记录的是uniapp如何封装一个自定义组件，以swiper组件为例。

一、创建组件目录

官方文档中的easycom组件规范中可以看到这样一句话：

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构。就可以不用引用、注册，直接在页面中使用。

所以当我们要做一个swiper自定义组件时，就需要新建components目录，再新建组件--输入组件名称-勾选创建同名目录

 这样创建的组件就不用引入，可以直接使用

二、写自定义组件代码

这里用的是内置组件swiper，相关参数可以看官方文档，很清晰

<template><view><swiper class="banner" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000":duration="1000"><swiper-item class="banner_item"><text>1</text></swiper-item><swiper-item class="banner_item"> <text>2</text></swiper-item><swiper-item class="banner_item"> <text>3</text></swiper-item></swiper></view>
</template><script>export default {name: "home-swiper",data() {return {};}}
</script><style lang="scss">.banner {padding: 20rpx;.banner_item {width: 100%;background-color: aqua;}}
</style>

三、使用自定义组件

因为我们是按照“easycom组件规范”创建的自定义组件，所以在使用时可以直接使用，不用引入和注册。

<home-swiper></home-swiper>

四、插件市场的组件也可以直接使用

这里以uni-icons 图标为例

 1、可以直接点击下载插件并导入HBuilderX，然后根据指示就可以完成

 

2、也可以点击下载示例项目ZIP

然后解压后将uni-icons_2.0.9_example\uni_modules\uni-icons\components里面的uni-icons复制到自己项目里的components文件夹里，也可以无需引入直接使用