小程序入门到实现底部导航栏tabbar

我会带着你远行 2022-02-03 01:53 703阅读 0赞

### 参考文档 ###

[小程序开发·指南·框架·API等][API]  
[小程序介绍·开发·注册·主体信息·支付][Link 1]  
[小程序·开发支持][Link 2]  
[开发者社区][Link 3]  
[小程序·云开发][Link 4]

### Hello World! ###

1.  [下载微信开发者工具][Link 5]
2.  [登录微信公众平台官网][Link 6]
3.  登录后即可看到后台，没登录先注册  
    ![后台][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]
4.  拉到最底部里面可以查看或则设置你的AppID
5.  打开我们的微信开发者工具，新建一个项目。
6.  接下来可以使用我们自己的ID,或则点击小程序测试号，生成一个测试号  
    ![id][]
7.  你的第一个小程序项目就这样诞生了  
    ![第一个hello world][hello world]
8.  恭喜你成功生成第一个hello world!要开香槟庆祝记得艾特我。
9.  如果需要设置合法域名，在后台找到开发，点击开发设置，可以设置你的域名，当然，同时这里也可以设置你的id  
    ![域名][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]
10. 当然，如果在开发中可以直接使用微信开发者工具不校验域名，在详情那里  
    ![图片][20190509070429628.png]

### 什么是小程序 ###

> 微信小程序，简称小程序，英文名Mini Program。小程序是一种不需要下载安装即可使用的应用，它体现了应用“触手可及”的梦想（用户扫一扫，或则搜一搜即可打开应用）.也体现了“用完即走”的理念；用户不用关心是否安装太多应用的问题。应用将无处不在，随即可用，但又不需要安装卸载。

### 从网页开发迁移到小程序开发 ###

> 对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

##### 线程和环境 #####

1.  网页开发渲染线程和脚本线程是互斥的，也就是长时间的脚本运行会导致页面失去响应。
2.  而在小程序中，二者是分开的，分别运行在不同的线程中。逻辑层运行在 JSCore 中，并没有一个完整浏览器对象。JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。而其中 WXML 模板和 WXSS 样式工作在渲染层，渲染层的界面使用了WebView 进行渲染；一个小程序存在多个界面，所以渲染层存在多个WebView线程

##### 代码构成 #####

1.  网页开发的代码是:html+css+js,这样的组合
2.  而小程序的代码结构是：JSON配置+WXML 模板+WXSS 样式+JS 逻辑交互。其中 WXML 充当的就是类似 HTML 的角色。WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，比如尺寸单位rpx。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

### 底部导航栏的实现上集 ###

[小程序全局配置详解][Link 7]

##### 首先要了解app.json #####

*  原本的代码结构

{ 
      "pages": ["pages/index/index", "pages/logs/logs"],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      }
    }

*  既然是json文件，我们不能在里面添加字段，而且必须使用双引号
 *  pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
 *  window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
 *  如果我们想要定义一个文件的话，直接在pages字段里面写入

##### 添加两个文件 #####

"pages": [
        "pages/index/index",
        "pages/demo1/demo1",
        "pages/demo2/demo2"
      ],

这样就会自动生成两个组件了，而logs没有配置则不会导航到。如果想要导航到该页面，点击普通编译，切换为添加编译模式即可  
![切换编译模式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]

##### 生成底部导航栏 #####

在app.json添加tabBar字段，在和pages和window同级字段下添加

{ 
      "pages": [
        ......
      ],
      "window": { 
    	......
      },
      "tabBar": { 
        "list": [
          { 
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          { 
            "pagePath": "pages/demo1/demo1",
            "text": "案例1"
          },
          { 
            "pagePath": "pages/demo2/demo2",
            "text": "案例2"
          }
        ]
      }
    }

##### 看完导航栏会觉得干瘪瘪的，添加一个路径给它 #####

*  在项目新建文件夹assets，放入六张小于40kb，尺寸为 81px \* 81px的图片icon，配置iconPath和selectedIconPath  
    ![效果如图][20190509074313630.png]
 *  list代码如下

"list": [
          { 
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "assets/home.png",
            "selectedIconPath": "assets/home-active.png"
          },
          { 
            "pagePath": "pages/demo1/demo1",
            "text": "案例1",
            "iconPath": "assets/message.png",
            "selectedIconPath": "assets/message-active.png"
          },
          { 
            "pagePath": "pages/demo2/demo2",
            "text": "案例2",
            "iconPath": "assets/profile.png",
            "selectedIconPath": "assets/profile-active.png"
          }
        ]

*  当然可以改字体颜色和背景颜色等

"tabBar": { 
        "color": "#66ccff",
        "selectedColor": "#e8cd56",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
    		......
        ]
      },

