uni-app基础-CSDN博客

本文链接：https://blog.csdn.net/T3515492318/article/details/139117949

一.特点：

二.基础语法：

Uni-app 是一个基于 Vue.js 的跨平台应用框架，它可以帮助开发者使用 Vue.js 来构建同时运行在多个平台的应用程序。以下是 Uni-app 的一些基础知识和特点：

一.特点：

1. 跨平台性
Uni-app 是一个跨平台的应用框架，它支持将一套代码编译成多个平台（如微信小程序、App Store、Google Play 等）所需的代码。这意味着开发者可以只编写一次代码，就能在多个平台上运行应用程序，极大地提高了开发效率。

2. 基于 Vue.js
Uni-app 构建在 Vue.js 框架之上，因此它继承了 Vue.js 的语法和特性。开发者可以使用 Vue.js 的组件化开发方式来构建应用程序，同时也可以利用 Vue.js 的响应式数据绑定、指令、组件等功能来开发应用。

3. 页面和组件
在 Uni-app 中，页面和组件都使用单文件组件（.vue 文件）来组织。每个 .vue 文件包含了一个页面或组件的模板、样式和脚本。这种组织方式使得代码结构清晰，便于维护和管理。

4. 生命周期
Uni-app 的页面和组件都具有生命周期钩子函数，开发者可以在这些钩子函数中执行特定的操作。常用的生命周期钩子函数包括 `onLoad`（页面加载时触发）、`onShow`（页面显示时触发）、`onHide`（页面隐藏时触发）等，开发者可以根据需要在这些钩子函数中执行相应的逻辑。

5. 路由
Uni-app 支持页面之间的路由导航。开发者可以通过配置路由表来定义页面之间的路由关系，并使用内置的路由方法来实现页面之间的跳转和参数传递。常用的路由方法包括 `uni.navigateTo`（跳转到指定页面）、`uni.redirectTo`（重定向到指定页面）、`uni.navigateBack`（返回上一页）等。

6. 数据绑定
Uni-app 支持 Vue.js 的数据绑定功能。开发者可以将数据和页面元素进行绑定，实现数据的动态展示和交互。通过使用 Vue.js 的指令（如 `v-model`、`v-bind`、`v-on` 等），开发者可以实现数据的双向绑定、事件监听等功能。

7. 事件处理
Uni-app 支持事件处理，开发者可以通过绑定事件监听器来处理用户的交互行为。常见的事件包括点击事件、滑动事件、触摸事件等。开发者可以在模板中使用 `@click`、`@touchstart` 等指令来绑定事件监听器，并在相应的事件处理函数中编写逻辑代码。

二.基础语法：

以下是一些内置组件的介绍：

一.导航组件

Navigator（导航跳转）：用于页面间的跳转。

示例：

<template>
  <navigator url="/pages/detail">Go to Detail</navigator>
</template>

二.列表组件

1.List（列表）：用于显示列表数据。

示例：

<template>
  <list>
    <cell title="Item 1" />
    <cell title="Item 2" />
    <cell title="Item 3" />
  </list>
</template>

2.Cell（列表项）：列表中的每一项。

示例：

<template>
  <cell title="Item 1" />
</template>

三.弹窗组件

Modal（模态框）：用于弹出模态框。

示例：

<template>
  <button @click="openModal">Open Modal</button>
</template>

<script>
export default {
  methods: {
    openModal() {
      uni.showModal({
        title: 'Modal Title',
        content: 'Modal Content',
        success(res) {
          if (res.confirm) {
            console.log('User confirmed');
          } else if (res.cancel) {
            console.log('User canceled');
          }
        }
      });
    }
  }
}
</script>

四.媒体组件

1.Audio（音频）：用于播放音频。

示例：

<template>
  <audio src="/static/audio.mp3" controls />
</template>

2.Video（视频）：用于播放视频。

示例：

<template>
  <video src="/static/video.mp4" controls />
</template>

以上是一些内置组件的基础用法，详细的内容可以在uni-app官网查看。