当前位置:首页 > uni-app

uniapp 文件列表

2026-02-05 21:30:26uni-app

uniapp 文件列表结构

uniapp 项目包含多个核心文件和目录,以下是主要文件及其作用:

pages.json
配置文件,用于设置页面路由、窗口样式、导航栏、tabBar 等全局配置。示例结构:

{
  "pages": [
    {"path": "pages/index/index", "style": {...}},
    {"path": "pages/detail/detail", "style": {...}}
  ],
  "globalStyle": {...}
}

manifest.json
应用配置,包含应用名称、appid、版本号、平台特定配置(如微信小程序、H5 等)。

{
  "name": "MyApp",
  "appid": "__UNI__XXXXXX",
  "versionName": "1.0.0"
}

App.vue
应用入口文件,可设置全局样式和生命周期。示例代码:

<script>
export default {
  onLaunch() {
    console.log('App Launch')
  }
}
</script>
<style>
/* 全局样式 */
</style>

pages 目录
存放所有页面文件,每个页面是一个 .vue 文件,通常包含同名目录(如 pages/index/index.vue)。页面基本结构:

<template>
  <view>Hello World</view>
</template>
<script>
export default {
  data() {
    return { msg: 'Hello' }
  }
}
</script>

static 目录
存放静态资源(图片、字体等),引用时路径以 /static/ 开头。例如:

uniapp 文件列表

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

uni.scss
全局 SCSS 变量文件,可定义主题色、间距等变量供全项目使用:

$primary-color: #007AFF;
$font-size: 14px;

main.js
应用入口脚本,用于初始化 Vue 实例和插件:

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App})
app.$mount()

平台差异化文件

  • platforms 目录
    存放各平台(如微信小程序、H5)的专用文件,编译时会自动合并到对应平台。

    uniapp 文件列表

  • 条件编译
    通过注释实现多平台代码差异化,例如:

    // #ifdef H5
    console.log('仅H5平台生效')
    // #endif

其他重要文件

  • components 目录
    存放自定义组件,通过 components 标签或全局注册使用。

  • uni_modules
    插件模块目录,存放通过 HBuilderX 安装的第三方插件。

  • package.json
    项目依赖配置文件,需手动创建(HBuilderX 初始化项目可能不包含)。

文件引用规则

  • 绝对路径:以 / 开头,从项目根目录开始解析。
  • 相对路径:以 ./../ 开头,从当前文件开始解析。
  • 特殊路径:@/ 表示项目根目录,~@/ 表示 node_modules 目录。

分享给朋友:

相关文章

uniapp 消息推送

uniapp 消息推送

uniapp 消息推送实现方法 使用uniPush服务 uniapp官方提供了uniPush服务,支持iOS、Android及小程序平台的消息推送。需要在manifest.json中配置推送模块,并按…

uniapp应用市场

uniapp应用市场

uniapp应用市场概述 Uniapp作为跨平台开发框架,支持将代码编译到iOS、Android、Web及各类小程序平台。其应用市场(插件市场)是开发者获取扩展插件、模板、组件的重要资源库,涵盖UI组…

uniapp分享到facebook

uniapp分享到facebook

使用uniapp分享到Facebook的方法 在uniapp中实现分享到Facebook功能,可以通过调用原生插件或使用第三方SDK。以下是具体实现方式: 安装Facebook SDK插件 在uni…

uniapp前端页面

uniapp前端页面

Uniapp 前端页面开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端部署(H5、小程序、App等)。以下是开发 Uniapp 前端页面的关键方法和注意事项。…

uniapp 数据

uniapp 数据

uniapp 数据管理方法 本地存储 使用 uni.setStorageSync 和 uni.getStorageSync 进行本地数据持久化存储。适合保存用户偏好设置或小型数据。 // 存储数…

uniapp广播

uniapp广播

全局事件通信 在UniApp中实现广播功能可通过全局事件机制完成,适用于跨页面或组件通信。使用uni.$emit、uni.$on、uni.$off等方法实现事件的触发、监听与移除。 发送广播(触发事…