uni-app 有哪些内置组件

• uni-app 有哪些内置组件
  • 内置组件分类
    • 基础组件：
    • 表单组件：
    • 导航组件：
    • 媒体组件：
    • 其他组件：
  • 联系与区别
  • 举例说明
  • 基础组件示例：
    • 表单组件示例：
• uni-app 的 内置组件和微信小程序的组件，有什么区别？
  • 共性
    • 设计理念：
    • 基础功能：
    • 数据绑定与事件处理：
  • 差异
    • 平台兼容性：
    • 组件体系：
    • 扩展性与生态：
    • 开发工具与环境：

uni-app 有哪些内置组件

uni-app 提供了一系列内置组件，这些组件专为移动端应用设计，与小程序组件体系相似，能够适应不同平台（如iOS、Android、Web、小程序等）的特性并提供一致的开发体验。

以下是对uni-app内置组件的概述、它们之间的联系与区别，以及举例说明：

内置组件分类

基础组件：

基础组件是最基本的视图单元，用于构建页面布局和承载内容。它们通常不具备复杂的交互或特定功能，而是作为其他组件或内容的容器。

• view: 类似于HTML中的div，用于包裹和定位其他组件，可以设置样式、布局属性等。
• text: 用于显示文本内容，支持富文本样式。
• image: 显示图片资源，支持网络图片、本地图片和base64编码的图片。
• scroll-view: 可滚动的视图容器，允许用户在其中上下或左右滚动内容。
• swiper/swiper-item: 轮播组件，swiper用于创建轮播容器，swiper-item代表轮播中的每一项内容。
• list/cell: 列表组件，用于展示数据列表，cell是列表项。

表单组件：

用于收集用户输入或选择的数据，常用于创建表单界面。

• input: 文本输入框，用于获取用户输入的文本。
• textarea: 多行文本输入框。
• switch: 开关组件，表示两种状态（开/关）的选择。
• slider: 滑块组件，用户可以通过滑动来选择一个范围内的值。
• picker/picker-view: 选择器组件，用于从一组选项中选择一个或多个值。
• radio/checkbox: 单选按钮和多选框，分别用于单选或多选场景。
• form: 表单容器，用于组织表单组件，并提交表单数据。

导航组件：

用于页面间的跳转和导航。

• navigator: 跳转链接，点击后可以打开内部或外部页面、小程序、网页等。
• tabbar/tabbar-item: 底部导航栏，用于切换不同的主界面或功能模块。

媒体组件：

用于播放音频、视频或显示地图等多媒体内容。

• audio: 音频播放组件。
• video: 视频播放组件，支持多种格式和控制选项。
• map: 地图组件，可以嵌入地图、添加标记、路线规划等功能。

其他组件：

包括特定功能或场景的组件，如：

• button: 按钮组件，触发特定操作或事件。
• loading/loading-indicator: 加载提示组件，显示加载状态。
• modal/actionsheet/popup: 弹窗组件，用于显示提示、确认对话框或自定义弹出内容。
• progress/stepper: 进度条和步进器组件，分别用于展示进度和数值递增/递减。
• badge: 徽标组件，用于显示未读数、数字提示等。

联系与区别

• 联系：

  • 层次结构：所有组件都属于 uni-app 组件体系，遵循统一的 Vue.js 语法和数据绑定机制。
  • 组合性：基础组件通常与其他组件（如表单组件、媒体组件等）结合使用，形成复杂的应用界面。
  • 交互性：组件间可通过事件监听、数据传递等方式进行通信，实现复杂的业务逻辑。

• 区别：

  • 功能定位：各组件服务于不同的功能需求，如布局、数据收集、页面跳转、媒体播放等。
  • 交互方式：表单组件侧重于用户输入和选择，导航组件处理页面间关系，媒体组件则涉及视听体验。
  • 平台特异性：某些组件（如map、video）可能因平台差异而在功能或性能上有所不同，uni-app 会尽可能地进行适配以保证跨平台一致性。

举例说明

基础组件示例：

<view class="container">
  <text>欢迎来到uni-app示例</text>
  <image src="/path/to/image.png" mode="aspectFill"></image>
  <scroll-view scroll-y="true">
    <view v-for="(item, index) in listData" :key="index">
      <text>{{ item.title }}</text>
      <image :src="item.imageSrc"></image>
    </view>
  </scroll-view>
</view>

