uni-app组件部分概况

uni-app的组件主要涉及下面几部分知识

1.vue组件在文件中的结构

根据vue单文件组件规范,每个vue文件都由一个template组件包裹唯一一个view组件,具体的内容在view组件中实现,格式如下:

<template>
    <view>
        ...
    </view>
</template>

 

2.组件的属性

2.1组件属性类型

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型。
Number	数字	1, 2.5
String	字符串	"string"
Array	数组	[ 1, "string" ]
Object	对象	{ key: value }
EventHandler	事件处理函数名	handlerName 是 methods 中定义的事件处理函数名
Any	任意属性

 

 

 

 

 

 

 

 

 

 

2.2组件公共属性

属性名	类型	描述	注解
id	String	组件的唯一标示	一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
ref	String	vue中组件的唯一标示	用来给子组件注册引用信息，详见 Vue 文档
class	String	组件的样式类	在对应的 css 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否隐藏	所有组件默认是显示的
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
@*	EventHandler	组件的事件	详见各组件详细文档，事件绑定参考 事件处理器

 

 

 

 

 

 

 

 

 

 

3.js变量在组件的使用,方式有两种

• 在内容区使用时，使用两个花括号来包裹，如下面的{{buttonText}}
• 在属性值中使用时，属性名的前面要加冒号前缀

实例:

<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>

 

4.组件的事件

组件的事件也是组件的属性,只不过这个属性前缀是@符号,要处理事件需要给这个事件属性指定一个在script中定义的方法

实例:

<template>
    <view>
        <button size="mini" @click="goto('/pages/about/about')">按钮</button>
    </view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                console.log("按钮被点击了，且传入的参数是：" + url)
            }
        }
    }
</script>

 

接下来开始去看uni-App提供的组件,分为基础组件和扩展组件两部分

5.基础组件

• 视图容器

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

• 基础内容

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

• 表单组件

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

• 路由与页面跳转

组件名	说明
navigator	页面链接。类似于HTML中的a标签

• 媒体组件

组件名	说明
audio	音频
camera	相机
image	图片
video	视频
live-player	直播播放
live-pusher	实时音视频录制，也称直播推流

• 地图组件

组件名	说明
map	地图

• 画布

组件名	说明
canvas	画布

• webview

组件名	说明
web-view	web浏览器组件

• 广告

组件名	说明
ad	广告组件
ad-draw	沉浸视频流广告组件

• 页面属性配置节点

组件名	说明
custom-tab-bar	底部tabbar自定义组件
navigation-bar	页面顶部导航
page-meta	页面属性配置节点

• UniCloud

组件名	说明
unicloud-db组件	uniCloud数据库访问和操作组件

• 各平台专用组件

　　　　在小程序平台和nvue平台，还有一些专有组件，比如open-data，详见左侧导航

6.扩展组件

　　所有非基础组件都是扩展组件,如果直接使用基础组件开发,效率是低下的,我们不应该重复造轮子

7.easycom组件规范

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

8.uni_module规范

uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。

插件开发者，可以像开发uni-app项目一样编写一个uni_modules插件，并在HBuilderX中直接上传至插件市场。

插件使用者，可以在插件市场查找符合自己需求的uni_modules插件，使用HBuilderX 3.1.0+直接导入到自己的uni-app项目中。后续还可以在HBuilderX中直接点右键升级插件。

　　具体可以查看: https://uniapp.dcloud.io/uni_modules

9.uniCloud组件

uniCloud是DCloud提供的、配套uni-app的云开发服务。

uni-app的基础组件中，有一个特殊基础组件是：<unicloud-db>组件。

它可以在前端直接获取和操作uniCloud的云端数据库。

相关文档详见：unicloud-db组件

10.datacom

datacom组件是一种数据驱动的、可云端一体的组件。

传统组件只涉及前端概念，而datacom拉通了uniCloud云端数据，是uni-app+uniCloud协同开发的必备提效工具。

相关文档详见：datacom组件

11.扩展组件（uni-ui）

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

详解: https://uniapp.dcloud.io/component/README?id=uniui

 

这里只是一个大概整理,后面会挨个详细的学习各个组件