小程序学习06——uniapp组件常规引入和easycom引入语法

news2025/1/6 6:24:17

一组件注册

1.1 组件全局注册

1.2 组件全局引入

1.3 组件局部引入

页面引入组件方式

1.3.1 传统vue规范：

1.3.2 通过uni-app的easycom

二组件的类型

2.1 基础组件列表

一组件注册

1.1 组件全局注册

（a）新建compoents文件夹用于存放组件文件

（b）在myCompoents文件夹中新建组件compoent

1.2 组件全局引入

（a）main.js 里进行全局导入和注册

（b）在index.vue 里，template中以标签的形式直接使用组件

（c）即可在页面中进行使用，可以在不同页面中直接使用

1.3 组件局部引入

页面引入组件方式

1.3.1 传统vue规范：

（安装、引用、注册）在 index.vue 页面中，通过 import 方式引入组件，在 components 选项中定义你想要使用的组件。

import AComponent from '../../myComponents/component.vue'

1.3.2 通过uni-app的easycom

将组件引入精简为一步。

easycom是自动开启的，不需要手动开启；
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

路径规范指：

（a）安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue

（b）安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

工程目录：

	
┌─components
│  └─navbar
│    └─navbar.vue      符合easycom规范的组件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件
   └─uni_modules
     └─uni-list
       └─components
         └─uni-list
           └─ uni-list.vue

二组件的类型

Uniapp组件主要分为两类：

内置组件：由Uniapp框架提供的组件，涵盖了常见的UI元素和功能，如按钮（button）、输入框（input）、图片（image）等。
自定义组件：开发者根据实际需求自行创建的组件，可以包含复杂的逻辑和样式。

2.1 基础组件列表

基础组件分为以下十几大类：

视图容器（View Container）：

组件名	说明
view	视图容器，类似于HTML中的div
scroll-view	可滚动视图容器
swiper	滑块视图容器，比如用于轮播banner
match-media	屏幕动态适配组件，比如窄屏上不显示某些内容
movable-area	可拖动区域
movable-view	可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view	可覆盖在原生组件的上的文本组件
cover-image	可覆盖在原生组件的上的图片组件

基础内容（Basic Content）：

组件名	说明
icon	图标
text	文字
rich-text	富文本显示组件
progress	进度条

表单组件（Form）：

标签名	说明
button	按钮
checkbox	多项选择器
editor	富文本输入框
form	表单
input	输入框
label	标签
picker	弹出式列表选择器
picker-view	窗体内嵌式列表选择器
radio	单项选择器
slider	滑动选择器
switch	开关选择器
textarea	多行文本输入框