之前听人介绍了weex,感觉是个挺有意思的东西，遂最近开始折腾下，毕竟可以实现3端统一的东西还是很值得一试的。
由于网上和官网讲得不是很清楚，经过一番尝试总算搞定，所以这里总结下weex-ui底部导航图标的更换。
weex-ui有2中方式更换底部导航栏图标

1. 以字体的形式更换底部导航栏（这个暂时只在web端实现，android端和IOS端如何实现后续再补充）
2. 以图片的方式更换底部导航栏（暂时只实现android端，ios端不久就会补充）

【以字体的形式更换底部导航栏】

先看下官网完整的例子：

<template>
  <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="icon"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    <!-- 第一个页面内容-->
    <div class="item-container" :style="contentStyle"><text>首页</text></div>

    <!-- 第二个页面内容-->
    <div class="item-container" :style="contentStyle"><text>特别推荐</text></div>

    <!-- 第三个页面内容-->
    <div class="item-container" :style="contentStyle"><text>消息中心</text></div>

    <!-- 第四个页面内容-->
    <div class="item-container" :style="contentStyle"><text>我的主页</text></div>
  </wxc-tab-bar>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import { WxcTabBar, Utils } from 'weex-ui';

  // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js 
  import Config from './config'

  export default {
    components: { WxcTabBar },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles
    }),
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      // 如果页面没有导航栏，可以用下面这个计算高度的方法
      // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
      const { tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>

这里有几个重要的点：

1. 将title-type="icon"改为title-type="iconFont"

2. 将tabTitles"和tabStyles的值分别改为tabIconFontTitles, tabIconFontStyles,这2个值是根据https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js里配置修改的，你可以将这个文件复制下来引入自己的项目。

  data: () => ({
      tabTitles: Config.tabIconFontTitles,
      tabStyles: Config.tabIconFontStyles
    }),

这里看下这个配置文件：

    // 使用 iconFont 模式的tab title配置
    tabIconFontTitles: [
      {
        title: '首页',
        codePoint: '\ue6cb'
      },
      {
        title: '工具',
        codePoint: '\ue64d'
      },
      {
        title: '专题',
        codePoint: '\ue656',
        // badge: 5
      },
      {
        title: '文章',
        codePoint: '\ue610',
        // dot: true
      },
      {
        title: '技能体系',
        codePoint: '\ue607',
        // dot: true
      }
    ],
    tabIconFontStyles: {
      bgColor: '#FFFFFF',
      titleColor: '#666666',
      activeTitleColor: '#3D3D3D',
      activeBgColor: '#FFFFFF',
      isActiveTitleBold: true,
      width: 120,
      height: 120,
      fontSize: 24,
      textPaddingLeft: 5,
      textPaddingRight: 5,
      iconFontSize: 50,
      iconFontMarginBottom: 8,
      iconFontColor: '#606266',
      activeIconFontColor: 'red',
      iconFontUrl: '//at.alicdn.com/t/font_384735_c5tag40xy99.ttf'
    }
  }

这里的样式都已经写得很语义化了，大家根据自己的情况微调。

重点是这个iconFontUrl，这里用到了阿里的矢量图标库。

先登录阿里矢量图标库官网：https://www.iconfont.cn
在搜索框内搜索你需要的图标，并加入购物车。

image.png
等全部添加完后再点击右上方的购物车图标，选择右方的添加至项目,最后点击下方的确定。
image.png
等代码页面自动跳转后，观察图中红色箭头标记的部分，ttf字体文件填到刚才的配置文件里的iconFontUrl里，而前面的&#e改为\ue填到目标tab的 codePoint字段里（因为每次添加新的图标后这里的ttf文件地址都会发生变化，这就是为什么需要将所有的图标添加到购物车后再生成链接的原因）。
image.png
至此，观察页面，图标已经改成我们需要的图标了。 image.png

【以图片的方式更换底部导航栏】

1. 根据设备环境动态加载图片路径
2. 将图片放到各个平台的指定路径
3. 修改各个平台的图片加载代码

【1. 根据设备环境动态加载图片路径】

image.png

动态加载图片代码部分(具体在组件中怎么调用就不用讲了吧)：

const getImgUrl = (url) => {
    let platform = weex.config.env.platform;
    let img_path = '';
    if(platform === 'Web') {
        img_path = `../../web/assets/img/${url}`
    }else if(platform = 'android') {
        img_path = `file:///android_asset/img/${url}`;
    }else {
        //ios 后续再补充
        img_path = `file:///android_asset/img/index.png`
    }
    return img_path;
}
module.exports = {
    getImgUrl
}

【2. 将图片放到各个平台的指定路径】

web端的资源放哪上面的图片已经看过了，这里看下android端的资源放置（IOS端还未尝试，后续补充）。

image.png

【3. 修改各个平台的图片加载代码】

这里只讲android端的，IOS端的后续会补充。

image.png
找到上图所示的ImageAdapter.java并增加下面代码的注释部分的if.

        String temp = url;
        if (url.startsWith("//")) {
          temp = "http:" + url;
        }
        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
          return;
        }
        //修改图片路径
        if (temp.contains("/img/") && temp.startsWith("src")) {
            temp = "file:///android_asset/img/" + url.substring(url.lastIndexOf("/")+1);
            Log.d("ImageAdapter", "url:" + temp);
        }

        if(!TextUtils.isEmpty(strategy.placeHolder)){
          Picasso.Builder builder=new Picasso.Builder(WXEnvironment.getApplication());
          Picasso picasso=builder.build();
          picasso.load(Uri.parse(strategy.placeHolder)).into(view);

          view.setTag(strategy.placeHolder.hashCode(),picasso);
        }

当然该导入的包还是要导入，如果用android studio的话旋转报红的字按住atl + enter 选择 import class即可导入。

同样的：

1. 将引用的weex-ui的底部导航组件title-type=""iconFont"改为title-type="icon"

2. 将tabIconFontTitles"和tabIconFontStyles的值分别改为tabTitles, tabStyles

看效果：

WEB:

image.png

Android:

QQ图片20190415232527.gif

（完）

参考文献

https://blog.csdn.net/blog_lee/article/details/79820410