探索uni-app：构建跨平台应用的神奇工具-阿里云开发者社区

uni-app 是一个基于 Vue.js 的跨平台开发框架，它可以同时构建运行在多个平台的应用程序，如小程序、H5、App、快应用等

uni-app 内置了一些常用的组件，以下是其中一些常见的内置组件

📚1. 视图容器类组件

⚡ `<view>`：视图容器，类似于div元素

以下是一个简单的 uni-app 代码示例，展示了如何使用 <view> 组件创建视图容器：

<template>
  <view class="container">
    <view class="box">
      <view class="content">
        <text>这是一个视图容器示例</text>
      </view>
    </view>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  background-color: #f5f5f5;
  padding: 20px;
}
.content {
  text-align: center;
}
</style>

在上述示例中，我们使用了 <view> 组件创建了一个视图容器，并使用了内联样式和类选择器来设置容器的样式。

外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 display: flex 和相关属性将内容居中显示。
内层的 <view> 标签具有 class="box"，设置了容器的背景颜色为 #f5f5f5，并添加了一些内边距。
<text> 标签位于最内层的 <view> 容器中，显示文本内容。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。注意，在实际开发中，您需要根据需求来调整样式和布局，以适应您的具体情况。

⚡`<scroll-view>`：可滚动的视图容器

以下是一个简单的 uni-app 代码示例，展示了如何使用 <scroll-view> 组件创建可滚动的视图容器：

<template>
  <view class="container">
    <scroll-view class="scroll-view" scroll-y>
      <view class="content">
        <text v-for="index in 20" :key="index">这是第{{ index }}行文本</text>
      </view>
    </scroll-view>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
}
.scroll-view {
  height: 100%;
}
.content {
  padding: 20px;
}
</style>

在上述示例中，我们使用了 <scroll-view> 组件创建了一个可滚动的视图容器，并使用了类选择器来设置容器的样式。

使用 scroll-y 属性启用垂直滚动。
外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度）。
<scroll-view> 组件具有 class="scroll-view"，设置了容器的高度为100%。
内部的 <view> 标签具有 class="content"，设置了一些内边距。
<text> 标签位于最内层的 <view> 容器中，使用 v-for 循环生成了多行文本内容。

通过使用 <scroll-view> 组件，当内容超出容器高度时，用户就可以在垂直方向上滚动视图。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。请注意，在实际开发中，您需要根据需求来调整样式和布局以适应您的具体情况，并根据实际内容来填充 <text> 标签中的文本。

📚2. 基础内容类组件

⚡`<text>`：文本内容，类似于span元素

以下是一个简单的 uni-app 代码示例，展示了如何使用 <text> 组件来显示文本内容：

<template>
  <view class="container">
    <text class="text">Hello, World!</text>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-size: 20px;
}
</style>

在上述示例中，我们使用了 <text> 组件来显示文本内容，并使用了类选择器来设置文本的样式。

外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 display: flex 和相关属性将文本内容居中显示。
<text> 标签具有 class="text"，设置了文本的字体大小为20px。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。注意，在实际应用中，您可以替换 <text> 标签中的文本内容以显示您想要的具体文本信息，并根据需要调整文本样式。

⚡`<icon>`：图标组件，支持系统图标和自定义图标

在 uni-app 中，可以使用 <uni-icons> 组件来实现图标的显示，支持系统图标和自定义图标。

以下是一个示例代码，展示了如何使用 <uni-icons> 组件显示系统图标和自定义图标：

<template>
  <view class="container">
    <!-- 显示系统图标 -->
    <uni-icons name="check" size="32"></uni-icons>
    <!-- 显示自定义图标 -->
    <uni-icons name="my-icon" size="32"></uni-icons>
  </view>
</template>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
</style>
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
export default {
  components: {
    'uni-icons': '@/components/uni-icons/uni-icons' // 请根据实际路径修改引用组件的路径
  }
};
</script>

在上述示例中，我们通过 <uni-icons> 组件来显示图标，并传递了一些属性：

name：指定要显示的图标名称。对于系统图标，可以使用 Uni-App 官方提供的图标库中的名称，例如 “check” 表示勾选图标；对于自定义图标，可以使用自己定义的图标名称。
size：指定图标的大小，单位为像素。

您需要先下载并导入 <uni-icons> 组件到项目中，然后根据实际路径修改引用组件的路径。注意，自定义图标需要将对应的图标文件放置在项目中，并在 <uni-icons> 组件中进行相应的配置。

