小程序入门之自定义导航条和底部navigationBar的配置

小程序的自制导航条

很多小程序的导航条都是自己写的，拥有自己的风格

准备工作

工具：微信开发者工具
实现效果：

首先，桌面新建文件夹，然后通过微信开发者工具测试号打开文件夹。

一开始是这几个文件，红色的是我之前建的，觉得可以写文章记一下就没有重新做了。找到pages里面的两个文件index和log页，删除这两个文件。然后在pages里面新建一个文件夹，取个名字，再在这个文件夹里面新建page

我建了三个

然后在app.json中就会这样

"pages": [
  "pages/shouye/shouye",
  "pages/rank/rank",
  "pages/profile/profile"
 ],

之前的index和log的两个路径要删掉。
然后在windows同级下加入一段代码

"tabBar": {
  "list": [
   {
    "pagePath": "pages/shouye/shouye",
    "text": "首页",
    "iconPath": "/images/home_normal.png",
    "selectedIconPath": "/images/home_active.png"
   },
   {
    "pagePath": "pages/rank/rank",
    "text": "榜单",
    "iconPath": "/images/subject_normal.png",
    "selectedIconPath": "/images/subject_active.png"
   },
   {
    "pagePath": "pages/profile/profile",
    "text": "我的",
    "iconPath": "/images/profile_normal.png",
    "selectedIconPath": "/images/profile_active.png"
   }
  ]
 },

pagePath是页面路径，text是下面的字，iconPath是未选中状态的图片，就是那个白色的，最后一个就是选中状态的图片，绿色的。图片放在pages同级下新建一个名为images的文件夹里面。
这个做好了就可以写头部的了，

##自制导航条，先在app.json的windows加一行代码

"navigationStyle":"custom"

下面是总的app.json的代码

{
 "pages": [
  "pages/shouye/shouye",
  "pages/rank/rank",
  "pages/profile/profile"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "Weixin",
  "navigationBarTextStyle": "black",
  "navigationStyle":"custom"
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/shouye/shouye",
    "text": "首页",
    "iconPath": "/images/home_normal.png",
    "selectedIconPath": "/images/home_active.png"
   },
   {
    "pagePath": "pages/rank/rank",
    "text": "榜单",
    "iconPath": "/images/subject_normal.png",
    "selectedIconPath": "/images/subject_active.png"
   },
   {
    "pagePath": "pages/profile/profile",
    "text": "我的",
    "iconPath": "/images/profile_normal.png",
    "selectedIconPath": "/images/profile_active.png"
   }
  ]
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

文件目录：

开始

新建一个component文件夹，这个文件夹里面就是你以后要用到的所以组件，都可以放到这里来写。我这里的自制导航条也是相当于一个组件。在这个里面新建nav-bar文件夹，然后##新建component##注意，是component,不是page。

引入
在需要用这个组件的页面wxml里面直接写

然后在.json文件中

{
  "usingComponents": {
    "nav-bar":"/component/nav-bar/nav-bar"
  }
}

接下来就是要写头部了
感觉有点啰嗦了，直接上代码吧
** nav-bar.wxml**

  
  
    
    
      {{title}}
    
  

topHeight是电量那一行的高度
class="container"那个view里面可以写自己的东西了，可以你想要的东西都放进去，返回按钮，搜索框啥的
** nav-bar.wxss**

.container{
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 99;
}
.nav-bar{
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 position: relative;
 font-size: 34rpx;
}

** nav-bar.js**

Component({
  /**
   * 组件的属性列表
   */
  properties: { //为data的一个映射，所以this.data.可以取得这里的数据
    title: {			// 设置标题
      type: String,
      value: ''
    },
    statusBarColor:{
      type:String,
      value:'#fff'
    },
    navBarColor:{
      type:String,
      value:"#fff"
    },
    titleColor:{
      type:String,
      value:"#000"
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    navBarStyle:"",
    statusBarStyle:"",
    topHeight:0,
  },
  lifetimes:{
    attached:function(){
      let navBarStyle = `background-color:${this.data.navBarColor};
      height:${wx.db.navBarHeight}px; color:${this.data.titleColor}`
      let statusBarStyle = `background-color:${this.data.statusBarColor};
      height:${wx.db.statusBarHeight}px;`

      let topHeight = wx.db.statusBarHeight + wx.db.navBarHeight
      
      this.setData({
        navBarStyle, //navBarStyle:navBarStyle
        statusBarStyle,
        topHeight
      })
      
      
    },
    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    goBack: function () {					// 返回事件
      console.log("退后")
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

``是拼接符，不对数据进行计算，tab键上的波浪号。最后的方法是返回按钮的点击事件，如果需要的话可以加一张图片然后绑定点击事件执行goBack方法

忘记了，app.js里面还写了一段代码

    wx.db = {}
    wx.db.url = (url)=>{
      return `https://api.douban.com${url}`
    }

    let info = wx.getSystemInfoSync();
    wx.db.statusBarHeight = info.statusBarHeight

    if(info.platform === 'android'){
      wx.db.navBarHeight = 48
    }else{
      wx.db.navBarHeight = 44
    }

写在onLaunch里面
这个是获取不同型号手机物理顶部高度的
那个url拼接的不用管，因为是我仿造一个豆瓣电影的一个页面
后续可能会补充

shouye.wxml

<nav-bar title="首页" statusBarColor="#41bd55" navBarColor="#41bd55" titleColor="#fff"> 
</nav-bar>