5调用扫一扫 uniapp_基于 uniapp 实现动态路由和动态 Tabbar

本文转载自 字节逆旅 公众号，感谢作者的好文分享✌️，点击阅读原文可以查看作者的掘金链接。

uniapp用来开发app还是比较方便快捷的，官网教程^[1]挺细致，几乎所有问题都能找到答案。网上也有不少入门教程，腾讯课堂、b站上有好几个视频教程，感觉还可以(其实我没怎么看)，比较偏实战，可以动手试一下。

本文假设阅读者已经基本掌握了uniapp的入门开发技能，如果还没有掌握uniapp，但你准备进行相关开发，赶紧从官方文档入手，再结合实战视频操作就好了，前面推荐的都不错。好了，进入本文主题——如何基于uniapp框架实现动态路由、动态tabbar。

现状分析

vue项目上有路由插件Vue Router，所有路由都是统一管理，可以统一拦截，控制下一步动作，但是在uniapp上，情况就不一样了。uniapp上没有路由插件，然后页面分为tabbar和非tabbar两种，页面跳转也有自己的一套api，最重要的路由拦截功能并不支持，所有的页面都是在page.json文件里提前配置好。

需求分析

那假设我们要在app上做一套对应着用户权限的东西，就是不同用户，根据权限配置，决定了他进来后能用哪些页面哪些按钮，甚至是能控制到tabbar这块。这个需求，就需要根据权限控制路由内容及导向，但在目前条件下是实现不了的。不过在插件市场有不少人写了路由插件，思路其实都是向web端的vue Router看齐的，能完整满足需求的只有这个路由插件^[2]。

还有很重要的一个需求就是动态tabbar，这是一个很重要内容，就是在app登录后主页下面的一栏按钮，这些tabbar基本上包括了app的主要内容，如何实现动态的tabbar，像上面提到的根据权限控制。比如说tabbar最多只能有五个，那我如何控制甲能看到5个，乙只能看到3个？这个需求在原生的uniapp上无法实现，原生的只能配置好pages，tabBar是pages的一个子项配置。不过插件市场上有人实现了tabbar的组件化，我们可以尝试下定制开发。

总结起来说需求其实就两个：

1、实现uniapp路由守卫；

2、实现动态tabbar；

第一个需求，前面提到过一些方案；第二个需求，动态tabbar，需要结合uview组件库^[3]的tabbar^[4]组件来实现。我们再分析下目前的框架、插件能力，糅合上述需求，就有这张图：

这张图里有些内容前面没有提到，比如状态管理、本地缓存，这是后面会用到的一个关键部分，下面的设计部分会提到。

方案设计

我们来捋一捋业务流程设计：

1、app输入用户名密码登录；

2、在路由守卫进行拦截，判断用户登录时的本地数据是否存在路由信息；如果没有则走第3步，如果有就走第4步；

3、调用接口获取到路由并从服务端获取路由数据；将路由数据存入本地(vuex、uniapp缓存)；

4、将tabbar这一层级数据单独提