当前位置:首页 > 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使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含n…

uniapp分享到facebook

uniapp分享到facebook

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

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-col…

uniapp 用法

uniapp 用法

uniapp 基本概念 uniapp 是一个基于 Vue.js 的跨平台开发框架,支持编译到 iOS、Android、H5 及小程序等多端。其核心特点是“一次开发,多端发布”,通过条件编译实现平台差异…

uniapp 头条

uniapp 头条

uniapp 适配今日头条(字节跳动小程序)的方法 环境配置 确保HBuilderX版本在2.7.0以上,manifest.json中勾选"字节跳动小程序"平台。在开发者工具中配置正确的AppID和项…

房产uniapp

房产uniapp

房产类UniApp开发指南 UniApp作为跨平台开发框架,适用于快速构建房产类应用(如二手房交易、租房平台、新房展示等)。以下是关键开发要点和实现方法: 技术选型与框架配置 跨平台适配:使用Uni…