微信小程序入门（三）：编写导航栏

现在每一个app首页都会有一个底部的导航栏，微信小程序也不例外，这篇文章就会进行一个简单导航栏的编写，现在编写一个底部导航栏包含"首页","信息","我的"三栏的导航栏。

针对编写导航栏之前我们需要准备几张图片作为导航栏的配图，推荐去阿里巴巴矢量图标库 去下载"首页","信息","我的"的配图，介意每个栏目下载两张同样样式，颜色不同的图片，以做导航栏选中，未选中之分，下载文件后进行重命名，下载图片时顺便将起对应的色值也便记下来，以备设置导航栏字体时使用，（#1afa29 #8a8a8a）。

3-1.png

在项目中创建放置图片的文件夹images，将下载好的图片放置到该文件夹之下；

3-2.png 3-3.png

创建首页，信息，我的三个栏目对应的页面文件,并在app.json页面进行注册

3-4.png

app.js页面注册代码：

"pages":[
    "pages/index/index",
    "pages/message/message",
    "pages/mine/mine"
  ]

注册完成后则在app.js文件中编写导航栏，导航栏在小程序中使用官方提供的tabBar
tab属性：

• "color"未激活状态下文字的颜色
• "selectedColor" tab文字激活的颜色
• "borderStyle" tabbar上边框的夜色
• "backgroundColor" tab的背景颜色
• "pagePath"页面的路径
• "text" tab上显示的文字
• "iconPath" tab上显示的默认的未激活的图标路径
• "selectedIconPath" tab上显示的默认的激活的图标路径

app.js文件代码

{
  "pages":[
    "pages/index/index",
    "pages/message/message",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1afa29 ",
    "borderStyle": "black",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/tab_index_normal.png",
      "selectedIconPath": "images/tab_index_selected.png"
    },{
      "pagePath": "pages/message/message",
      "text": "信息",
      "iconPath": "images/tab_message_normal.png",
      "selectedIconPath": "images/tab_message_selected.png"
    },{
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/tab_mine_normal.png",
      "selectedIconPath": "images/tab_mine_selected.png"
    }]
  }
}

涉及到导航栏跳转指定页面代码如下：
index.wxml

<view class='container'>
<text>首页</text>
</view>

message.wxml

<view class='container'>
<text>信息</text>
</view>

mine.wxml

<view class='container'>
<text>我的</text>
</view>

编写完成进行项目的编译，编译完成则可以看到一个简单的导航栏就完成了！

3-5.png