备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2024-01-25 29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 探索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

文章标签：
Web应用防火墙
容器
JavaScript
移动开发
开发框架
小程序
关键词：
APP应用
APP工具
APP构建应用
阿珊和她的猫
目录
相关文章
iOS开发欢乐使者
|
1月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ？如何为 App 应用加固 ？
【教程】为什么要为 App 应用加固 ？如何为 App 应用加固 ？
iOS开发欢乐使者
22 0
会敲代码的_TT
|
2月前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解：从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后，下一步就面临上架App Store，不过也有很多同学对APP上架App Store的流程不太了解，下面我们来说一下iOS APP上架App Store的具体流程，如有未涉及到的部分，大家可以及时咨询，共同探讨。
会敲代码的_TT
129 1
会敲代码的_TT
|
2月前
|
存储 iOS开发 开发者
如何在上架App之前设置证书并上传应用
在上架App之前想要进行真机测试的同学，请查看《iOS- 最全的真机测试教程》，里面包含如何让多台电脑同时上架App和真机调试。
会敲代码的_TT
33 0
iOS开发欢乐使者
|
2月前
|
安全 开发工具 数据安全/隐私保护
如何将应用程序发布到 App Store
如何将应用程序发布到 App Store
iOS开发欢乐使者
39 0
此星光明
|
2月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
此星光明
104 0
sunrr
|
1月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道，推送都可以收到，但是在App切到后台或者杀掉进程之后就收不到推送了，是需要配置什么吗？
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道，推送都可以收到，但是在App切到后台或者杀掉进程之后就收不到推送了，是需要配置什么吗？
sunrr
32 2
iOS开发欢乐使者
|
2月前
|
编解码 供应链 数据安全/隐私保护
2023 年如何将您的应用提交到 App Store
2023 年如何将您的应用提交到 App Store
iOS开发欢乐使者
41 0
iOS开发欢乐使者
|
2月前
|
iOS开发 开发者
苹果 iOS App Store 上架操作流程详解：从开发者账号到应用发布
苹果 iOS App Store 上架操作流程详解：从开发者账号到应用发布
iOS开发欢乐使者
58 0
iOS开发欢乐使者
|
2月前
|
安全 Linux iOS开发
上传 iOS 应用变得更加容易 - 在 Windows 上架 iOS APP 的工具介绍
上传 iOS 应用变得更加容易 - 在 Windows 上架 iOS APP 的工具介绍
iOS开发欢乐使者
21 0
阿萨聊测试
|
2月前
|
Android开发 iOS开发 开发者
点击APP的应用程序图标后，发生了什么
点击APP的应用程序图标后，发生了什么
阿萨聊测试
38 1

热门文章

最新文章

  • 1
    uni-app使用v-html输出富文本图片溢出解决
  • 2
    Error:Execution failed for task ':app:javaPreCompileDebug'. > Annotation processors must be explicit
  • 3
    深入探究App压力测试的关键要点：从零开始学习Monkey
  • 4
    云擎技术---分析工信部APP备案的“传闻”
  • 5
    App测试中，强制等待和隐式等待谁更强？
  • 6
    安卓即时应用(Instant Apps)开发指南
  • 7
    深入理解 uni-app 页面生命周期（三）：onHide vs onUnload
  • 8
    【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
  • 9
    GreenDao，clearIdentityScope报错Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Com
  • 10
    解决 App 自动化测试的常见痛点
  • 1
    HC05蓝牙模块与手机APP连接
    42
  • 2
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    46
  • 3
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    48
  • 4
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    55
  • 5
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    37
  • 6
    python爬虫之app爬取-微信朋友圈
    80
  • 7
    python爬虫之app爬取-mitmproxy 的使用
    40
  • 8
    python爬虫之app爬取-charles的使用
    58
  • 9
    【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
    26
  • 10
    短剧系统开发（网页版/APP/小程序）丨短剧系统开发运营版及源码出售
    94

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案
  • 前端开发框架Bootstrap使用教程
  • 开源Android容器化框架Atlas开发者指南
  • React 入门教程开发文档
  • Python Web 框架 Flask 快速入门

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建IoT小程序开发环境，创建一个应用
  • 星轨-钉钉APP分发实训
  • Web Terminal环境使用指南
  • 搭建Java Web开发环境（Anolis OS）
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）