*  最后的效果如下  
    ![如图][20190509075326913.png]
 *  关于导航栏的说明  
    list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象。配置入下图  
    ![解释][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]

### 自定义tabbars ###

当有时候我们想改一下字体大小，或则想要选中时让导航更加突出,app.json已经没有属性直接配置满足我们人类的需要了…微信小程序给我们提供了自定义的tabbars…接下来通过字段`custom`配置自定义组件…不管东西南北风，现在我们的tabs引入`"custom": true,`，然后发现底部导航栏不见了  
![底部导航栏隐藏了][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 4]

1.  在项目根目录下添加 tabBar 代码文件，如下图  
    ![如图][20190509125527186.png]
2.  在index.js写入我们的数据

Component({ 
      data: { 
        selected: 0,
        color: "#7A7E83",
        selectedColor: "#3cc51f",
        list: [
          { 
            pagePath: "/pages/index/index",
            text: "首页",
            iconPath: "/assets/home.png",
            selectedIconPath: "/assets/home-active.png"
          },
          { 
            pagePath: "/pages/demo1/demo1",
            text: "案例1",
            iconPath: "/assets/message.png",
            selectedIconPath: "/assets/message-active.png"
          },
          { 
            pagePath: "/pages/demo2/demo2",
            text: "案例2",
            iconPath: "/assets/profile.png",
            selectedIconPath: "/assets/profile-active.png"
          }
        ]
      },
      attached() { 
      },
      methods: { 
        switchTab(e) { 
          const data = e.currentTarget.dataset
          const url = data.path
          wx.switchTab({  url })
          this.setData({ 
            selected: data.index
          })
        }
      }
    })

1.  在index.json里面写入

{ 
      "component": true
    }

1.  在模板文件index.wxml写入我们的样式，覆盖原先的文件

<cover-view class="tab-bar">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{ {list}}" wx:key="index" class="tab-bar-item" data-path="{ {item.pagePath}}" data-index="{ {index}}" bindtap="switchTab">
        <cover-image src="{ {selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: { { selected === index ? selectedColor : color}}">{
       {item.text}}</cover-view>
      </cover-view>
    </cover-view>

1.  接下来只是样式问题了index.wxss

