1.下载微信小程序开发软件；
2.扫描二维码登录，在手机点击确认登录
3.新建一个项目，这里选择无APPID，如果需要填写APPID，需要到微信小程序里面注册，然后就可以获取APPID，填写项目名称，选择项目目录（注释：微信小程序不会自己创建主目录文件，所以自己先建立一个项目文件夹，然后选择存放到这个文件夹中），添加项目，就生成了一个项目工程，这是注意有一个单选单按钮，如果取消这个单选按钮，就会创建一个空的工程，我选择选中这个按钮；
4.然后得到一个新的工程，现在在下方要放一个tabbar，先新建一个image目录，点击目录右键->新建->目录
5.点击image文件夹->硬盘打开，将图片拉入次目录中，注意：图片大小限制为40kb,尺寸81px * 81px；
6。先看一下目录结构，程序有两个目录，一个pages和utils，其中pages里面又包含index和logs，这个两个目录是两个页面（第一个页面就是运行程序看到的，第二页面是点击我们的头像出来的），我们就要这两个页面作为tabbar两个页面；
点击点击app.json写tabbar控件；为了方便我把image放到了根目录下，选择image目录点击右键->硬盘打开->将Image目录copy到根目录下，删除原目录就可以了，代码如下：
方法说明：
color：未选择字体颜色
selectedColor：选择字体颜色
borderStyle:tabbar上方线的颜色white（仅支持白色和黑色）
backgroundColor：tabbar背景颜色
networkTimeout：设置网络超时时间
debug：设置debug模式开启
效果如图：
注意：list的页面不许在app.json的pages里面注册过；
二：TabBar不出现的一种原因
学习微信小程序中，遇到底部的TabBar不出现的问题。经过多番尝试，终于解决问题。在此记录问题产生的原因和对策。下面先描述错误现象，接着指出错误原因，最后提供正确的实例。
错误现象是，项目的app.json使用以下代码，却没有如期望那样在屏幕底部出现TabBar。
{
"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
],
"window": {
"backgroundTextStyle": "dark ",
"navigationBarBackgroundColor": "#ddd",
"navigationBarTitleText": "Tabbar Demo",
"navigationBarTextStyle": "black",
"backgroundColor": "#ff0000"
},
"tabBar": {
"color": "#000000",
"borderStyle": "#000",
"selectedColor": "#9999FF",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}
]
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
底部没有出现TabBar，如图1所示。
图1 左侧的屏幕效果图中，底部没有TabBar
为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员，也就是在tabBar的list数组内没有链接clickDemo页面的条目。
具体对策有两种。一，我们在list数组内加入链接clickDemo页面的条目，如图2所示。图2中的红色矩形框内的代码是新加的，下面给出了这段代码。二，把pages数组的第一项设置为"pages/index/index"，或者设置为"pages/logs/logs"。也就是说，pages数组的第一项必须是tabBar的list数组的一员。
图2 解决底部不出现TabBar的对策
对策一在app.json内添加的代码如下。注意，tabBar的list数组的条目之间要用逗号分隔。
{
"pagePath": "pages/clickDemo/clickDemo",
"text": "事件Demo",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}
题外话，微信小程序的开发工具需要大大大提升，包括它的使用手册。本文提及的问题是一个隐晦的约定。开发人员违反约定的话，开发工具应该快速指出来，甚至给出改进措施。否则，会浪费开发人员大量时间，破坏他/她们的情绪，最后可能形成“开发微信小程序真费劲”的结论。祝愿微信小程序开发工具越来越好用。
三： 只针对tabBar上的页面一个BUG
在安卓机上，第二次加载的tabBar页面(即非第一次加载程序的首个tabBar)在获取屏幕高度时会偏小大概tabBar高度。
可以这么测试
开启调试模式
在首次点击tabBar页面时会发现console那个图标会从上往下动
解决办法:
就是不要在页面加载的时候过去屏幕高度，即不要直接在onLoad，onShow和onReady上获取屏幕高度
或者要在这些地方获取的话使用setTimeout，延时大概1s，1s的作用是让这个页面已经加载完毕才获取
收藏