uni-app学习day02-pages.json

180 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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

  1. 是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
  2. 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。