.tab-bar { 
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-bar-border { 
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item { 
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item cover-image { 
      width: 27px;
      height: 27px;
    }
    
    .tab-bar-item cover-view { 
      font-size: 10px;
    }

1.  接下来需要在各个组件内部配置`"usingComponents": {}`,比如page/index/index.json  
    ![如图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 5]
2.  需要什么样式和功能直接改js或css即可
3.  推荐用 fixed 在底部的 `<cover-view> + <cover-image>` 组件渲染样式，以保证 tabBar 层级相对较高。
4.  data是界面和逻辑之间的桥梁，而且微信使用单向数据流绑定，就像react一样，更改数据使用的是`setState`,所以小程序如果同样改变数据需要的绑定一个方法

### 实现底部导航栏大结局 ###

以上是官方直接给我们提供的导航栏，回想我们的MVVM框架，比如vue，它实现导航`router-link`,而react使用的是`Link`,ng直接在里面添加`routerLink`；也是一个元素（标签）实现跳转。那么我们可以直接使用元素跳转即可

##### navigator #####

其实就是页面链接。我们如果要实现自定义导航栏，如果是页面内部跳转,我们需要使用`url:当前小程序内的跳转链接`,`target: 在哪个目标上发生跳转，默认当前小程序`，`open-type:跳转方式,默认：navigate（，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。）`;其余属性和方法查看：[https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html][https_developers.weixin.qq.com_miniprogram_dev_component_navigator.html]  
当然基本高亮样式都是必不可少的，hover-class

##### 实现顶部导航栏吧 #####

1.  新建一个项目，在新建三个组件

"pages": [
        "pages/index/index",
        "pages/nav/nav",
        "pages/nav1/nav1"
      ],

1.  我们在index.wxml,nav.wxml,nav1.wxml相同的代码

<view class="btn-area">
      <navigator url="../index/index" hover-class="navigator-hover" class='nav' open-type='redirect' >
        跳转到index
      </navigator>
      <navigator url="../nav/nav" hover-class="navigator-hover" class='nav' >
        跳转到nav
      </navigator>
      <navigator url="../nav1/nav1" hover-class="navigator-hover" class='nav' >
        跳转到nav1
      </navigator>
    </view>

1.  先输入相同的样式(index.wxss,nav.wxss,nav1.wxss)

.btn-area{ 
      position: fixed;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .nav{ 
      flex: 1;
      text-align: center;
      font-size: 12px;
      padding-bottom: 10px;
    }

1.  在每一个样式添加高亮类
2.  index.wxss

.nav:first-child{  
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }

1.  nav.wxss

.nav:nth-child(2){  
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }

1.  nav1.wxss

.nav:last-child{  
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }

1.  观看一下样式默认会出现返回按钮，这显然不是我们想要的  
    ![如果][20190511092435204.png]
2.  我们可以利用`redirect`，来实现，例如当index.wxml跳转到nav.wxml时不要出现返回按钮

![结果][20190511093039519.png]  
大体思路都一致，其它补全即可。  
10. 但是我们发现有动画效果，因为它没有像我们的MVVM框架一样有路由填坑，比如：router-view，而且如果强制设置动画或路由属性，也达不到效果  
11. 而且冗杂的代码，加上其它

### 实现顶部导航栏第二部 ###

*  本以为上面那种自定义可以实现的话，我们可以自己写一些样式加上去即可，想怎么自定义就怎么自定义。所以我们用普通的元素来实现即可
 *  按照我们学网页的思路来写，点击添加一个类高亮的方式
 *  我们接着循环数据：wxml

<view class="container">
      <view wx:for="{ {nav}}" wx:key="item.id" data-index='{ {item.id}}' class='nav { {type==item.id?"active":""}}' bindtap='changeType'>{
       {item.name}}</view>
    </view>

*  wxss

.container{ 
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .nav{ 
      font-size: 16px;
      text-align: center;
      padding-bottom: 10px;
      flex: 1;
    }
    .active{ 
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }

*  js

//logs.js
    
    Page({ 
      data: { 
        nav:[
          {  id: 1, name: 'nav1' },
          {  id: 2, name: 'nav2' },
          {  id: 3, name: 'nav3'},
        ],
        type:1
      },
      onLoad: function (options) { 
        this.data.nav.forEach((item,i)=>{ 
          if(this.data.type == item.id){ 
            
          }
        })
      },
      changeType(){ 
        console.log(111)
      }
    })

*  只需要改变type即可成功，因为微信是单向数据绑定和react有点像，都是需要set数据或状态

changeType:function(event){ 
        this.setData({ 
          type:event.target.dataset.index
        })
        
      }

*  如果有什么需求这样的自定义导航栏更容易满足，因为样式都是我们自己写，而界面只需要根据导航栏获取数据即可

### 当然有时候导航栏在顶部，或则说为了和页面协调，我们有时需要配置window ###

##### 了解window的配置，上代码 #####

"window": { 
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true,
        "backgroundColor": "#fffade",
        "backgroundTextStyle":"dark"
      },

`"enablePullDownRefresh"`要开启才能下拉出现背景![剖析][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 6]

[http://www.cnblogs.com/xiao-ling-zi/p/9329612.html][http_www.cnblogs.com_xiao-ling-zi_p_9329612.html]  
[https://www.jianshu.com/p/04bf1103e40a][https_www.jianshu.com_p_04bf1103e40a]

[API]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/introduction.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/introduction/index.html
[Link 2]: https://mp.weixin.qq.com/cgi-bin/wx
[Link 3]: https://developers.weixin.qq.com/community/develop?idescene=1
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19050812
[Link 6]: https://mp.weixin.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220203/97219fb7babc41feba7ac9e716a5dbc0.png
[id]: /images/20220203/5b61d934c1264c6eba6e09a4a000ae6e.png
[hello world]: /images/20220203/760a40ac437c4b40a07d7072f569a117.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220203/4fde0a16a25747c0bef31431a46a25e0.png
[20190509070429628.png]: /images/20220203/5ebeec8a25b2465bac92971fe336e268.png
[Link 7]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220203/6d195b7fa2174f8e966385618ae5e5b9.png
[20190509074313630.png]: /images/20220203/55c8c0f6f5c14539a15d3b21d1d39614.png
[20190509075326913.png]: /images/20220203/f8f554ced0c9404993e45cfbd63dd6bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]: /images/20220203/c2a007af4b4448e2aff099cc9ae31937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 4]: /images/20220203/3718d9243dc04e5aa2e192d415cb0652.png
[20190509125527186.png]: /images/20220203/4034149e8949416ca7c460ac4ce63298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 5]: /images/20220203/6e0589b591e34ad38968b87f4b0a9843.png
[https_developers.weixin.qq.com_miniprogram_dev_component_navigator.html]: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
[20190511092435204.png]: /images/20220203/8194ce01c5cf4198a88d065479032ef6.png
[20190511093039519.png]: /images/20220203/7a7d7b3b485a45a49d644bf9970fcf02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 6]: /images/20220203/5bd1d992d7f3484a89a5b7f4881da0f2.png
[http_www.cnblogs.com_xiao-ling-zi_p_9329612.html]: http://www.cnblogs.com/xiao-ling-zi/p/9329612.html
[https_www.jianshu.com_p_04bf1103e40a]: https://www.jianshu.com/p/04bf1103e40a