WeChatウィジェット入門:ナビゲーションバースタイル、tabBarナビゲーションバー

ナビゲーションバースタイルの設定

ウィジェットのナビゲーションバースタイルはapp.jsonで定義します.
ここではナビゲーション、背景黒、文字白、文字内容テストウィジェットを設定します.
app.json内容:

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": " ",
    "navigationBarTextStyle":"#fff"
  }
}

Windowsのスタイルの説明:
効果:

tabBarナビゲーションバー

tabBarは、上部または下部に配置して、異なる機能ページの切り替えに使用することができます.
tabBarもapp.jsonで定義してappを見てください.jsonのtabBarに関する定義:

"tabBar": {
    "selectedColor": "#1296db",
    "list": [{
      "pagePath": "pages/index/index",
      "text": " ",
      "iconPath": "images/ico-home.png",
      "selectedIconPath": "images/ico-home-d.png"
    },{
      "pagePath": "pages/setting/setting",
      "text": " ",
      "iconPath": "images/ico-setting.png",
      "selectedIconPath": "images/ico-setting-d.png"
    },{
      "pagePath": "pages/help/help",
      "text": " ",
      "iconPath": "images/ico-help.png",
      "selectedIconPath": "images/ico-help-d.png"
    }]
  }

効果:
tabBar関連プロパティ定義の説明:
tabBar list定義の説明:
tabBarは1つの配列で、最低2個、最大5個のtabしか配置できません.tabは配列の順序で並べ替えられます.