当前位置：首页 > uni-app

小程序uniapp文件

2026-02-06 10:57:20uni-app

uniapp 文件结构

uniapp 的文件结构遵循 Vue.js 的项目规范，同时兼容多端（小程序、H5、App等）的特性。以下是核心文件及目录的说明：

项目根目录

小程序uniapp文件

pages.json：配置页面路由、导航栏样式、窗口背景色等全局配置。
manifest.json：应用配置，如 AppID、版本号、分包设置等。
App.vue：根组件，可设置全局样式或生命周期钩子。
main.js：入口文件，初始化 Vue 实例。

页面与组件

pages/：存放页面文件，每个页面为一个文件夹，包含 .vue 文件。

pages/
  ├── index/
  │   └── index.vue    // 首页
  └── detail/
      └── detail.vue  // 详情页

components/：存放可复用的 Vue 组件。

静态资源

小程序uniapp文件

static/：存放静态资源（图片、字体等），需通过绝对路径引用。
```
<image src="/static/logo.png"></image>
```

多端条件编译

uniapp 通过条件编译实现多端差异化代码，语法为 #ifdef 和 #ifndef：

// #ifdef MP-WEIXIN
console.log('仅在小程序端生效');
// #endif

生命周期与 API

生命周期：支持 Vue 生命周期（如 mounted）及 uniapp 特有的 onLaunch、onShow。
API 调用：使用 uni 对象调用跨端 API，如 uni.request、uni.navigateTo。

示例代码

以下是一个简单的页面示例：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="navigateToDetail">跳转详情页</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp'
    };
  },
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>