微信小程序开发一 tabbar图标和颜色

编程知识更新时间:2023-04-04 02:17:41

前期准备 ：注册，填材料，验证等等：

https://mp.weixin.qq

1.浏览一遍简易教程，下载相应的开发工具

写一个小例子

点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为

{
  "pages":[
    "pages/fightings/home", 
    "pages/publish/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/fightings/home",
        "text": "挑战"
      },
      {
        "pagePath": "pages/publish/home",
        "text": "发布"
      },
      {
        "pagePath": "pages/mine/home",
        "text": "我"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑战",
    "navigationBarTextStyle":"black"
  }
}

说明

pages就是我们有多少个页面
tabbar是页面底部的tab
window是页面的一些属性

这个样子太丑了我们先来美化一下这个tab

{
  "pages":[
    "pages/home/home",    
    "pages/fightings/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "color":"#666666",
    "selectedColor":"#f10b2e",

    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "大厅",
        "iconPath": "./res/icon_tab_home.png",
        "selectedIconPath": "./res/icon_tab_home_hl.png"
        },
        {
        "pagePath": "pages/fightings/home",
        "text": "挑战",
        "iconPath":"./res/icon_tab_fighting.png",
        "selectedIconPath":"./res/icon_tab_fighting_hl.png"
      },

      {
        "pagePath": "pages/mine/home",
        "text": "我",
        "iconPath": "./res/icon_tab_me.png",
        "selectedIconPath": "./res/icon_tab_me_hl.png"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑战",
    "navigationBarTextStyle":"black"
  }
}