小程序uniapp文件

uniapp 文件结构解析

uniapp 的项目文件结构遵循 Vue.js 的约定，同时针对跨平台特性进行了扩展。典型目录结构如下：

project-root/
├── pages/           # 页面目录
│   ├── index/       # 首页
│   │   ├── index.vue
│   │   └── index.json
│   └── detail/
│       ├── detail.vue
│       └── detail.json
├── static/          # 静态资源
├── components/      # 公共组件
├── uni_modules/     # 插件模块
├── manifest.json    # 应用配置
├── pages.json       # 页面路由配置
└── App.vue          # 应用入口

核心配置文件说明

manifest.json
控制应用的原生配置，包含：

• 应用名称、版本号等基本信息
• 各平台（微信/支付宝/百度等）特有配置
• 权限声明

示例片段：

{
  "name": "myApp",
  "appid": "__UNI__XXXXXX",
  "description": "跨端应用",
  "versionName": "1.0.0"
}

pages.json
定义全局样式和页面路由：

• 设置窗口背景色、导航栏样式
• 配置页面路径与窗口表现
• 定义底部 tabBar

路由配置示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black"
  }
}

页面开发规范

每个页面应包含至少三个文件：

• .vue 文件：组件模板+逻辑
• .json 文件：页面级配置
• .css 文件（可选）：页面独有样式

页面组件示例：

<template>
  <view class="container">
    <text>{{title}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uniapp'
    }
  }
}
</script>

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

跨平台适配策略

条件编译语法实现多平台适配：

// #ifdef H5
console.log('仅在H5平台执行');
// #endif

// #ifdef MP-WEIXIN
wx.login();
// #endif

静态资源路径处理应使用相对路径：

<image src="/static/logo.png"></image>

注意事项

• 页面路径需在 pages.json 中注册才能访问
• 组件命名避免与HTML标签冲突（如不能使用div）
• 使用 rpx 单位保障多端尺寸适配
• 调试时可通过 --platform 参数指定平台
• 发布前需在 manifest.json 配置各平台参数