原生tabBar兼容三端问题：
- 小程序底部菜单栏tabBar，图标仅支持 .png、.jpg、.jpeg 格式， 不支持动画
- 除了H5端 底部菜单栏是不计入容器高度的，所以需要使用uniapp的条件编译单独处理H5端加
padding-bottom: 100rpx;
DIY底部导航菜单栏，遇到的问题：
组件全局引入问题：若在App.vue自行增加视图模板代码引入，只有H5可以达到效果，uniapp官方文档中提到，App.vue是不能直接写入视图的，小程序会报错。
那么 怎么设置所有页面共用的组件？ 思路参考链接：ask.dcloud.net.cn/question/70…
这里提供两个方案，并分别说一下各自的弊端
新建一个global全局组件，里面可以放各种全局的组件方法等，使用插槽slot嵌套路由页面的代码；
然后在路由页面引入这个组件，将代码放入这个全局组件标签中（插槽的作用就是使这样包裹能正常渲染），如下，
<template>
<global ref="message">
<div>
我是消息页面
</div>
</global>
</template>
这个方案就能解决uniapp组件全局引入的问题，但是存在的问题是只有H5端路由页面切换有缓存，其它端页面切换都重新初始化了，使用的路由切换API是uni.navigateTo() ==> 所以每次点击菜单都会加载新的路由页面，相当于会加载新的navbar菜单组件，导致状态会重新初始化。
新建一个最外层的页面global/index页面，添加全局组件和router-view实现路由页面切换，然后默认加载首页。
这个方案相比第一个方案的好处是，不用在每个路由页面再套一层global标签，但弊端是所有端路由页面切换都没有缓存。
两种方案共同存在的弊端：
1、除了H5端，自定义tabBar路由页面切换性能均比原生tabBar明显差,App和小程序端非必要不要自定义；
2、还需配合使用vuex记录当前选中状态及手动切换是否选中样式
3、若都采用vue的路由切换this.$router.push，H5有效果，但小程序会报错。
