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