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

news2024/11/27 10:33:47

在这里插入图片描述

文章目录

  • 📚1. 视图容器类组件
    • ⚡ `<view>`：视图容器，类似于div元素
    • ⚡`<scroll-view>`：可滚动的视图容器
  • 📚2. 基础内容类组件
    • ⚡`<text>`：文本内容，类似于span元素
    • ⚡`<icon>`：图标组件，支持系统图标和自定义图标
  • 📚3. 表单组件
    • ⚡`<input>`：输入框组件
    • ⚡`<textarea>`：多行文本输入组件
  • 📚4. 导航组件
    • ⚡ `<navigator>`：页面跳转组件
    • ⚡`<tabbar>`：底部选项卡组件
  • 📚5. 媒体组件
    • ⚡`<image>`：图片内容，用于显示图片
    • ⚡`<audio>`：音频播放组件
    • ⚡`<video>`：视频播放组件
  • 附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

📈「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级
📚「个人主页」：阿珊和她的猫
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

  • Vue.js 和 Egg.js 开发企业级健康管理项目
  • 带你从入门到实战全面掌握 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> 组件来播放音频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下：

  1. 在 data 中定义音频文件的 URL，可以将其替换为实际的音频文件 URL。
  2. 在 <audio> 组件中使用 :src 绑定音频文件的 URL，使用 :id 绑定音频组件的 ID，使用 :loop 绑定是否循环播放。
  3. 在按钮的点击事件处理方法中，使用 uni.createSelectorQuery() 方法获取音频组件的上下文对象，并调用 play() 方法来播放音频，或者调用 pause() 方法来暂停音频。
  4. 在 <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> 组件来播放视频，并添加了控制按钮来实现播放和暂停功能。具体步骤如下：

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

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

这只是 uni-app 内置组件的一小部分，还有许多其他组件可用于开发跨平台应用程序
您可以查阅官方文档以了解更多关于内置组件和其使用的详细信息：uni-app官方文档

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

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/753252.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里大佬都在偷偷肝的 Java 程序优化笔记，程序性能提高了 5 倍！

阿里大佬都在偷偷肝的 Java 程序优化笔记，程序性能提高了 5 倍！

前言 此笔记从软件设计、编码和 JVM 等维度阐述性能优化的方法和技巧&#xff0c;分享资深架构师 Java 程序性能优化的宝贵经验&#xff0c;专注于 Java 应用程序的优化方法、技巧和思想&#xff0c;并深度剖析 JDK 部分的实现。具有较强的层次性和连贯性&#xff0c;深入剖析…
阅读更多...
wps插入图片显示不全、混乱

wps插入图片显示不全、混乱

问题如下&#xff1a; 原因&#xff1a; 格式混乱 解决办法&#xff1a; 1、统一格式&#xff0c;使用格式刷统一文档的格式 2、Ctrl A 全选&#xff0c;重新选择行距 3、重新粘贴图片&#xff08;选择嵌入型&#xff09;
阅读更多...
什么是事件循环 Event Loop

什么是事件循环 Event Loop

一、什么是事件循环 事件循环&#xff08;Event Loop&#xff09;是单线程的JavaScript在处理异步事件时进行的一种循环过程&#xff0c;具体来讲&#xff0c;对于异步事件它会先加入到事件队列中挂起&#xff0c;等主线程空闲时会去执行事件队列&#xff08;Event Queue&…
阅读更多...
（黑客）网络安全自学？你不要命啦！

（黑客）网络安全自学？你不要命啦！

前言 网络安全&#xff0c;顾名思义&#xff0c;无安全&#xff0c;不网络。现如今&#xff0c;安全行业飞速发展&#xff0c;我们呼吁专业化的 就职人员与大学生 &#xff0c;而你&#xff0c;认为自己有资格当黑客吗&#xff1f; 本文面向所有信息安全领域的初学者和从业人员…
阅读更多...
RPC和HTTP区别是什么？

RPC和HTTP区别是什么？

&#x1f3c6;今日学习目标&#xff1a; &#x1f340;RPC和HTTP区别是什么&#xff1f; ✅创作者&#xff1a;林在闪闪发光 ⏰预计时间&#xff1a;30分钟 &#x1f389;个人主页&#xff1a;林在闪闪发光的个人主页 &#x1f341;林在闪闪发光的个人社区&#xff0c;欢迎你的…
阅读更多...
二、遥感物理基础(3)大气对太阳辐射的影响

二、遥感物理基础(3)大气对太阳辐射的影响

前言 本文内容较为枯燥&#xff0c;是遥感的物理原理&#xff0c;作者已经尽量去帮助读者理解了&#xff0c;无论是精细的阅读还是走马观花&#xff0c;长期下来都能提高读者对专业知识的理解&#xff1b;作者非物理专业&#xff0c;对某些知识点的总结仅是个人理解&#xff0c…
阅读更多...
【Java】JVM执行流程、类加载过程和垃圾回收机制

【Java】JVM执行流程、类加载过程和垃圾回收机制

JVM执行流程执行引擎本地方法接口运行时数据区方法区堆虚拟机栈(线程私有)本地方法栈(线程私有)程序计数器(线程私有) 堆溢出问题类加载类加载的过程加载连接验证准备解析 初始化 双亲委派机制 垃圾回收死亡对象的判断算法引用计数算法可达性分析算法 垃圾回收的过程标记-清除算…
阅读更多...
Win11 锁屏、开机画面使用window聚焦 壁纸失效解决方案

