基础组件

框架为开发者提供了一系列基础组件，类似HTML里的基础标签元素。

但uni-app的组件与HTML不同，而是与微信小程序相同，更适合手机端使用。

虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发。基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。

DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开发的组件也收录到插件市场。

什么是组件：

• 组件是视图层的基本组成单元。
• 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<template>
    <view>
        <tagname property="value">
            content
        </tagname>
    </view>
</template>

Tips

• 所有组件与属性名都是小写，单词之间以连字符-连接。
• 根节点为 <template>，这个 <template> 下只能有一个根<view>组件。
• 平台差异说明若无特殊说明，则表示所有平台均支持。

属性类型

共同属性类型

所有组件都有的属性：

特殊属性

几乎所有组件都有各自自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。

组件列表

基础组件分为以下八大类：

视图容器（View Container）：

基础内容（Basic Content）：

表单组件（Form）：

导航（Navigation）：

媒体组件（Media）：

地图（Map）：

画布（Canvas）：

webview（Web-view）：

平台开放数据（Open-data）：

扩展组件（uni-ui）：

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

注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。

web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。

uni-ui支持npm安装和zip下载安装2种方式。

npm安装参考：https://ext.dcloud.net.cn/plugin?id=55

下表为uni-ui的扩展组件清单，点击每个组件可单独安装。

更多组件

除了基础组件、uni-ui，插件市场还有更多扩展组件、模板，包括前端组件和原生扩展组件，具体见插件市场。

关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题，参考http://ask.dcloud.net.cn/article/35489

发现错误？想参与编辑？在 GitHub 上编辑此页面！