持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第25天,点击查看活动详情
uni-app学习第二天,今天主要学习一下,pages.json中的属性。下一篇将学习uniapp全局文件的设置。
globalStyle
navigationStyle设置为custom,可以自定义导航栏,因为项目可能需要不同角色进去之后看到不同的导航栏,用原生的导航就不满足了。
| 属性 | 描述 |
|---|---|
| navigationBarBackgroundColor | 颜色及状态栏前景颜色 |
| navigationBarTitleText | 导航栏标题文字内容 |
| navigationStyle | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏 |
| backgroundColor | 下拉显示出来的窗口的背景色 |
| backgroundTextStyle | 下拉 loading 的样式,仅支持 dark / light |
| enablePullDownRefresh | 是否开启下拉刷新。 |
| onReachBottomDistance | 页面上拉触底事件触发时距页面底部距离,单位只支持px |
| backgroundColorTop | 顶部窗口的背景色(bounce回弹区域) |
| backgroundColorBottom | 底部窗口的背景色(bounce回弹区域) |
| titleImage | 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 |
| transparentTitle | 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 |
| titlePenetrate | 导航栏点击穿透 |
| pageOrientation | 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape |
| animationType | 窗口显示的动画效果 |
| animationDuration | 窗口显示动画的持续时间,单位为 ms |
| app-plus | 设置编译到 App 平台的特定样式 |
| h5 | 设置编译到 H5 平台的特定样式 |
| mp-alipay | 设置编译到 mp-alipay(支付宝小程序) 平台的特定样式 |
| mp-weixin | 设置编译到 mp-weixin(微信小程序) 平台的特定样式 |
| mp-baidu | 设置编译到 mp-baidu(百度小程序) 平台的特定样式 |
| mp-toutiao | 设置编译到 mp-toutiao(字节跳动小程序) 平台的特定样式 |
| mp-lark | 设置编译到 mp-lark(飞书小程序 ) 平台的特定样式 |
| mp-qq | 设置编译到 mp-qq(QQ小程序) 平台的特定样式 |
| mp-kuaishou | 设置编译到 mp-kuaishou(快手小程序) 平台的特定样式 |
| mp-jd | 设置编译到 mp-jd(京东小程序) 平台的特定样式 |
| usingComponents | 引用小程序组件 |
| leftWindow | 当存在 leftWindow 时,默认是否显示 leftWindow |
| topWindow | 当存在 topWindow 时,默认是否显示 topWindow |
| rightWindow | 当存在 rightWindow 时,默认是否显示 rightWindow |
| maxWidth | 单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) |
easycom
- 是否开启自动扫描,开启后将会自动扫描符合
components/组件名称/组件名称.vue目录结构的组件 - custom 以正则方式自定义组件匹配规则。如果
autoscan不能满足需求,可以使用custom自定义匹配规则
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
}
}
easycom方式引入的组件不需在页面内import,也不需要在components内声明,就可在任意页面使用easycom方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件- 在组件名完全一致的情况下,
easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式) - 直接在
pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。 easycom只处理vue组件,不处理小程序专用组件(如微信的wxml格式组件)。不处理后缀为.nvue的组件。但vue组件也可以全端运行,包括小程序和app-nvue。