在这个例子中，view用于创建一个容器并设置样式，text显示欢迎文字，image展示图片，scroll-view承载可滚动的内容列表。列表中的每一项由view包裹，包含一个text标题和一个image。

表单组件示例：

<form @submit="onSubmit">
  <input type="text" placeholder="请输入用户名" v-model="username" />
  <input type="password" placeholder="请输入密码" v-model="password" />
  <checkbox-group v-model="selectedRoles">
    <label><checkbox value="admin">管理员</checkbox></label>
    <label><checkbox value="user">普通用户</checkbox></label>
  </checkbox-group>
  <button form-type="submit">登录</button>
</form>

这个例子展示了如何使用form组织表单组件，包括input（用于用户名和密码输入）、checkbox-group和checkbox（用于多选角色）。用户填写信息后，点击button提交表单，触发onSubmit方法处理提交逻辑。

通过上述例子，可以看到 uni-app 的内置组件在功能上相互独立，但又可以灵活组合，共同构建出丰富多样的移动应用界面和交互体验。每个组件都有其特定的用途和属性，根据应用场景的不同，开发者可以选择合适的组件进行开发。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

uni-app 的 内置组件和微信小程序的组件，有什么区别？

uni-app 的内置组件和微信小程序的组件在设计理念、功能特性、使用方式以及跨平台支持等方面存在一些共性和差异。

以下是它们之间的主要区别：

共性

设计理念：

• 封装性：两者都强调组件化开发，将页面中的各个功能模块封装为独立的组件，提高代码复用性和开发效率。
• 声明式编程：都采用声明式编程风格，通过声明组件的属性、事件和数据绑定来描述UI状态和交互逻辑，而非直接操作DOM。

基础功能：

• 基础组件：都提供了类似view、text、image、button、input、scroll-view等基础视图组件，用于构建页面的基本结构和布局。
• 表单组件：均支持form、picker、slider、switch、checkbox、radio等表单元素，便于收集用户输入和选择。
• 导航组件：都有navigator用于页面跳转，以及类似tabbar的导航栏组件。
• 媒体组件：均包含audio、video等媒体播放组件，以及map地图组件。

数据绑定与事件处理：

• 数据驱动：两者均支持基于Vue.js的数据绑定语法（如v-bind和v-model），实现数据与视图的实时同步。
• 事件响应：都使用Vue风格的事件绑定（如v-on或简写@），处理用户的交互行为。

差异

平台兼容性：

• uni-app：设计目标是实现一次编写，多端运行。其内置组件不仅适用于微信小程序，还能编译输出到H5、App（Android/iOS）、支付宝小程序、字节跳动小程序等多个平台，自动适配各平台的特性和差异。
• 微信小程序：组件设计专为微信小程序环境服务，仅适用于微信小程序平台，不具备跨平台能力。

组件体系：

• uni-app：虽然在设计理念和基本功能上与微信小程序组件相似，但可能存在细微差别，如属性名称、默认行为或API接口。uni-app会尽可能保持与微信小程序组件的兼容性，同时可能添加一些额外的属性或功能以增强跨平台能力或提供更丰富的功能支持。
• 微信小程序：组件体系完全遵循微信官方规范，具有严格的平台特性和限制，如样式单位、文件大小限制、网络请求规则等。

扩展性与生态：

• uni-app：由于其跨平台特性，uni-app生态中可能会包含针对不同平台特性的扩展组件或插件，以及针对uni-app优化的第三方库。开发者可以在uni-app项目中直接使用这些资源，无需考虑特定平台的适配问题。
• 微信小程序：生态主要围绕微信小程序平台，扩展组件和插件通常针对微信小程序的特性和限制进行设计。开发者在使用时需确保资源与微信小程序平台兼容。

开发工具与环境：

• uni-app：推荐使用HBuilderX作为开发工具，集成了项目管理、代码编辑、调试、预览、打包发布等功能，并支持Vue.js的开发体验。
• 微信小程序：使用微信官方提供的微信开发者工具进行开发、调试和发布，工具特性和功能紧密围绕微信小程序平台定制。

uni-app 的内置组件在设计理念、基础功能和编程模式上与微信小程序的组件相似，但uni-app组件更注重 跨平台兼容性，可能在细节上有调整以适应不同平台，并且拥有更广泛的平台支持和扩展生态。

微信小程序组件则深度契合微信平台规范和限制，生态资源专注于微信小程序环境。

选择使用哪个取决于项目对跨平台需求、平台特性和生态资源的依赖程度。