uniapp开发微信小程序笔记4-自定义组件

前言：本文重点记录的是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文件夹里，也可以无需引入直接使用