小程序模板網(wǎng)

小程序項(xiàng)目的全局配置

發(fā)布時(shí)間:2021-06-08 08:32 所屬欄目:小程序開發(fā)教程

全局配置

window

用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

  • navigationBarBackgroundColor HexColor #000000 導(dǎo)航欄背景顏色,如 #000000

  • navigationBarTextStyle String white 導(dǎo)航欄標(biāo)題顏色,僅支持 black / white

  • navigationBarTitleText String 導(dǎo)航欄標(biāo)題文字內(nèi)容

    wepy框架里面不能直接在app里面設(shè)置,需要在使用的頁面里面設(shè)置,否則不會(huì)顯示

  • navigationStyle String default 導(dǎo)航欄樣式,僅支持以下值:
    • default 默認(rèn)樣式
    • custom 自定義導(dǎo)航欄,只保留右上角膠囊按鈕。
  • backgroundColor HexColor #ffffff 窗口的背景色

    當(dāng)我們?cè)谖⑿判〕绦騤son中設(shè)置backgroundColor 時(shí),實(shí)際在電腦的模擬器中根本看不到效果。
    這是因?yàn)?nbsp;backgroundColor 指的窗體背景顏色,而不是頁面的背景顏色,即窗體下拉刷新或上拉加載時(shí)露出的背景。在電腦的模擬器中是看不到這個(gè)動(dòng)作的,所以會(huì)讓人誤以為這個(gè)配置是無效的。

  • backgroundTextStyle String dark 下拉 loading 的樣式,僅支持 dark / light

  • backgroundColorTop String #ffffff 頂部窗口的背景色,僅 iOS 支持 微信客戶端 6.5.16

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

  • enablePullDownRefresh Boolean false 是否開啟當(dāng)前頁面的下拉刷新。
    詳見 Page.onPullDownRefresh

  • onReachBottomDistance Number 50 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位為px。
    詳見 Page.onReachBottom

  • pageOrientation String portrait 屏幕旋轉(zhuǎn)設(shè)置,僅支持 auto / portrait
    詳見 響應(yīng)顯示區(qū)域變化 微信客戶端 6.7.3

用例:

window: {
    // 導(dǎo)航欄背景顏色
    "navigationBarBackgroundColor": "#FF6666",
    // 導(dǎo)航欄標(biāo)題顏色,僅支持 black / white
    "navigationBarTextStyle": "white",
    // 航欄樣式,僅支持以下值: default, custom 自定義導(dǎo)航欄,只保留右上角膠囊按鈕
    "navigationStyle": "default",
    // 窗口的背景色
    "backgroundColor": "#e5e5e5",
    // 下拉 loading 的樣式,僅支持 dark / light
    "backgroundTextStyle": "dark",
    // 屏幕旋轉(zhuǎn)設(shè)置,僅支持 auto / portrait
    "pageOrientation": "portrait",
}

Tabbar

如果小程序是一個(gè)多tab應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn),以及tab切換時(shí)顯示的對(duì)應(yīng)頁面。

  • color tab上的文字默認(rèn)顏色,僅支持十六進(jìn)制顏色
  • selectedColor tab上的文字選中時(shí)的顏色,僅支持十六進(jìn)制顏色
  • backgroundColor tab的背景色,僅支持十六進(jìn)制顏色
  • borderStyle tabbar上邊框的顏色, 僅支持 black / white
  • list tab的列表,詳見 list 屬性說明,最少2個(gè)、最多5個(gè) tab
  • position tabBar的位置,僅支持 bottom / top

list 接受一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè) tab。tab 按數(shù)組的順序排序,每個(gè)項(xiàng)都是一個(gè)對(duì)象,其屬性值如下:

  • pagePath 頁面路徑,必須在 pages 中先定義
  • text tab上按鈕文字
  • iconPath 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支持網(wǎng)絡(luò)圖片。當(dāng) postion 為 top 時(shí),不顯示 icon。
  • selectedIconPath 選中時(shí)的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支持網(wǎng)絡(luò)圖片。當(dāng) postion 為 top 時(shí),不顯示 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'
      }
    ]
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26120.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