json_0">UniApp pages.json

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

1. globalStyle

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

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

2. topWindow / leftWindow / rightWindow

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

json">"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，框架会自动寻找路径下的页面资源。

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

4. style (页面级别)

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

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

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

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

json">"style": {"navigationStyle": "custom"
}

6. app-plus

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

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

7. tabBar

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

json">"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

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

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

9. condition & subPackages & preloadRule

• 用途：

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

  注意点：

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

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

注意事项总结

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

json_168">manifest.json

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

json__172">manifest.json 基本结构

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: 版本代码，用于内部版本控制，数字越大代表版本越新。

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

2. uniStatistics（统计）

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

json">"uniStatistics": {"enable": false
}

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

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

json">"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、网络超时时间等。

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

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

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

注意事项

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

微信小程序配置