通过上述方式，您可以在 uni-app 中使用 <uni-icons> 组件来显示系统图标和自定义图标。

📚3. 表单组件

⚡`<input>`：输入框组件

以下是一个简单的 uni-app 代码示例，展示了如何使用 <input> 组件创建输入框：

<template>
  <view class="container">
    <input class="input" type="text" placeholder="请输入内容" />
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input {
  width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在上述示例中，我们使用了 <input> 组件创建了一个文本输入框，并使用了类选择器来设置输入框的样式。

外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 display: flex 和相关属性将输入框居中显示。
<input> 标签具有 class="input"，设置了输入框的宽度为200px、高度为40px，并设置了边框样式、内边距。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。该输入框将显示一个占位符文本 “请输入内容”，用户可以在输入框中输入文本内容。根据实际需求，您可以自行调整输入框的样式和属性，例如更改输入框类型、更改占位符文本等。

⚡`<textarea>`：多行文本输入组件

以下是一个简单的 uni-app 代码示例，展示了如何使用 <textarea> 组件创建多行文本输入框：

<template>
  <view class="container">
    <textarea class="textarea" placeholder="请输入内容"></textarea>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textarea {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在上述示例中，我们使用了 <textarea> 组件创建了一个多行文本输入框，并使用了类选择器来设置输入框的样式。

外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 display: flex 和相关属性将多行文本输入框居中显示。
<textarea> 标签具有 class="textarea"，设置了多行文本输入框的宽度为200px、高度为100px，并设置了边框样式、内边距。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，然后查看效果。该多行文本输入框将显示一个占位符文本 “请输入内容”，用户可以在输入框中输入多行文本内容。根据实际需求，您可以自行调整输入框的样式和属性，例如更改占位符文本、设置最大长度等。

其他表单组件（感兴趣可以在官网进行查阅）

<button>：按钮组件
<checkbox>：复选框组件
<radio>：单选框组件
<switch>：开关组件

📚4. 导航组件

⚡ `<navigator>`：页面跳转组件

在 uni-app 中，可以使用 <navigator> 组件进行页面跳转。<navigator> 组件可以实现在小程序和 APP 端的页面间跳转，并支持跳转传参、打开新页面等功能。

以下是一个示例代码，展示了如何使用 <navigator> 组件进行页面跳转：

<template>
  <view class="container">
    <!-- 在当前页面跳转到目标页面 -->
    <navigator url="/pages/targetPage"></navigator>
    <!-- 带参数跳转到目标页面 -->
    <navigator url="/pages/targetPage?id=123&name=John"></navigator>
    <!-- 在新窗口打开目标页面 -->
    <navigator url="/pages/targetPage" open-type="navigate"></navigator>
  </view>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
</style>
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
export default {};
</script>

在上述示例中，我们使用 <navigator> 组件来实现页面跳转，并传递了一些属性：

url：指定要跳转的目标页面路径。需要根据实际情况修改为目标页面的路径，例如 “/pages/targetPage”。
open-type：指定打开方式。默认为 “navigate”，表示在当前页面内打开目标页面；如果设置为 “navigate”，则会在新的窗口中打开目标页面。

您需要根据实际情况修改跳转目标的路径，并可根据需要传递参数。请注意，在使用 <navigator> 组件进行页面跳转时，需要提前配置好目标页面的路由信息。

通过上述方式，您可以在 uni-app 中使用 <navigator> 组件进行页面跳转，并根据需要传递参数、打开新页面等。

⚡`<tabbar>`：底部选项卡组件

在 uni-app 中，可以使用 <tabbar> 组件创建底部选项卡，用于在不同页面之间进行切换。<tabbar> 组件可以帮助您实现底部导航栏的功能。

以下是一个示例代码，展示了如何使用 <tabbar> 组件创建底部选项卡：

<template>
  <view class="container">
    <tabbar>
      <!-- 配置选项卡项 -->
      <tabbar-item icon="home" text="首页" url="/pages/home"></tabbar-item>
      <tabbar-item icon="discover" text="发现" url="/pages/discover"></tabbar-item>
      <tabbar-item icon="profile" text="个人" url="/pages/profile"></tabbar-item>
    </tabbar>
    <!-- 显示当前页面内容 -->
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
.content {
  flex-grow: 1;
}
</style>
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
export default {};
</script>

在上述示例中，我们使用 <tabbar> 组件来创建底部选项卡，并配置了三个选项卡项：

<tabbar-item>：每个选项卡项对应一个<tabbar-item>组件。

icon：指定选项卡的图标。可以使用 Uni-App 官方提供的图标库中的名称，例如 “home” 表示首页图标。
text：指定选项卡的文本。
url：指定选项卡点击后跳转的页面路径。需要根据实际情况修改为目标页面的路径，例如 “/pages/home”。

您可以根据需要配置更多选项卡项，并在每个选项卡项中设置图标、文本和跳转路径。

通过上述方式，您可以在 uni-app 中使用 <tabbar> 组件创建底部选项卡，实现页面间的切换。请注意，在创建选项卡时，需要提前配置对应页面的路由信息。

📚5. 媒体组件

⚡`<image>`：图片内容，用于显示图片

以下是一个简单的 uni-app 代码示例，展示了如何使用 <image> 组件来显示图片内容：

<template>
  <view class="container">
    <image class="image" src="../assets/image.jpg"></image>
  </view>
</template>
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image {
  width: 200px;
  height: 200px;
}
</style>

在上述示例中，我们使用了 <image> 组件来显示图片内容，并使用了类选择器来设置图片的样式。

外层的 <view> 标签具有 class="container"，设置了容器的宽度为100%、高度为100vh（视窗高度），并使用 display: flex 和相关属性将图片内容居中显示。
<image> 标签具有 class="image"，设置了图片的宽度为200px、高度为200px。
图片的路径使用 src 属性指定，这里的路径假设为 ../assets/image.jpg，您可以根据实际情况替换为您项目中的图片路径。

您可以将以上代码复制到您的 uni-app 项目中的页面文件中，并将实际的图片路径指定给 src 属性，然后查看效果。请确保图片存在于指定的路径中，并根据需要调整图片的大小和容器的样式。

⚡`<audio>`：音频播放组件

在 uni-app 中，可以使用 <audio> 组件来实现音频的播放功能。<audio> 组件是用于在页面中嵌入音频内容的标签。

以下是一个示例代码，展示了如何使用 <audio> 组件播放音频：

<template>
  <view class="container">
    <view class="controls">
      <!-- 播放按钮 -->
      <button @tap="playAudio">播放</button>
      <!-- 暂停按钮 -->
      <button @tap="pauseAudio">暂停</button>
    </view>
    <!-- 音频组件 -->
    <audio :src="audioUrl" :id="audioId" :loop="loop" @ended="audioEnded"></audio>
  </view>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
.controls {
  margin-top: 20px;
}
</style>
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
export default {
  data() {
    return {
      audioUrl: 'https://example.com/audio.mp3', // 音频文件的 URL
      audioId: 'my-audio', // 音频组件的 ID
      loop: false // 是否循环播放
    };
  },
  methods: {
    playAudio() {
      // 播放音频
      uni.createSelectorQuery().select('#' + this.audioId).fields({ context: true }, (res) => {
        if (res) {
          res.context.play();
        }
      }).exec();
    },
    pauseAudio() {
      // 暂停音频
      uni.createSelectorQuery().select('#' + this.audioId).fields({ context: true }, (res) => {
        if (res) {
          res.context.pause();
        }
      }).exec();
    },
    audioEnded() {
      // 音频播放结束时的回调函数
      console.log('音频播放结束');
    }
  }
};
</script>

在上述示例中，我们使用 <audio> 组件来播放音频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下：

在 data 中定义音频文件的 URL，可以将其替换为实际的音频文件 URL。
在 <audio> 组件中使用 :src 绑定音频文件的 URL，使用 :id 绑定音频组件的 ID，使用 :loop 绑定是否循环播放。
在按钮的点击事件处理方法中，使用 uni.createSelectorQuery() 方法获取音频组件的上下文对象，并调用 play() 方法来播放音频，或者调用 pause() 方法来暂停音频。
在 <audio> 组件上添加 @ended 事件监听器，当音频播放结束时，会触发 audioEnded 方法。

通过上述方式，您可以在 uni-app 中使用 <audio> 组件来实现音频的播放功能，并控制音频的播放和暂停。请注意，音频文件需要提前准备好并提供正确的 URL。

⚡`<video>`：视频播放组件

在 uni-app 中，可以使用 <video> 组件来实现视频的播放功能。<video> 组件是用于在页面中嵌入视频内容的标签。

以下是一个示例代码，展示了如何使用 <video> 组件播放视频：

<template>
  <view class="container">
    <view class="controls">
      <!-- 播放按钮 -->
      <button @tap="playVideo">播放</button>
      <!-- 暂停按钮 -->
      <button @tap="pauseVideo">暂停</button>
    </view>
    <!-- 视频组件 -->
    <video :src="videoUrl" :id="videoId" :poster="posterUrl" :autoplay="autoplay" :controls="controls" @ended="videoEnded"></video>
  </view>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
.controls {
  margin-top: 20px;
}
</style>
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4', // 视频文件的 URL
      posterUrl: 'https://example.com/poster.jpg', // 视频封面图片的 URL
      videoId: 'my-video', // 视频组件的 ID
      autoplay: false, // 是否自动播放
      controls: true // 是否显示控制条
    };
  },
  methods: {
    playVideo() {
      // 播放视频
      uni.createSelectorQuery().select('#' + this.videoId).fields({ context: true }, (res) => {
        if (res) {
          res.context.play();
        }
      }).exec();
    },
    pauseVideo() {
      // 暂停视频
      uni.createSelectorQuery().select('#' + this.videoId).fields({ context: true }, (res) => {
        if (res) {
          res.context.pause();
        }
      }).exec();
    },
    videoEnded() {
      // 视频播放结束时的回调函数
      console.log('视频播放结束');
    }
  }
};
</script>

