uniapp单页面怎么写
时间: 2023-12-23 11:06:19 浏览: 28
在 uniapp 中,单页面的写法与普通的 Vue 单文件组件类似。下面是一个简单的示例,展示了如何创建一个单页面:
1. 在 `pages` 文件夹下创建一个新的文件夹,用作你的单页面组件,比如命名为 `examplePage`。
2. 在 `examplePage` 文件夹下创建一个 `.vue` 文件,比如命名为 `index.vue`。
3. 在 `index.vue` 文件中,编写你的单页面内容。可以使用 `<template>`、`<script>` 和 `<style>` 标签来分别编写模板、脚本和样式代码。
下面是一个简单的示例代码:
```vue
<template>
<view>
<text>{{ message }}</text>
<button @click="changeMessage">Change Message</button>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, uniapp!',
};
},
methods: {
changeMessage() {
this.message = 'New message!';
},
},
};
</script>
<style>
view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
text {
font-size: 20px;
margin-bottom: 20px;
}
</style>
```
在这个示例中,我们创建了一个包含文本和按钮的简单单页面。`message` 数据绑定到文本中,点击按钮时,可以通过 `changeMessage` 方法改变 `message` 的值。
最后,在需要使用该单页面的地方,比如在 `pages.json` 文件中的 `pages` 数组中,添加该单页面的路径,例如:
```json
{
"pages": [
"pages/examplePage/index"
]
}
```
这样就可以在你的 uniapp 项目中使用该单页面了。记得根据实际需求进行修改和扩展,这只是一个简单示例。希望能对你有所帮助!如果还有其他问题,请随时提问。