小程序模板网

小程序项目的全局配置

发布时间:2021-06-08 08:32 所属栏目:小程序开发教程

全局配置

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

  • navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000

  • navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white

  • navigationBarTitleText String 导航栏标题文字内容

    wepy框架里面不能直接在app里面设置,需要在使用的页面里面设置,否则不会显示

  • navigationStyle String default 导航栏样式,仅支持以下值:
    • default 默认样式
    • custom 自定义导航栏,只保留右上角胶囊按钮。
  • backgroundColor HexColor #ffffff 窗口的背景色

    当我们在微信小程序json中设置backgroundColor 时,实际在电脑的模拟器中根本看不到效果。
    这是因为 backgroundColor 指的窗体背景颜色,而不是页面的背景颜色,即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的,所以会让人误以为这个配置是无效的。

  • backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light

  • backgroundColorTop String #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16

  • backgroundColorBottom String #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16

  • enablePullDownRefresh Boolean false 是否开启当前页面的下拉刷新。
    详见 Page.onPullDownRefresh

  • onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
    详见 Page.onReachBottom

  • pageOrientation String portrait 屏幕旋转设置,仅支持 auto / portrait
    详见 响应显示区域变化 微信客户端 6.7.3

用例:

window: {
    // 导航栏背景颜色
    "navigationBarBackgroundColor": "#FF6666",
    // 导航栏标题颜色,仅支持 black / white
    "navigationBarTextStyle": "white",
    // 航栏样式,仅支持以下值: default, custom 自定义导航栏,只保留右上角胶囊按钮
    "navigationStyle": "default",
    // 窗口的背景色
    "backgroundColor": "#e5e5e5",
    // 下拉 loading 的样式,仅支持 dark / light
    "backgroundTextStyle": "dark",
    // 屏幕旋转设置,仅支持 auto / portrait
    "pageOrientation": "portrait",
}

Tabbar

如果小程序是一个多tab应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。

  • color tab上的文字默认颜色,仅支持十六进制颜色
  • selectedColor tab上的文字选中时的颜色,仅支持十六进制颜色
  • backgroundColor tab的背景色,仅支持十六进制颜色
  • borderStyle tabbar上边框的颜色, 仅支持 black / white
  • list tab的列表,详见 list 属性说明,最少2个、最多5个 tab
  • position tabBar的位置,仅支持 bottom / top

list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

  • pagePath 页面路径,必须在 pages 中先定义
  • text tab上按钮文字
  • iconPath 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
  • selectedIconPath 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。

用例:

tabBar: {
    color: '#666666',
    selectedColor: '#ff6600',
    position: 'bottom',
    backgroundColor: '#fff',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'pages/home/index',
        text: '首页',
        iconPath: 'assets/img/icon-1.png',
        selectedIconPath: 'assets/img/icon-1-selected.png'
      },
      {
        pagePath: 'pages/search/index',
        text: '搜索',
        iconPath: 'assets/img/icon-2.png',
        selectedIconPath: 'assets/img/icon-2-selected.png'
      },
      {
        pagePath: 'pages/sell/index',
        text: '排行榜',
        iconPath: 'assets/img/icon-3.png',
        selectedIconPath: 'assets/img/icon-3-selected.png'
      },
      {
        pagePath: 'pages/spike/index',
        text: '抢购',
        iconPath: 'assets/img/icon-2.png',
        selectedIconPath: 'assets/img/icon-2-selected.png'
      },
      {
        pagePath: 'pages/profile/index',
        text: '我的',
        iconPath: 'assets/img/icon-5.png',
        selectedIconPath: 'assets/img/icon-5-selected.png'
      }
    ]
}


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26120.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询