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

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

https://mp.weixin.qq.com

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"}
}

说明

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

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

tab 好看一点了吧

今天先到这里吧。。。

微信小程序开发一 tabbar图标和颜色相关推荐

微信小程序开发引入icon图标出现小框的问题
在练习引入icon图标时无论怎么更改都会出现小框首先检查是否在iconfont.json中的font_family是否写了iconfont "font_family": &quo ...
如何在微信小程序开发中引入图标
1.在iconfont中将需要的图标加入至购物车 2.选择下载代码 3.将下载好的代码解压缩 4.使用cmd命令进入到解压之后的文件夹中 5.输入cnpm install -g iconfont-to ...
微信小程序开发——动态改变按钮背景颜色
在wxss文件中可以简单地设置button的背景颜色和各种样式,然而,这样的样式设计不能够动态改变.那么,如何动态改变控件的样式呢?下面以button为例来介绍. 此方法不用修改wxss文件,首先,在 ...
微信小程序开发——修改页面的背景颜色
背景颜色要设置为灰色,于是我给最外层的view设置了样式,如下: .order-home {background: #F3F3F3;} 结果发现只有最外层view内的元素背景颜色才为灰色,下面空余的地 ...
微信小程序开发工具介绍及安装（中）
小程序开发工具的安装方法微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台.以下是关于Windows.macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍. ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序开发和网页Web开发的区别
小程序和web开发的区别主要在前端.小程序的主要操作平台在微信上.微信服务器的前端代码和从用户数据库后台传过来的数据,通过微信内置的解释器进行拼接,解释为我们平时看到的页面.Web 开发仍然具有相同的 ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...

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

微信小程序开发一 tabbar图标和颜色相关推荐

最新文章

热门文章

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

微信小程序开发 一 tabbar图标和颜色相关推荐

最新文章

热门文章

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

微信小程序开发一 tabbar图标和颜色相关推荐