UniApp 基础

class uniapp

目录结构和文件介绍

UniApp 的项目结构清晰，主要包含以下几个部分：

├── components     // 存放自定义组件
├── pages          // 页面文件夹，每个页面一个文件夹
├── static         // 存放静态资源，如图片、字体
├── uni_modules    // 依赖的 uni_modules
├── App.vue        // 应用的主组件
├── main.js        // 应用的入口文件
  • App.vue：主组件，所有页面的共同父组件，通常用于全局样式和逻辑处理。
  • pages/：每个页面以 .vue 文件形式存在，可以包含页面的逻辑、样式和模板。
  • components/：存放可复用的自定义组件。
  • static/：存放不需要经过 webpack 处理的静态资源，如图片和字体。

页面布局

在 UniApp 中，页面布局通常使用 <view> 组件来承载其他元素。

示例代码：

<template>
  <view class="container">
    <text class="title">欢迎来到 UniApp!</text>
    <image src="@/static/logo.png" mode="widthFix"></image>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>

使用 <view>、<text>、<image> 等组件

  • <view>：用于创建容器，支持 CSS 布局。
  • <text>：用于展示文本内容。
  • <image>：用于展示图片，支持多种模式（如 aspectFit、widthFix 等）。

示例代码：

<template>
  <view class="content">
    <text>这是一个示例文本</text>
    <image src="https://example.com/image.png" mode="aspectFit"></image>
  </view>
</template>

数据绑定

UniApp 支持 Vue 的数据绑定，可以通过 {{}} 语法绑定数据。

示例代码：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="updateMessage">更新消息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, UniApp!'
    };
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新!';
    }
  }
};
</script>

v-model 和事件处理

v-model 用于实现双向数据绑定，通常用于表单输入元素。

示例代码：

<template>
  <view>
    <input v-model="inputValue" placeholder="请输入内容" />
    <text>您输入的内容是：{{ inputValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

组件

UniApp 支持组件化开发，使用组件可以提升代码复用性和可维护性。

自定义组件的创建和使用

  1. 在 components 文件夹中创建一个自定义组件 MyButton.vue：

    <template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  props: ['label'],
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

  2. 在页面中使用自定义组件：

    <template>
  <view>
    <MyButton label="点击我" @click="buttonClicked"></MyButton>
  </view>
</template>

<script>
import MyButton from '@/components/MyButton.vue';

export default {
  components: {
    MyButton
  },
  methods: {
    buttonClicked() {
      uni.showToast({ title: '按钮被点击了!' });
    }
  }
};
</script>

生命周期

组件的生命周期指组件从创建到销毁的过程，UniApp 也遵循 Vue 的生命周期概念。

组件的生命周期函数

常用的生命周期函数有：

  • created：组件创建时调用。
  • mounted：组件挂载到 DOM 后调用。
  • beforeDestroy：组件销毁前调用。

示例代码：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '组件正在加载...'
    };
  },
  created() {
    console.log('组件创建');
  },
  mounted() {
    this.message = '组件已加载!';
    console.log('组件挂载');
  },
  beforeDestroy() {
    console.log('组件即将销毁');
  }
};
</script>

总结

通过以上内容，你了解了 UniApp 的基本结构和组件使用方式。掌握这些基础知识后，你可以更有效地构建跨端应用，提升开发效率。随着进一步的学习和实践，你将能充分利用 UniApp 的强大功能。

评论区
评论列表
menu