Win11 锁屏、开机画面使用window聚焦 壁纸失效解决方案

1、设置>个性化>锁屏界面>个性化锁屏界面 切换为图片。 2、打开文件资源管理器&#xff0c;导航栏中点击查看>显示>勾选隐藏的项目。 3、打开C&#xff1a;\用户\你的用户\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_xxxxxxx\LocalSta…
阅读更多...
Docker安装Rabbitmq超详细教程

Docker安装Rabbitmq超详细教程

&#x1f680; Docker安装Rabbitmq保姆级教程 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1…
阅读更多...
检测到目标网站存在Bash Shell历史记录文件

检测到目标网站存在Bash Shell历史记录文件

详细描述 Bash Shell历史记录文件.bash_history包含了用户在bash shell运行的命令的历史记录.可能包含有与目标机器相关的敏感信息。这些敏感信息可以帮助攻击者针对站点发起进一步的攻击&#xff0c;降低攻击的难度。 解决办法 如果不需要该文件&#xff0c;建议删除对应的…
阅读更多...
ARM Coresight 系列文章 5 - ARM Coresight APB Interconnect（APBIC）

ARM Coresight 系列文章 5 - ARM Coresight APB Interconnect（APBIC）

文章目录 APBIC 介绍APBIC ROM TableError response软件访问的控制 APBIC 介绍 下图是基于SOC-400的 DAP 架构图&#xff0c;从图中可以看到 DAP 口出来的DAP-APB 会接入 APBIC 的 Slave 口&#xff0c;系统总线也接入了 APBIC 的 APB Slave port(图中并没有直接标出slave por…
阅读更多...
FastDVDnet Towards Real-Time Deep Video Denoising Without Flow

FastDVDnet Towards Real-Time Deep Video Denoising Without Flow

FastDVDnet: Towards Real-Time Deep Video Denoising Without Flow Estimation 原文&#xff1a; https://ieeexplore.ieee.org/document/9156652 由于视频有着较强的时间相关性&#xff0c;那么一个好的视频去噪算法必将要充分利用这一特点。利用时间相关性主要体现为两个方面…
阅读更多...
Linux：企业级服务器嵌入式系统优势与应用

Linux：企业级服务器嵌入式系统优势与应用

Linux在企业级服务器领域具有广泛应用。作为一种强大的操作系统&#xff0c;Linux可以用于构建企业的WWW服务器、数据库服务器、负载均衡服务器、邮件服务器、DNS服务器、代理服务器、路由器等。通过采用Linux系统&#xff0c;企业不仅可以降低运营成本&#xff0c;还能获得高稳…
阅读更多...
Linux5.14 ELK企业级日志分析系统

Linux5.14 ELK企业级日志分析系统

文章目录 计算机系统5G云计算第四章 LINUX ELK 企业级日志分析系统一、ELK 概述1.ELK 简介1&#xff09;ElasticSearch2&#xff09;Kiabana3&#xff09;Logstash4&#xff09;可以添加的其它组件&#xff1a;Filebeat5&#xff09;缓存/消息队列&#xff08;redis、kafka、Ra…
阅读更多...
【Shell学习】

【Shell学习】

Shell学习 Shell介绍 Shell是一种用于操作系统的命令行解释器&#xff0c;它提供了与操作系统内核进行交互的接口。它允许用户通过键入命令来执行各种操作&#xff0c;包括文件管理、进程控制、网络通信等。   下面是一些关于Shell的介绍&#xff1a; Shell是一种解释性语言…
阅读更多...
使用php数组实现双色球的随机选号

使用php数组实现双色球的随机选号

一、双色球彩票介绍 双色球是中国福利彩票的一种常见玩法&#xff0c;也是全国彩民最爱的彩种之一。玩法规则是在33个红色球中选择6个数字&#xff0c;在16个蓝色球中选择1个数字&#xff0c;红色球号码区间为1-33&#xff0c;蓝色球号码区间为1-16。可以单式投注或者复式投注…
阅读更多...
【数据结构】初识

【数据结构】初识

&#x1f341; 博客主页:江池俊的博客_CSDN博客-C语言——探索高效编程的基石领域博主 &#x1f341; 专栏&#xff1a;https://blog.csdn.net/2201_75743654/category_12348274.html &#x1f341; 如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏&#x1f…
阅读更多...
在UI中使用SpriteMask裁减任意shader的粒子效果

在UI中使用SpriteMask裁减任意shader的粒子效果

前言 由于我们需要在Mask中对粒子效果进行裁减。但是我们的的特效同事不愿意每个shader都去添加Stencil。所以使用SpriteMask方式进行裁减。 使用步骤 1. 添加SpriteMask Component 更具你需要的Mask形状设置精灵图片。又因为实际是精灵&#xff0c;并不属于UI系统&#xff…
阅读更多...
什么是 XSS 攻击,攻击原理是什么

什么是 XSS 攻击,攻击原理是什么

什么是 XSS 攻击&#xff1f; XSS&#xff08;Cross-Site Scripting&#xff09;攻击是一种常见的 Web 安全漏洞&#xff0c;其攻击目标是 Web 应用程序中的用户&#xff0c;攻击者通过在 Web 页面中植入恶意脚本&#xff0c;从而实现窃取用户敏感信息、篡改用户数据等目的。 …
阅读更多...
水母搜索(JS)算法(含MATLAB代码)

水母搜索(JS)算法(含MATLAB代码)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023