微信小程序添加底部导航栏+实现点击跳转代码书写

类比大麦网的底部导航栏作为案例来书写流程：

建立如下文件夹：（标红为底部导航栏的导航文件夹，某些需要新建）

在app.json中添加如下代码：

 

 整体代码为：

{
    "pages": [
        "pages/index/index",
        "pages/scene/scene",
        "pages/member/member",
        "pages/wallet/wallet",
        "pages/mine/mine"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "有洁癖的懒羊羊",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "精选",
        "iconPath": "pages/images/index.png",
        "selectedIconPath": "pages/images/index-active.png"
      },
      {
        "pagePath": "pages/scene/scene",
        "text": "现场",
        "iconPath": "pages/images/scene.png",
        "selectedIconPath": "pages/images/scene-active.png"
      },
      {
        "pagePath": "pages/member/member",
        "text": "会员",
        "iconPath": "pages/images/member.png",
        "selectedIconPath": "pages/images/member-active.png"
      },
      {
        "pagePath": "pages/wallet/wallet",
        "text": "票夹",
        "iconPath": "pages/images/wallet.png",
        "selectedIconPath": "pages/images/wallet-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "pages/images/mine.png",
        "selectedIconPath": "pages/images/mine-active.png"
      }
    ]
    }
}

在images文件夹中分别添加被选中和未被选中的图片：

 在index.wxml中添加点击跳转代码：

  精选
  点击跳转
  跳转页面

 在index.js中添加点击跳转代码：

// index.js
Page({
  jumpPage:function() {
    wx.switchTab({
      url: '/pages/member/member'
    })
  }
})

最终结果界面：