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: 设置导航栏文字颜色，如white或black。navigationBarTitleText: 设置导航栏标题文本。
3.全局样式（globalStyle）：
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
globalStyle: 配置全局样式，适用于所有页面的默认样式：
navigationBarTextStyle: 设置全局导航栏文字颜色，black或white。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": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
...
]
},
"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-alipay、mp-baidu、mp-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本身不是页面，这里不能编写视图元素，也就是没有<template>。这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听，在页面监听无效。
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
onLaunch(() => {
console.log('App Launch')
})
onShow(() => {
console.log('App Show')
})
onHide(() => {
console.log('App Hide')
})
</script>
<style lang="scss">
// 字体图标
@import '@/styles/fonts.scss';
view,
navigator,
input,
scroll-view {
box-sizing: border-box;
}
button::after {
border: none;
}
swiper,
scroll-view {
flex: 1;
height: 100%;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
vertical-align: middle;
}
// 两行省略
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>四. main.ts：
main.ts 是项目的入口文件，负责启动和初始化 Vue 实例，并应用全局配置。它也是应用启动时执行的第一段代码，通常在这里做路由、状态管理、插件等初始化。
import { createSSRApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.use(pinia) // 将 Pinia 插件添加到 Vue 应用
return {
app,
}
}
在
main.ts中，我们创建了一个 Vue 应用实例，并将Pinia插件应用到该实例。这里的代码主要是进行 应用初始化，将Pinia状态管理库与 Vue 应用关联。app.use(pinia)使得整个 Vue 应用都能够访问 Pinia 的状态管理功能。Pinia 作为一个插件，通过
app.use(pinia)的方式加入到 Vue 的应用中，使得应用中的所有组件都可以访问到 Pinia 中定义的状态。
stores/index.ts 中的 Pinia 配置：
在
store/index.ts中，我们创建了Pinia实例，并且使用了pinia-plugin-persistedstate插件来实现持久化存储（即使刷新页面，应用的状态能够保留下来）。随后通过export default pinia将pinia实例导出，方便在main.ts中引用。
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)
// 默认导出，给 main.ts 使用
export default pinia
// 模块统一导出
export * from './modules/member'
通过
export * from './modules/member'，我们将模块化的状态管理逻辑（如会员信息、购物车信息等）统一导出，这样就可以在应用中按需引入不同的状态模块，而无需每次都手动引入。
随后在stores/modules/member.ts文件中配置：
import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { LoginResult } from '@/types/member'
// 定义 Store
export const useMemberStore = defineStore(
'member',
() => {
// 会员信息
const profile = ref<LoginResult>()
// 保存会员信息，登录时使用
const setProfile = (val: LoginResult) => {
profile.value = val
}
// 清理会员信息，退出时使用
const clearProfile = () => {
profile.value = undefined
}
// 记得 return
return {
profile,
setProfile,
clearProfile,
}
},
{
// TODO: 持久化
persist: process.env.VUE_APP_PLATFORM === 'h5' ? true : {
storage: {
getItem(key) {
return uni.getStorageSync(key); // 同步获取
},
setItem(key, value) {
uni.setStorageSync(key, value); // 同步存储
}
}
}
},
)
五.uni.scss：
uni.scss是 UniApp 项目中的一个全局样式文件，通常用于存放全局的 SCSS 样式和变量。它能够帮助开发者定义整个应用的共享样式，例如全局的颜色、字体、布局等，确保在多个页面和组件中复用统一的样式。
在 UniApp 项目中，uni.scss 通常放置在 src/ 或 src/styles/ 目录下，具体位置可以根据项目结构调整。你只需确保在 manifest.json 文件中配置好使用 SCSS，并且确保文件位置正确。
/* 定义全局颜色变量 */
$primary-color: #27ba9b;
$secondary-color: #333;
$border-color: #e0e0e0;
$background-color: #f8f8f8;
/* 定义字体变量 */
$font-family: 'Arial', sans-serif;
$font-size: 16px;
/* 定义全局的导航栏样式 */
.navigation-bar {
background-color: $primary-color;
color: white;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
/* 设置页面默认背景 */
body {
background-color: $background-color;
font-family: $font-family;
font-size: $font-size;
color: $secondary-color;
}
/* 按钮样式 */
button {
background-color: $primary-color;
border-radius: 5px;
color: #fff;
padding: 10px 15px;
border: none;
cursor: pointer;
&:hover {
background-color: darken($primary-color, 10%);
}
}
/* 设置全局公共容器样式 */
.container {
width: 100%;
padding: 10px;
margin: 0 auto;
}
如果你使用 SCSS，你需要在
manifest.json文件中确保配置了 SCSS 编译功能。
配置 manifest.json：
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3
}
}
这里通过 nvueStyleCompiler 配置指定使用 UniApp 的 SCSS 编译器。