在上述示例中，我们使用 <video> 组件来播放视频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下：

在 data 中定义视频文件的 URL、视频封面图片的 URL，可以将其替换为实际的视频文件 URL 和封面图片 URL。
在 <video> 组件中使用 :src 绑定视频文件的 URL，使用 :id 绑定视频组件的 ID，使用 :poster 绑定视频封面图片的 URL，使用 :autoplay 绑定是否自动播放，使用 :controls 绑定是否显示控制条。
在按钮的点击事件处理方法中，使用 uni.createSelectorQuery() 方法获取视频组件的上下文对象，并调用 play() 方法来播放视频，或者调用 pause() 方法来暂停视频。
在 <video> 组件上添加 @ended 事件监听器，当视频播放结束时，会触发 videoEnded 方法。

通过上述方式，您可以在 uni-app 中使用 <video> 组件来实现视频的播放功能，并控制视频的播放和暂停。请注意，视频文件和封面图片需要提前准备好并提供正确的 URL。

这只是 uni-app 内置组件的一小部分，还有许多其他组件可用于开发跨平台应用程序

您可以查阅官方文档以了解更多关于内置组件和其使用的详细信息：uni-app官方文档

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目

带你从入门到实战全面掌握 uni-app

探索uni-app：构建跨平台应用的神奇工具

