Taro跨端开发探索——实现tabBar跳转不同的入口

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

前言

上一篇文章我们集成了taro-ui，它是官方开发的组件库，这篇文章我们来介绍一下使用tabbar来进行小程序入口的切换

需求分析

我们基于京喜小程序进行需求分析，打开京喜小程序之后，我们看到的界面如下

这张图片会作为以后我们开发的主要需求分析图，以后的新功能暂时就不放这张图片了。我们简单分析一下一眼能看到的功能点

1. 搜索
2. 分类筛选
3. 活动分类
4. 新人活动
5. 秒杀/补贴
6. 推荐商品
7. 跳转的tabbar——首页、分类、签到领红包（这个功能说实话电商行业用的不是很多，这里会加深计算价格的复杂度，而且也会影响后期的对账等操作）、购物车、我的

我们先实现简单的tabtar跳转不同的入口吧

我们先创建对应的四个入口相关的代码

偷个懒，我们直接复制pages下的index文件夹所有内容，黏贴出四个来，分别重命名为以下几个文件夹

至此page下的index文件夹没啥用了，我们把home作为首页，这时候直接删除index即可，然后我们在每个文件夹下的配置文件中修改对应的头部标题显示

然后我们将每个文件夹下的index.tsx修改为以下内容,将中的两个文字修改为以下对应的文字

import { Component } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
export default class Index extends Component {
  render() {
    return (
      <View className="index">
        <Text>分类</Text>
      </View>
    );
  }
}

home修改为首页
category修改为分类
shop-cart修改为购物车
user修改为我的\

step1 在app.config.ts中添加tabbar配置

我们在src下的app.config.ts文件中添加tabBar的配置

  tabBar: {
    color: "#333",
    selectedColor: "#ff0000",
    backgroundColor: "#fff",
    borderStyle: "black",
    list: [
      {
        pagePath: "pages/home/index"
        text: "首页",
        iconPath: "static/images/tab-bar/home.png",
        selectedIconPath: "static/images/tab-bar/home-active.png"
      },
      {
        pagePath: "pages/category/index",
        text: "分类",
        iconPath: "static/images/tab-bar/category.png",
        selectedIconPath: "static/images/tab-bar/category-active.png"
      },
      {
        pagePath: "pages/shop-cart/index",
        text: "购物车",
        iconPath: "static/images/tab-bar/shop-cart.png",
        selectedIconPath: "static/images/tab-bar/shop-cart-active.png"
      },
      {
        pagePath: "pages/user/index",
        text: "我的",
        iconPath: "static/images/tab-bar/user.png",
        selectedIconPath: "static/images/tab-bar/user-active.png"
      },
    ],
  },

这里tabBar是按照顺序来初始化的，大家按照自己的需求来修改即可
此时我们启动项目发现提示没有static下的文件信息，我们在下一步创建对应的静态图标

icon font图标

icon font是阿里巴巴的矢量图标库，建议各位如果有自己的UI设计师的话，最后是自己设计ICON，这里我们非商用先使用这里的矢量图标吧\

icon font的官网为:www.iconfont.cn/
我使用的所有资源来自:www.iconfont.cn/collections… 我们在选择好图标之后就可以点击下载了，在下载的时候可以选择对应的icon颜色。我们下载黑色和红色作为选中图标和未选中图标的显示\

• 最上方可以切换颜色
• 中间可以切换大小
• 最下方切换下载个图标格式 我们下载完所有的8个图标之后可以重新编译一下，最终的结果为点击各个页面的tabBar即可显示对应的内容，部分效果如下\

最后我们优化一个配置

我们在点击跳转不同的tabBar时在控制台中会显示报错

我们添加这个配置

结语

今天我们实现了点击tabBar跳转不同的小程序入口，并且学习了引入icon font图标，明天我们开始试用api fox模拟mock数据和es搜索进行首页部分数据开发
今天的代码已经提交到gitee上了，地址为:gitee.com/liangminghu… 大家有兴趣可以自己down一下，最后请教一下大家有没有人试用taro修改过小程序头部的标题显示，默认的有点丑陋欢迎大家提供解决方法。