小程序uniapp文件

uniapp 文件结构

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

项目根目录

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

页面与组件

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

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

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

静态资源

• 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>

注意事项

• 路径引用需使用 @/ 表示项目根目录。
• 小程序端有文件大小限制，需合理分包或压缩资源。
• 调试时可使用 HBuilderX 内置的模拟器或真机预览。