📚1. 视图容器类组件

⚡ `<view>`：视图容器，类似于div元素

⚡`<scroll-view>`：可滚动的视图容器

📚2. 基础内容类组件

⚡`<text>`：文本内容，类似于span元素

⚡`<icon>`：图标组件，支持系统图标和自定义图标

📚3. 表单组件

⚡`<input>`：输入框组件

⚡`<textarea>`：多行文本输入组件

📚4. 导航组件

⚡ `<navigator>`：页面跳转组件

⚡`<tabbar>`：底部选项卡组件

📚5. 媒体组件

⚡`<image>`：图片内容，用于显示图片

⚡`<audio>`：音频播放组件

⚡`<video>`：视频播放组件

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

探索uni-app：构建跨平台应用的神奇工具

📚1. 视图容器类组件

⚡ <view>：视图容器，类似于div元素

⚡<scroll-view>：可滚动的视图容器

📚2. 基础内容类组件

⚡<text>：文本内容，类似于span元素

⚡<icon>：图标组件，支持系统图标和自定义图标

📚3. 表单组件

⚡<input>：输入框组件

⚡<textarea>：多行文本输入组件

📚4. 导航组件

⚡ <navigator>：页面跳转组件

⚡<tabbar>：底部选项卡组件

📚5. 媒体组件

⚡<image>：图片内容，用于显示图片

⚡<audio>：音频播放组件

⚡<video>：视频播放组件

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

⚡ `<view>`：视图容器，类似于div元素

⚡`<scroll-view>`：可滚动的视图容器

⚡`<text>`：文本内容，类似于span元素

⚡`<icon>`：图标组件，支持系统图标和自定义图标

⚡`<input>`：输入框组件

⚡`<textarea>`：多行文本输入组件

⚡ `<navigator>`：页面跳转组件

⚡`<tabbar>`：底部选项卡组件

⚡`<image>`：图片内容，用于显示图片

⚡`<audio>`：音频播放组件

⚡`<video>`：视频播放组件