uniapp 实现动态component,uniapp动态css

　　基于uniapp框架如何实现动态路由和动态tabbar？本文将为您介绍uniapp动态路由的实战，教您如何在uniapp中实现动态路由。

　　UNI-APP开发(仿饿)开发课程：进入学习

　　Uni开发app相对方便快捷。官网的教程很详细，几乎所有问题都能回答。网上也有很多入门教程。腾讯课堂和哔哩哔哩有几个视频教程，感觉还可以(其实我没怎么看过)。它们相当实用，所以你可以试一试。

　　假设本文读者已经基本掌握了uniapp的基本开发技巧。如果你还没有掌握uniapp，但是准备进行相关开发，就从官方文档入手，结合实际视频操作。之前的推荐都不错。好了，接下来说这篇文章的题目——如何基于uniapp框架实现动态路由、动态tabbar。

　　现状分析

　　vue项目上有一个路由插件Vue路由器。所有路线统一管理，可以拦截和控制下一步行动。但是，在uniapp上，情况就不一样了。Uni上没有路由插件，然后页面分为tabbar和非tabbar。页面跳转也有自己的一套API，不支持最重要的路由拦截功能。所有页面都是在page.json文件中预先配置好的。

　　需求分析

　　假设我们要在app上做一套对应用户权限的东西，就是不同的用户，根据权限配置，决定他进来后可以使用哪些页面和按钮，甚至可以控制tabbar。这个需求需要根据权限控制路由内容和方向，但在当前条件下无法实现。但是插件市场上很多人都写过路由插件，他们的思路其实和vue路由器在web端是一脉相承的。只有这个路由插件可以完全满足需求。

　　还有一个很重要的需求就是动态tabbar，这是一个很重要的内容，就是app登录后首页底部的一列按钮。这些tabbars基本上包含了app的主要内容。如何实现动态Tabbar，如上所述，是根据权限来控制的。比如tabbar最多只能有五个，那么如何控制A看五个，B看三个呢？这个要求在原生uniapp上无法实现，原生只能用页面配置，tabBar是页面的子项配置。不过插件市场已经有人实现了tabbar的组件化，可以尝试定制开发。

　　总结起来，其实有两个诉求：

　　1.实现uniapp路由守护；

　　2.实现动态tabbar；

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

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

　　方案设计

　　让我们来看看业务流程设计：

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

　　2.在路由守卫处拦截，以确定用户登录时本地数据中是否有路由信息；如果不是，则转到步骤3；如果是，转到步骤4；

　　3.调用接口获取路由，从服务器获取路由数据；本地存储路由数据(vuex，uniapp cache)；

　　4.将tabbar级别数据单独存放，结合uview的tabbar组件实现动态tabbar；

　　5.在本地保存全套app按钮(除tabbar外，其他页面均通过按钮跳转)，与服务器获取的数据进行比对，获得按钮是否显示的配置数据集；

　　6.路由信息初始化后，进入用户定制的初始页面或主页；

　　好了，分析差不多了。下面是具体的实际操作步骤。

　　解决方案

　　一、实现路由守卫

　　插件推荐uni-simple-router，具体教程可以参考它的官方文档，里面写的很详细。以下是我的简单实用教程。

　　安装uni-simple-router插件

　　m安装uni-simple-router接下来，进行模块化配置，创建一个文件夹路由器，内容如下：

　　在主文件中是所有页面的路由配置，如下所示：

　　const home=[

　　{

　　路径：“/pages/login/login”，

　　AliasPath:/app/login ，//适用于h5终端

　　名称：登录，

　　元：{

　　标题：“登录”，

　　}

　　},

　　{

　　路径：“/pages/index/index”，

　　AliasPath:/app/index ，//适用于h5终端

　　名称：“索引”，

　　元：{

　　标题：“主页”，

　　}

　　}]

　　导出默认首页这里必须多说一句。因为这个插件没有动态写功能，所以我们必须在本地配置一个完整的路由来实现权限管理。而且pages.json里面的内容应该是全配置的，只是tabbar配置有些不同，后面会讲到；

　　modules文件夹下的索引只是一个模块读取的代码；

　　const files=require.context( . ，false，/\。js$/)

　　常量模块=[]

　　files.keys()。forEach(key={

　　if (key===。/index.js )返回

　　const item=files(key)。系统默认值

　　模块.推送(.项目)

　　})

　　导出默认模块路由器根目录下的索引内容主要是路由守护：

　　从导入模块。/modules/index.js

　　从“vue”导入Vue

　　从“单简单路由器”导入路由器

　　从“@/store/store.js”导入商店

　　Vue.use(路由器)

　　//初始化

　　常量路由器=新路由器({

　　应用程序：{

　　HoldTabbar:默认情况下为false //true

　　},

　　h5: {

　　Vueruterdev: true，//完全使用vue-router开发默认false。

　　},

　　路线：[.模块] //路由表

　　});

