page.json和manifest.json

UniApp pages.json

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

1. globalStyle

• 用途：设置应用默认的窗口表现。
• 注意点：
  • 设置的属性会被所有页面继承，但可以在单个页面的 style 中覆盖。
  • 不同平台可能有不同的默认值或支持情况，请参考相应平台文档。

"globalStyle": {
  "navigationBarBackgroundColor": "#F8F8F8",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "演示",
  "backgroundColor": "#F8F8F8",
  "enablePullDownRefresh": false,
  "onReachBottomDistance": 50
}

2. topWindow / leftWindow / rightWindow

• 用途：宽屏适配，允许在主窗口的顶部、左侧或右侧追加新的页面显示窗体。
• 注意点：
  • 需要根据实际需求调整宽度和高度。
  • 可以使用 matchMedia 来控制在不同屏幕尺寸下是否显示这些窗口。

"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

• 用途：定义应用中的所有页面及其样式。
• 注意点：
  • 第一个页面作为首页。
  • 文件名不需要写后缀 .vue，框架会自动寻找路径下的页面资源。

"pages": [
  {
    "path": "pages/index/index",
    "style": { "navigationBarTitleText": "首页" }
  },
  {
    "path": "pages/login/login",
    "style": { "navigationBarTitleText": "登录" }
  }
]

4. style (页面级别)

• 用途：覆盖 globalStyle 的设置，针对单个页面进行更详细的样式配置。
• 注意点：
  • 页面级别的 style 优先级高于 globalStyle。
  • 对于复杂的页面，建议单独定义 style。

"style": {
  "navigationBarBackgroundColor": "#FF5722",
  "navigationBarTitleText": "自定义页面"
}

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

• 要点：
  • 使用 navigationStyle: custom 取消默认的原生导航栏时，需自行实现导航栏的功能。
  • 注意不同平台的兼容性问题，如微信小程序需要版本 7.0+ 支持。

"style": {
  "navigationStyle": "custom"
}

6. app-plus

• 用途：配置编译到 App 平台的特定样式。
• 注意点：
  • 特定于 App 平台的配置项较多，如启动图片、状态栏样式等。
  • 需要考虑不同设备分辨率和系统版本的支持情况。

"app-plus": {
  "splashscreen": { "autoclose": true },
  "statusbar": { "immersed": true }
}

7. tabBar

• 用途：配置底部 tab 栏的表现。
• 注意点：
  • list 中的每个对象代表一个 tab 项，必须包含 pagePath 和 text 属性。
  • 图标路径应为相对路径或绝对路径，确保正确引用。

"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

• 用途：简化组件引入，自动注册符合规则的组件。
• 注意点：
  • 自动扫描组件可以极大简化开发流程，但需注意命名规则的一致性。
  • 定义清晰的自定义扫描规则，避免冲突。

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

9. condition & subPackages & preloadRule

• 用途：

  • condition: 启动模式配置（仅开发期间生效）。
  • subPackages: 分包加载配置。
  • preloadRule: 分包预下载规则。

  注意点：

  • 分包策略有助于优化小程序的加载速度，特别是对于大型应用。
  • 预下载规则可以帮助用户快速访问常用页面。

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

注意事项总结

• 跨平台差异：不同的小程序平台对某些配置的支持程度不同，请务必查阅相应平台的文档。
• 样式覆盖：页面级别的 style 优先级高于 globalStyle，合理利用可以减少重复代码。
• 图标路径：确保图标的路径正确，特别是在使用相对路径时要注意目录结构。
• 性能优化：通过分包加载和预下载规则来提升应用的加载速度，尤其是在网络条件不佳的情况下尤为重要。
• 测试与调试：由于不同平台可能存在差异，建议在多个平台上进行全面测试，包括真机测试。

manifest.json

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

manifest.json 基本结构

{
  "appid": "",
  "name": "MyUniApp",
  "versionName": "1.0.0",
  "versionCode": "100",
  "uniStatistics": {
    "enable": false
  },
  "app-plus": {
    // App端特有配置
  },
  "mp-weixin": {
    // 微信小程序特有配置
  },
  "mp-alipay": {
    // 支付宝小程序特有配置
  },
  "mp-baidu": {
    // 百度小程序特有配置
  },
  "mp-toutiao": {
    // 抖音小程序特有配置
  },
  // 其他小程序或快应用的配置...
}

重要配置项及说明

1. 基础信息配置

• appid: 应用的唯一标识符，通常由平台分配。
• name: 应用名称，显示在设备的应用列表中。
• versionName: 版本名称，用户可见的版本号。
• versionCode: 版本代码，用于内部版本控制，数字越大代表版本越新。

{
  "appid": "your-app-id",
  "name": "MyUniApp",
  "versionName": "1.0.0",
  "versionCode": "100"
}

2. uniStatistics（统计）

• enable: 是否启用 DCloud 提供的统计服务，默认为 false。

"uniStatistics": {
  "enable": false
}

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

• 包含了 Android 和 iOS 平台的相关配置。
• 可以设置启动图、状态栏样式、权限声明等。

"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 (微信小程序特有配置)

• 配置微信小程序特有的参数，如 appId、网络超时时间等。

"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 (支付宝小程序特有配置)

• 类似于微信小程序的配置，但针对支付宝小程序的特点进行调整。

"mp-alipay": {
  "appid": "20181234567890",
  "usingComponents": true,
  "titleBarColor": "#ffffff"
}

注意事项

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

微信小程序配置