uniapp --- 配置文件

目录

一.pages.json文件:

1.组件自动导入规则(easycom):

2.页面配置(pages):

3.全局样式(globalStyle):

4.底部TabBar配置(tabBar):

二.manifest.json文件:

1. 应用基本信息:

2. App-Plus 特有配置:

 3. QuickApp 特有配置:

4. 小程序特有配置:

 5. UniStatistics 配置:

6. vueVersion 配置:

三.App.vue:

四. main.ts:

五.uni.scss:

配置 manifest.json: 


一.pages.json文件:

配置页面路由、导航条、选项卡等页面类信息

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 

下面举例四个常用配置,其余可见下面的官网教程:pages.json 页面路由 | uni-app官网 

1.组件自动导入规则(easycom):

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    "^Xtx(.*)": "@/components/Xtx$1.vue"
  }
}

easycom: 配置组件的自动引入规则:

  • autoscan: 设置为 true 时,UniApp 会自动扫描项目中的组件,无需手动引入。适用于简单的组件引用场景。
  • custom: 自定义组件引入规则:
    • ^uni-(.*): 匹配 uni- 开头的组件,将自动引入 @dcloudio/uni-ui/lib/uni-xxx/uni-xxx.vue
    • ^Xtx(.*): 匹配 Xtx 开头的组件,路径会在 @/components/Xtx 目录下查找。

2.页面配置(pages):

"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationStyle": "custom", // 隐藏默认导航
      "navigationBarTextStyle": "white",
      "navigationBarTitleText": "首页"
    }
  },
  {
    "path": "pages/my/my",
    "style": {
      "navigationBarTitleText": "我的"
    }
  },
  ...
]

pages: 配置应用的页面路由:

  • path: 页面路径,表示该页面相对项目根目录的路径。
  • style: 页面样式配置,可以用来设置该页面的导航栏等:
    • navigationStyle: custom 表示自定义导航栏,如果不需要显示导航栏,可以设置为 none
    • navigationBarTextStyle: 设置导航栏文字颜色,如 whiteblack
    • navigationBarTitleText: 设置导航栏标题文本。

3.全局样式(globalStyle):

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8"
}

globalStyle: 配置全局样式,适用于所有页面的默认样式:

  • navigationBarTextStyle: 设置全局导航栏文字颜色,blackwhite
  • navigationBarTitleText: 设置全局导航栏标题文本(可以为空)。
  • navigationBarBackgroundColor: 设置导航栏背景颜色。
  • backgroundColor: 设置整个页面的背景色。

4.底部TabBar配置(tabBar):

"tabBar": {
  "color": "#333",
  "selectedColor": "#27ba9b",
  "backgroundColor": "#fff",
  "borderStyle": "white",
  "list": [
    {
      "text": "首页",
      "pagePath": "pages/index/index",
      "iconPath": "static/tabs/home_default.png",
      "selectedIconPath": "static/tabs/home_selected.png"
    },
    ...
  ]
}

tabBar: 配置底部 TabBar 栏的样式及项:

  • color: 未选中时图标的颜色。
  • selectedColor: 选中时图标的颜色。
  • backgroundColor: TabBar 背景颜色。
  • borderStyle: 设置 TabBar 的边框样式,通常为 white
  • list: 配置 TabBar 的各个 Tab 项。
    • text: Tab 项的文本。
    • pagePath: 对应的页面路径。
    • iconPath: 未选中时显示的图标路径。
    • selectedIconPath: 选中时显示的图标路径。

二.manifest.json文件:

manifest.json 是 UniApp 项目中的配置文件,用于描述应用的基本信息、平台特定配置、权限要求、发布配置等。它对整个项目的打包和发布有很大的影响,确保应用在不同平台(如 App、微信小程序、支付宝小程序等)上的正确运行。

详细配置文件可见官网:manifest.json 应用配置 | uni-app官网 

1. 应用基本信息:

{
    "name": "***",
    "appid": "",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": 1,
    "transformPx": false
}
  • name: 应用名称,展示给用户时会使用。
  • appid: 应用的唯一标识,通常是小程序、App等平台要求填写的字段,可以为空。
  • description: 应用的简短描述,用于介绍应用的功能。
  • versionName: 应用的版本名称,通常显示在用户设备上。
  • versionCode: 应用的版本号,在发布新版本时需要递增,用于区分不同版本。
  • transformPx: 是否将 px 转换为 rem。默认值是 false,表示不进行转换。

2. App-Plus 特有配置:

"app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "splashscreen": {
        "alwaysShowBeforeRender": true,
        "waiting": true,
        "autoclose": true,
        "delay": 0
    },
    "modules": {},
    "distribute": {
        "android": {
            "permissions": [
                "",
                "",
                ...
            ]
        },
        "ios": {},
        "sdkConfigs": {}
    }
}

android.permissions 中列出的权限是 Android 平台应用运行时请求的权限,必须在应用安装前声明。如果使用了需要访问硬件(如摄像头、传感器等)或隐私数据(如联系人、短信等)的功能,必须在此列出相应的权限。 

  • usingComponents: 是否启用自定义组件,通常设置为 true
  • nvueStyleCompiler: 配置 nvue 样式编译器的使用方式,通常为 uni-app
  • compilerVersion: 编译器版本,表示当前使用的编译器版本,通常为 3
  • splashscreen: 启动页相关配置。
    • alwaysShowBeforeRender: 是否在渲染页面之前总是显示启动页。
    • waiting: 是否显示加载动画。
    • autoclose: 是否在页面渲染后自动关闭启动页。
    • delay: 启动页显示的延迟时间,单位是毫秒。
  • modules: 配置需要使用的模块,通常是插件或 SDK 等。
  • distribute: 应用发布相关配置,包括不同平台(如 Android、iOS)特有的设置。
    • android: Android 打包配置。
      • permissions: 配置应用需要申请的权限,这些权限是 Android 系统为确保应用正常运行而请求的。
    • ios: iOS 打包配置,通常在这里配置应用需要的特定权限或功能。
    • sdkConfigs: SDK 配置,通常包括第三方 SDK 配置(如推送、分析等)。

 3. QuickApp 特有配置:

"quickapp": {}

quickapp: 这是针对快应用平台的配置,通常留空,除非有快应用的相关配置需求。

4. 小程序特有配置:

"mp-weixin": {
    "appid": "wx59832c3f6b76abbb",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true
},
"mp-alipay": {
    "usingComponents": true
},
"mp-baidu": {
    "usingComponents": true
},
"mp-toutiao": {
    "usingComponents": true
}
  • mp-weixin: 配置微信小程序相关设置。
    • appid: 小程序的唯一标识(微信小程序的 AppID)。
    • setting: 小程序特定的设置,例如 urlCheck 用于检查 URL 的合法性。
    • usingComponents: 是否启用自定义组件。
  • mp-alipaymp-baidump-toutiao: 配置其他小程序平台(如支付宝、百度、字节跳动)相关设置,通常涉及到组件的使用和平台特定的配置。

 5. UniStatistics 配置:

"uniStatistics": {
    "enable": false
}

uniStatistics: 用于统计和分析应用的使用情况。enable: 是否启用统计功能,false 表示不启用。

6. vueVersion 配置:

"vueVersion": "3"

 vueVersion: 配置项目使用的 Vue.js 版本。在 UniApp 中,可以选择使用 Vue 2 或 Vue 3,这里设置为 Vue 3,表示项目使用 Vue 3 构建。

三.App.vue:

App.vue 是应用的根组件,它负责配置一些全局的页面元素、路由等。通常,App.vue 是单页面应用的入口文件,在 UniApp 中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。

所有页面都是在App.vue下进行切换的,是应用入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有