uni-app组件部分概况
uni-app的组件主要涉及下面几部分知识
1.vue组件在文件中的结构
根据vue单文件组件规范,每个vue文件都由一个template组件包裹唯一一个view组件,具体的内容在view组件中实现,格式如下:
<template> <view> ... </view> </template>
2.组件的属性
2.1组件属性类型
|
2.2组件公共属性
|
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
这里只是一个大概整理,后面会挨个详细的学习各个组件
