uniapp动态路由实战方案uniapp用来开发app还是比较方便快捷的,官网教程挺细致,几乎所有问题都能找到答案。网上

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

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

1、实现uniapp路由守卫;

2、实现动态tabbar;

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

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

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

4、将tabbar这一层级数据单独提出来存储,结合uview的tabbar组件实现动态tabbar;

5、在本地存一个全量的app按钮集合(除了tabbar,其他页面都是通过按钮跳转),与服务端获取的数据进行比对,得到一个按钮展示与否的配置数据集;

6、路由信息初始化后,进入用户定制化的初始页或者首页;

ok,分析得差不多了,下面介绍下具体实操步骤。

npminstalluni-simple-router接下来进行模块化配置,创建文件夹router,文件夹内容如下:

home文件里是所有页面的路由配置,就像这样:

modules文件夹下的index只是一个模块读取的代码;

constfiles=require.context('.',false,/\.js$/)constmodules=[]files.keys().forEach(key=>{if(key==='./index.js')returnconstitem=files(key).defaultmodules.push(...item)})exportdefaultmodulesrouter根级目录下的index内容主要就是路由守卫:

importmodulesfrom'./modules/index.js'importVuefrom'vue'importRouterfrom'uni-simple-router'importstorefrom'@/store/store.js'Vue.use(Router)//初始化constrouter=newRouter({APP:{holdTabbar:false//默认true},h5:{vueRouterDev:true,//完全使用vue-router开发默认false},routes:[...modules]//路由表});//全局路由前置守卫router.beforeEach((to,from,next)=>{//首先判断是否存在路由信息//不存在就先调用接口得到数据//具体内容可以参照上文的方案设计内容})//全局路由后置守卫router.afterEach((to,from)=>{})exportdefaultrouter;最后在app的main.js里需要这么引用:

importrouterfrom'./router/index.js'import{RouterMount}from'uni-simple-router'...//v1.3.5起H5端你应该去除原有的app.$mount();使用路由自带的渲染方式//#ifdefH5RouterMount(app,'#app');//#endif//为了兼容小程序及app端必须这样写才有效果//#ifndefH5app.$mount();//#endif至于后面的路由用法,直接看官方文档,比较清楚,用法跟vue-router差不多。这里要特别说明的是上面代码初始化的那一块的几个配置:holdTabbar:false,vueRouterDev:true,前者表示在app端取代原生的tabbar拦截,在这个插件里拦截;后者表示在h5中完全用vue-router的api,废弃了包括此插件及uniapp的原生api,后者请慎用。

这里其实没什么难度,也不给代码了,很简单。

由于tabbar是单独配置的,原生的uniapp没有动态配置的方法。找了一圈,发现uview的tabbar组件可以实现。这块还是把步骤列一下:一步步来,是可以实现的!

"tabBar":{"list":[{"pagePath":"pages/index/index"},{"pagePath":"pages/about/about"}]},像这样,只留这些内容,跟原生配置比少了许多内容。

这一步可以存在vuex里,因为读取方便,uniapp的数据缓存读取稍微麻烦点。放在vuex里,取的时候很方便,像这样:

