怎样设置微信小程序tab图标

　　微信小程序tab图标有很多种类型，不同的类型对应不同的开发方式，想要tab图标足够美观，那就跟着小编一起来学习一下开发教程吧。

　　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是页面的一些属*123123

　　这个样子太丑了 我们先来美化一下这个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"

　　}

　　}

　　说明

　　字段都比较简单就不详细说了 其中 “iconPath”: “./res/icon_tab_me.png”是图片的路径

　　自己在项目里创建一个res文件夹，然后放入需要的图片

　　tab 好看一点了吧

　　参照以上资料，你就可以设置好看又实用的微信小程序tab图标了，怎么样，是不是很简单呢?希望帮助到大家。更多相关资料请关注微信小程序素材网。

　　微信小程序tab标签开发教程

　　怎样实现微信小程序tab切换

　　微信小程序tab选项卡不显示怎么办