uni-app 111111

针对您提到的 uni-app，这是一个使用 Vue.js 开发所有前端应用的框架，它支持编译为 H5、小程序、App（iOS/Android）等多个平台。下面是一个简单的 uni-app 项目示例，包括页面结构、样式和脚本代码，以展示其基本用法。

1. 项目结构

首先，uni-app 项目的基本结构如下：

my-uni-app/
├── pages/
│   ├── index/
│   │   ├── index.vue
│   ├── about/
│       ├── about.vue
├── static/
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

2. pages/index/index.vue

这是首页的 Vue 组件：

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="navigateToAbout">Go to About</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to uni-app!'
    };
  },
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      });
    }
  }
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

3. pages/about/about.vue

这是关于页面的 Vue 组件：

<template>
  <view class="content">
    <text>This is the About Page</text>
    <button @click="navigateBack">Go Back</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

4. pages.json

配置页面路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "About"
      }
    }
  ]
}

以上代码展示了如何使用 uni-app 创建一个简单的应用，包括两个页面（首页和关于页），并实现了页面间的导航功能。您可以根据需要扩展和修改这些代码，以适应您的具体需求。