changeTb(index){//uni.switchTab({//url:this.$store.state.userInfo.tabbarlist[index].pagePath//});this.$Router.pushTab(this.$store.state.userInfo.tabbarlist[index].pagePath)}需要说明的是,这种方法是把uniapp的原生tabbar给隐藏了的;上面用到的状态管理中的tabbarlist数据是一个结构参数完整的tabbar配置,但是tabbar页面可能不是完整的,由用户权限决定。

THE END
1.uniapp切片uni-app 是一个使用Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。一套代码编到7个平台,难以置信吗?依次扫描7个二维码,亲自体验最全面的跨平台效果! uni-app切片是一款根据效果图像画画一样来可视化设计uni-app程序,自动生成导出前端页面的快速开发工具。可以很https://blog.csdn.net/cddxwfl1/article/details/93883393
2.uniapp开发小程序的完整流程记录vue.js本文详细介绍了使用uni-app进行项目开发的全过程,包括uni-app框架的介绍、开发工具HBuilderX的下载安装与配置、项目开发中的网络请求配置、小程序分包加载、自定义组件使用、组件使用技巧等,还提及了解决开发中遇到的一些问题,需要的朋友可以参考下+ 目录 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你https://www.jb51.net/javascript/329973542.htm
3.uni15.5 uni.getStorageSync(KEY) 15.6 uni.removeStorageSync(KEY) 十六、图片的上传和预览 16.1 上传 一、介绍 如果是刚入门小程序的,又或者刚听到这个名词的人,可能跟我之前一样,带着诸多的疑惑。比如: 什么是uniapp?它和原生微信小程序有什么异同之处? http://51969.com/post/158022.html
4.uniapp入门到实战以项目为导向掌握完整开发流程微信生态的各种SDK可直接用于跨平台App。 学习成本低 基于通用的前端技术栈,采用Vue语法和微信小程序API,无额外学习成本。 开发成本低 招聘、管理、测试各方面的成本都大幅下降。 HBuilderX是高效开发神器,熟练掌握后研发效率至少翻倍。uni-app的功能框架如图1.1所示。图https://localsite.baidu.com/article-detail.html?articleId=100248950&ucid=n1D4rHDvrjm&categoryLv1=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD&ch=54&srcid=10007&contentFrom=3
5.好看的uniapp页面设计demouniapp创建页面【零基础学会uniapp】第五课:添加新的页面 5、 添加新的页面 page,并且使用命令进行跳转 在HBuilderX中新建一个页面,新建页面的步骤: 可直接从项目上右键或者从某个文件夹上面右键,选择新建页面 输入项目名称和项目使用的模板 选择是否在pages.json中进行注册,注意:所有需要单独显示的页面,都必须在这里进行注册,否https://blog.51cto.com/u_16213709/11627350
6.uniAPP入门:从零开始的跨平台应用开发指南跨平台性:uni-APP 使得开发者只需编写一次代码,即可在多个平台上运行应用,极大地提升了开发效率。 组件丰富:框架内置了大量预定义组件,涵盖了常见的用户界面设计需求,有助于减少开发复杂度。 社区与支持:uni-APP 拥有活跃的开发者社区,丰富的文档资源,以及官方提供的一系列支持服务,为开发者构建稳定、高效的应用提供https://www.imooc.com/article/350863
7.设计理念uView2.0全面兼容nvue的uniuView UI,是 uni-app 生态最优秀的 UI 框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水https://uviewui.com/guide/design.html
8.免费微信小程序投票系统(Uni【免费】微信小程序投票系统(Uni-App+SpringBoot+Vue3)【Java毕业设计】下载 【免费】微信小程序投票系统(Uni-App+SpringBoot+Vue3)【Java毕业设计】下载 视频功能演示: 相关截图:http://www.java1234.com/a/bysj/javaweb/2024/0518/25335.html
9.app平台uniapp项目云端打包环境uni# HBuilderX4.41设计云端打包环境XCode: 16.1 iOS SDK: 18.1 pod仓库:https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git 帮助我们改善此页面! 上次更新: 2024/12/7 19:51:12开发产品 HBuilderXuni-appuni-app xuniClouduniMPsdk5+Runtimewap2appMUIuni-iduni-cdnuni-payuni-pushuni一键登陆https://zh.uniapp.dcloud.io/tutorial/app-env.html
10.uniapp页面布局比如:若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在uni-app里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。 Tips 注意rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。 https://www.jianshu.com/p/6c9e3d6339df
11.uniapp中间加号点击弹窗怎么实现?完整教程选择“uni-app项目”,填写项目名称、项目路径等信息,然后点击“创建”。 三、设计界面 在pages/index/index.vue文件中,我们需要设计一个包含中间加号的界面。可以使用Flex布局来居中显示加号图标。 <template><view class="container"><view class="plus-icon" @click="showPopup"><text class="icon">+</text>https://developer.aliyun.com/article/1510405
12.Bootstrap单页动画Html5WebApp设计工具UniApp可视化DIY官网做好的拖拽式可视化设计工具,提供最微信小程序设计、Bootstrap页面设计、单页动画设计、WebApp可视化设计、代码生成器及导出工具,app低代码工具,低代码开发生成源码,一键生成app源码,app可视化开发,app制作,手机app,app软件,app开发,助力900万UniApp开发者http://www.diygw.com/
13.南昌网站建设南昌APP开发南昌小程序开发百恒网络,15年专注于网站建设、APP开发、微信小程序开发、软件定制开发等服务.以品质为导向,为客户用心定制行业互联网解决方案。咨询热线:400-680-9298。https://www.jxbh.cn/
14.首页uniapp是一款基于 uni-app-x 跨平台应用开发引擎的低代码高性能原生UI框架 简单高效、丰富便捷、炫酷giao炸、无与伦比! 开始使用 简单高效 我们提供了友好和高效的功能特性,能够让开发者快速上手,通过简单的配置和调用实现所需的功能。同时具备高效的性能,能够快速响应用户输入和操作,提供流畅的用户体验。 https://www.uxframe.cn/
15.uniappTypeScript支持,Uniuni-app框架下TypeScript语法,vue 使用 typescript ref中的方法,uniapp 使用typescript 运行小程序 uniapp实例教程,uniapp实战教程,uni-app在线免费视频教程|计算机毕业设计,计算机毕业论文开题报告,毕设作品网http://www.2d5.net/pc_jiaocheng_tushu_index.php?/1/1200.html
16.浅谈轻应用平台FinClip与移动应用开发平台mPaaS换句话说,除非小程序本身就基于 uni-app 进行设计,否则依然无法通过 mPaaS 将小程序迁移在基于 mPaaS 设计的移动应用之中。如果你想在已有的 App 中集成小程序,mPaaS 也无法兼容已有的微信小程序。 经过mPaaS 编译的小程序,可以调试输出为微信格式的小程序,还能够在 FinClip IDE 中完成编译与预览,这也再一次说明https://cloud.tencent.com/developer/article/1932566