page.json和manifest.json

/ 前端
# uniapp

UniApp pages.json

pages.json 是 UniApp 项目中用于全局配置的重要文件，它定义了页面路由、窗口样式、导航栏、底部的原生 tabbar 等。

1. globalStyle

1
2
3
4
5
6
7
8
"globalStyle": {
  "navigationBarBackgroundColor": "#F8F8F8",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "演示",
  "backgroundColor": "#F8F8F8",
  "enablePullDownRefresh": false,
  "onReachBottomDistance": 50
}

2. topWindow / leftWindow / rightWindow

1
2
3
4
5
6
7
8
9
10
11
12
13
"topWindow": {
  "path": "responsive/top-window.vue",
  "style": { "height": "44px" }
},
"leftWindow": {
  "path": "responsive/left-window.vue",
  "style": { "width": "300px" }
},
"rightWindow": {
  "path": "responsive/right-window.vue",
  "style": { "width": "300px" },
  "matchMedia": { "minWidth": 768 }
}

3. pages

1
2
3
4
5
6
7
8
9
10
"pages": [
  {
    "path": "pages/index/index",
    "style": { "navigationBarTitleText": "首页" }
  },
  {
    "path": "pages/login/login",
    "style": { "navigationBarTitleText": "登录" }
  }
]

4. style (页面级别)

1
2
3
4
"style": {
  "navigationBarBackgroundColor": "#FF5722",
  "navigationBarTitleText": "自定义页面"
}

5. 自定义导航栏使用注意

1
2
3
"style": {
  "navigationStyle": "custom"
}

6. app-plus

1
2
3
4
"app-plus": {
  "splashscreen": { "autoclose": true },
  "statusbar": { "immersed": true }
}

7. tabBar

1
2
3
4
5
6
7
8
9
10
11
12
"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "list": [
    {
      "pagePath": "pages/component/index",
      "text": "组件",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png"
    }
  ]
}

8. easycom

1
2
3
4
"easycom": {
  "autoscan": true,
  "custom": { "^uni-(.*)": "@/components/uni-$1.vue" }
}

9. condition & subPackages & preloadRule

1
2
3
"condition": { "current": 0, "list": [{ "name": "test", "path": "pages/component/view/index" }] },
"subPackages": [],
"preloadRule": {}

注意事项总结

manifest.json

manifest.json 文件在 UniApp 项目中用于配置应用的基本信息和运行时权限等。它类似于传统 Web 应用中的 package.json 或者原生移动应用的 AndroidManifest.xml 和 Info.plist，但专门针对跨平台开发进行了优化。以下是关于 manifest.json 的详细说明，包括其结构、重要配置项及其注意事项。

manifest.json 基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "appid": "",
  "name": "MyUniApp",
  "versionName": "1.0.0",
  "versionCode": "100",
  "uniStatistics": {
    "enable": false
  },
  "app-plus": {
    // App端特有配置
  },
  "mp-weixin": {
    // 微信小程序特有配置
  },
  "mp-alipay": {
    // 支付宝小程序特有配置
  },
  "mp-baidu": {
    // 百度小程序特有配置
  },
  "mp-toutiao": {
    // 抖音小程序特有配置
  },
  // 其他小程序或快应用的配置...
}

重要配置项及说明

1. 基础信息配置

1
2
3
4
5
6
{
  "appid": "your-app-id",
  "name": "MyUniApp",
  "versionName": "1.0.0",
  "versionCode": "100"
}

2. uniStatistics（统计）

1
2
3
"uniStatistics": {
  "enable": false
}

3. app-plus (App端特有配置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"app-plus": {
  "distribute": {
    "android": {
      "permissions": [
        "<uses-permission android:name='android.permission.INTERNET'/>",
        "<uses-permission android:name='android.permission.ACCESS_NETWORK_STATE'/>"
      ]
    }
  },
  "splashscreen": {
    "autoclose": true,
    "waiting": true,
    "delay": 0
  },
  "statusbar": {
    "immersed": true,
    "dark": false
  }
}

4. mp-weixin (微信小程序特有配置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"mp-weixin": {
  "appid": "wx1234567890abcdef",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  }
}

5. mp-alipay (支付宝小程序特有配置)

1
2
3
4
5
"mp-alipay": {
  "appid": "20181234567890",
  "usingComponents": true,
  "titleBarColor": "#ffffff"
}

注意事项

  1. 权限声明：确保根据应用的需求正确声明所需的权限，避免因缺少权限导致的功能异常。
  2. 启动图和状态栏样式：合理配置启动图和状态栏样式可以提升用户体验。
  3. 不同平台的差异性：由于各平台有不同的规范和限制，需特别注意特定平台的配置项，以保证应用在各平台上都能正常运行。
  4. 版本管理：定期更新 versionName 和 versionCode，以便跟踪应用的发布历史。
  5. 真机测试：在完成配置后，务必在真实设备上进行全面测试，确保所有功能按预期工作。