UniApp 的项目结构清晰,主要包含以下几个部分:
├── components // 存放自定义组件
├── pages // 页面文件夹,每个页面一个文件夹
├── static // 存放静态资源,如图片、字体
├── uni_modules // 依赖的 uni_modules
├── App.vue // 应用的主组件
├── main.js // 应用的入口文件
.vue
文件形式存在,可以包含页面的逻辑、样式和模板。在 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
用于实现双向数据绑定,通常用于表单输入元素。
<template>
<view>
<input v-model="inputValue" placeholder="请输入内容" />
<text>您输入的内容是:{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
UniApp 支持组件化开发,使用组件可以提升代码复用性和可维护性。
在 components
文件夹中创建一个自定义组件 MyButton.vue
:
<template>
<button @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
在页面中使用自定义组件:
<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 的强大功能。