　　//全局路由前端保护

　　router.beforeEach((收件人，发件人，下一个)={

　　//首先确定是否有路由信息。

　　//如果不存在，先调用接口获取数据

　　//具体请参考以上方案设计。

　　})

　　//全局路由后端保护

　　router.afterEach((to，from)={})

　　导出默认路由器；最后，你需要在app的main.js中引用这句话：

　　从导入路由器。/router/index.js

　　从“单简单路由器”导入{ RouterMount }

　　.

　　//v1.3.5你应该把原来的app去掉。来自H5端的$ mount()；使用路线附带的渲染方法。

　　//#伊夫H5

　　RouterMount(app， # app )；

　　//#endif

　　//为了兼容小程序和app，必须这样写才有效。

　　//#伊夫H5

　　app。$ mount()；

　　//#endif至于后面的路由用法，直接看官方文档，比较清楚。使用方法类似于vue路由器。这里需要注意的是上面代码初始化的块的几种配置：holdTabbar: false，vueRouterDev: true，前者的意思是在app端替换原生Tabbar拦截，在这个插件中拦截；后者意味着vue-router的api完全用在h5上，包括这个插件和uniapp在内的原生api被抛弃。请谨慎使用后者。

　　二、结合状态管理、uniapp数据缓存管理app缓存开销

　　其实这里没有难度，也没有给出代码。这很简单。

　　我可以在状态管理中存储从服务器获取的数据，但是vuex的数据是存储在内存中的，很容易丢失。比如用了一段时间的app，拉到后台，马上打开也没问题。但如果时间过长，缓存被意外清空，或者超过了服务器的超时限制，那么再次点击app可能会导致部分数据丢失。这个问题将由路线警卫处理。当路由发生跳转时，会判断相关的状态数据是否存在，如果不存在，会重新处理。

　　再来介绍一下uniapp的数据缓存api。更稳定，尤其是在app上。不是缓存的概念，而是持久存在的，除非你调用它的clearing方法。可以利用两者，分别保存一些数据，用它们做一些控制，自己搞清楚具体实现。比如你从后台拉回来，状态管理的数据没有了，但是这个时间还在服务器的超时范围内，那么这个没有超时的令牌数据会被保存在uniapp的数据缓存中。我会根据这个令牌找出相关的权限路由信息，给vuex赋值，然后进行后续操作；如果拉回来超时，直接回到登录页面。这一块，我只是提供思路，而且是成功的思路，通过亲测是有效的。

　　三、实现动态tabbar

　　好吧，如果我们能走到这一步，我们就已经完成了长征的一半。不要看下面的内容。实际上，我花了比上面更多的时间来收集相关信息。

　　因为tabbar是单独配置的，所以原生uniapp没有动态配置方法。环顾四周，发现uview的tabbar组件是可以实现的。这里先列出步骤：循序渐进，可以实现！

　　1、修改pages.json配置

　　tabBar: {

　　列表:[{

　　页面路径:页面/索引/索引

　　},{

　　页面路径:页面/关于/关于

　　}]

　　}，像这样就只剩下这些内容了，比原生配置少很多。

　　2、将tabbar信息单独存储到一个全局对象上

　　这个步骤可以存储在vuex中。因为容易读取，所以uniapp的数据缓存读取有点麻烦。放在vuex里，拿起来很方便，像这样：

　　这个。$ store . state . userinfo . tabbar list3、在每一个tabbar页面配置tabbar组件

　　模板

　　视角

　　view class=content

　　.

　　/查看

　　u-tabbar:list= $ store . state . userinfo . tabbar list @ change= change TB :inactive-color= inactive color :active-color= active color /u-tabbar

　　/查看

　　/template的模板部分的格式应该如上，tabbar与正文内容并列；跳转代码如下，两种方式都有可能。有关详细信息，请参见文档。

　　changeTb(索引){

　　//uni.switchTab({

　　//url:这个。$ store . state . userinfo . tabbar list[index]。页面路径

　　//});

　　这个。$Router.pushTab(这个。$ store . state . userinfo . tabbar list[index]。页面路径)

　　}需要注意的是，这个方法隐藏了uniapp的原生tabbar上述状态管理中使用的tabbarlist数据是tabbar配置，具有完整的结构参数，但tabbar页面可能不完整，这是由用户的权限决定的。

　　好了，到目前为止，本文已经清楚地解释了动态路由和动态tabbar的完整方案。细节可以根据自己的需求逐步完善，希望对你有所启发和帮助。如果对你有用，现在就点击分享吧。谢谢大家！

　　推荐：《uniapp教程》以上是教你如何基于uniapp框架实现动态路由和动态tabbar的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。