HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【分享】uniapp支持使用vue/test-utils进行单元测试

uniapp

看uniapp github使用了vue/test-utils进行单元测试,点赞~

看uniapp github使用了vue/test-utils进行单元测试,点赞~

为什么选择Hbuilder而放弃了HbuilderX

  1. 我非前端人员,我在Hbuilder里面建了很多项目,为了用到的时候,直接打开看看。但是他不能在HbuilderX里面
  2. 我安装过HbuilderX,文件是小了,打开速度是快了。但是没有Hbuilder的充实感了,安装嗖嗖的,就完成了。桌面连个图标都没有,原来跑右键里去了。整的和notpad++似的。然后想卸载了。。。我竟然照不到卸载的地方,连卸载的exe都没有,更不爽了,百度了好长时间,删文件,删注册表,搞定。
  3. 继续回到Hbuilder里面了,打开,等一会。打开xx.html,ctrl+r运行,真香!!!!!!
继续阅读 »
  1. 我非前端人员,我在Hbuilder里面建了很多项目,为了用到的时候,直接打开看看。但是他不能在HbuilderX里面
  2. 我安装过HbuilderX,文件是小了,打开速度是快了。但是没有Hbuilder的充实感了,安装嗖嗖的,就完成了。桌面连个图标都没有,原来跑右键里去了。整的和notpad++似的。然后想卸载了。。。我竟然照不到卸载的地方,连卸载的exe都没有,更不爽了,百度了好长时间,删文件,删注册表,搞定。
  3. 继续回到Hbuilder里面了,打开,等一会。打开xx.html,ctrl+r运行,真香!!!!!!
收起阅读 »

2.1.1: Mac电脑,右键菜单,svn或git缺少部分菜单项的暂时解决方案

Git SVN

关于HBuilderX 2.1.1版本 【Mac】右键菜单,没有svn更新或git拉取菜单项目的说明

进入菜单【工具】【插件配置】,找到svn或git,卸载重装

关于HBuilderX 2.1.1版本 【Mac】右键菜单,没有svn更新或git拉取菜单项目的说明

进入菜单【工具】【插件配置】,找到svn或git,卸载重装

PC端web-view样式调节、全屏、刷新、内存释放(删除多余iframeDom)

1.样式调节
当你使用web-view标签后会在页面生成一个iframe,我们主要是针对这个生成的iframe做样式调节,要注意的是你在引入web-view组件的vue文件中定义iframe是不会生效的,需要再项目根目录的app.vue 下定义才能生效。(如果项目中有多个模块需要引入样式不一致的iframe那就当我没写过这条~。~)

2.iframe全屏操作
全屏参考https://blog.csdn.net/IT_COOKIE_SAM/article/details/76944134,实现后全屏效果和你在浏览器按F11是一样的。这边注意全屏后要改变iframe中的
allowFullscreen = true才能生效

                        // 全屏  
            intoFull(el){  
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,wscript;  
                if(typeof rfs != "undefined" && rfs) {    
                    rfs.call(el);    
                    return;    
                }  
                if(typeof window.ActiveXObject != "undefined") {    
                    wscript = new ActiveXObject("WScript.Shell");    
                    if(wscript) {    
                        wscript.SendKeys("{F11}");    
                    }    
                }  
            },  
            // 退出全屏  
            exitFullScreen(el) {    
                var el= document,cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,wscript;    
                if (typeof cfs != "undefined" && cfs) {    
                    cfs.call(el);    
                    return;    
                }    
                if (typeof window.ActiveXObject != "undefined") {    
                    wscript = new ActiveXObject("WScript.Shell");    
                    if (wscript != null) {    
                        wscript.SendKeys("{F11}");      
                    }    
                }    
            },  
            // 触发全屏按钮事件  
            fullScreen(){  
                let iframeDom = document.getElementsByTagName("iframe")[0];  
                this.intoFull(iframeDom);  
                iframeDom.allowFullscreen = true  
            },

3.刷新iframe
刷新效果比较简单,直接获取页面上iframe DOM信息然后替换他的src属性(替换contentWindow.location.href也是可以的哦~)

let iframeDom = document.getElementsByTagName("iframe")[0];  
iframeDom.src="xxxxxxxxxxxx";

4.内存释放(删除多余iframeDom)
正如1中所提到的当你使用web-view标签后会在页面生成一个iframe,而你路由发生改变后(跳转页面等操作),生成的iframe是不会自动删除的,也就是说你在引入了web-view的页面不断进入退出会在你页面中生成无数个iframe,带来一系列问题(不知道是不是因为我用了自定义模板的原因,据观察页面跳转时uni-App只会刷新uni-app标签内的内容,可以它理解成route标签,而iframe是生成在body下的并不会被页面渲染到),下图是我进出4次页面后的效果:


解决方案是在在当前页面加载完成后通过this.$watch函数监听路由变化,当路由跳转时触发里面的函数遍历删除页面上的iframe节点,最后在注销路由监听(不注销监听的话watch会在全局监听你的路由触发事件)

// vue生命周期函数  
        mounted(){  
            this.unwatch = this.$watch('$route.path',()=>{  
                let iframeDom = document.getElementsByTagName("iframe");  
                if(iframeDom.length==0){  
                    return false;  
                }else{  
                    for(var i=0;i<iframeDom.length;i++){  
                        //释放iframe内存  
                        iframeDom[i].src = 'about:blank';   
                        try{   
                            iframeDom[i].contentWindow.document.write('');   
                            iframeDom[i].contentWindow.document.clear();   
                        }catch(e){}   
                        //把iframe从页面移除   
                        iframeDom[i].parentNode.removeChild(iframeDom[i]);   
                    }  
                }  
                // 注销路由监听  
                this.unwatch();  
            });  
        },

才疏学浅,希望对需要的人有所帮助。

继续阅读 »

1.样式调节
当你使用web-view标签后会在页面生成一个iframe,我们主要是针对这个生成的iframe做样式调节,要注意的是你在引入web-view组件的vue文件中定义iframe是不会生效的,需要再项目根目录的app.vue 下定义才能生效。(如果项目中有多个模块需要引入样式不一致的iframe那就当我没写过这条~。~)

2.iframe全屏操作
全屏参考https://blog.csdn.net/IT_COOKIE_SAM/article/details/76944134,实现后全屏效果和你在浏览器按F11是一样的。这边注意全屏后要改变iframe中的
allowFullscreen = true才能生效

                        // 全屏  
            intoFull(el){  
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,wscript;  
                if(typeof rfs != "undefined" && rfs) {    
                    rfs.call(el);    
                    return;    
                }  
                if(typeof window.ActiveXObject != "undefined") {    
                    wscript = new ActiveXObject("WScript.Shell");    
                    if(wscript) {    
                        wscript.SendKeys("{F11}");    
                    }    
                }  
            },  
            // 退出全屏  
            exitFullScreen(el) {    
                var el= document,cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,wscript;    
                if (typeof cfs != "undefined" && cfs) {    
                    cfs.call(el);    
                    return;    
                }    
                if (typeof window.ActiveXObject != "undefined") {    
                    wscript = new ActiveXObject("WScript.Shell");    
                    if (wscript != null) {    
                        wscript.SendKeys("{F11}");      
                    }    
                }    
            },  
            // 触发全屏按钮事件  
            fullScreen(){  
                let iframeDom = document.getElementsByTagName("iframe")[0];  
                this.intoFull(iframeDom);  
                iframeDom.allowFullscreen = true  
            },

3.刷新iframe
刷新效果比较简单,直接获取页面上iframe DOM信息然后替换他的src属性(替换contentWindow.location.href也是可以的哦~)

let iframeDom = document.getElementsByTagName("iframe")[0];  
iframeDom.src="xxxxxxxxxxxx";

4.内存释放(删除多余iframeDom)
正如1中所提到的当你使用web-view标签后会在页面生成一个iframe,而你路由发生改变后(跳转页面等操作),生成的iframe是不会自动删除的,也就是说你在引入了web-view的页面不断进入退出会在你页面中生成无数个iframe,带来一系列问题(不知道是不是因为我用了自定义模板的原因,据观察页面跳转时uni-App只会刷新uni-app标签内的内容,可以它理解成route标签,而iframe是生成在body下的并不会被页面渲染到),下图是我进出4次页面后的效果:


解决方案是在在当前页面加载完成后通过this.$watch函数监听路由变化,当路由跳转时触发里面的函数遍历删除页面上的iframe节点,最后在注销路由监听(不注销监听的话watch会在全局监听你的路由触发事件)

// vue生命周期函数  
        mounted(){  
            this.unwatch = this.$watch('$route.path',()=>{  
                let iframeDom = document.getElementsByTagName("iframe");  
                if(iframeDom.length==0){  
                    return false;  
                }else{  
                    for(var i=0;i<iframeDom.length;i++){  
                        //释放iframe内存  
                        iframeDom[i].src = 'about:blank';   
                        try{   
                            iframeDom[i].contentWindow.document.write('');   
                            iframeDom[i].contentWindow.document.clear();   
                        }catch(e){}   
                        //把iframe从页面移除   
                        iframeDom[i].parentNode.removeChild(iframeDom[i]);   
                    }  
                }  
                // 注销路由监听  
                this.unwatch();  
            });  
        },

才疏学浅,希望对需要的人有所帮助。

收起阅读 »

关于plus.gallery.save与uni.saveImageToPhotosAlbum保存临时路径图片,返回成功相册中却找不到的问题的一种可能解

有一种可能是:

图片临时路径中的文件名未包括正确的图片扩展名类型

解决方案是:

在图片临时路径中添加上正确的扩展名即可

有一种可能是:

图片临时路径中的文件名未包括正确的图片扩展名类型

解决方案是:

在图片临时路径中添加上正确的扩展名即可

插件的文档能不能制定个规范

uniapp插件市场的开发文档没有一个完整的规范,生态系统逐渐完善确实满足了大家的很多需求,也提高了效率,但是插件的文档有的写的很详细,有的寥寥几句带过,对于作者一定非常清楚如何使用,但是对于一个使用者,本身能力就参差不齐,如果文档写的不清晰就要去尝试,去揣摩作者的思想,这就达不到一个优良的生态环境的效果了

继续阅读 »

uniapp插件市场的开发文档没有一个完整的规范,生态系统逐渐完善确实满足了大家的很多需求,也提高了效率,但是插件的文档有的写的很详细,有的寥寥几句带过,对于作者一定非常清楚如何使用,但是对于一个使用者,本身能力就参差不齐,如果文档写的不清晰就要去尝试,去揣摩作者的思想,这就达不到一个优良的生态环境的效果了

收起阅读 »

关于运行HBuilderX,360提示不安全的说明

360

部分小伙伴,下载HBuilderX后,运行, 电脑上的360提示HBuilderX不安全,可能是由于本地360病毒木马库未升级所导致的。

HBuilderX,每次发版前,都会提交360和微软进行审核,请大家放心使用

360 审核截图

微软审核截图

继续阅读 »

部分小伙伴,下载HBuilderX后,运行, 电脑上的360提示HBuilderX不安全,可能是由于本地360病毒木马库未升级所导致的。

HBuilderX,每次发版前,都会提交360和微软进行审核,请大家放心使用

360 审核截图

微软审核截图

收起阅读 »

接项目:app,小程序,uniapp,vue,php,weex都可以

外包

uni-app跨平台方案第一批尝鲜者,已使用uni-app方案做过多个项目,该躺的坑已躺完,可快速开发

已开发的项目案例:

陌生人匿名社交
4s车源调度大型平台
商城项目
垃圾分类项目
等等

另可:

用weex框架开发App端项目,支持热更新等
原生微信小程序框架开发微信小程序

欢迎来电咨询:
电话:18296160359
微信:同上
QQ: 1725954032

继续阅读 »

uni-app跨平台方案第一批尝鲜者,已使用uni-app方案做过多个项目,该躺的坑已躺完,可快速开发

已开发的项目案例:

陌生人匿名社交
4s车源调度大型平台
商城项目
垃圾分类项目
等等

另可:

用weex框架开发App端项目,支持热更新等
原生微信小程序框架开发微信小程序

欢迎来电咨询:
电话:18296160359
微信:同上
QQ: 1725954032

收起阅读 »

iOS云打包后提交App Store

iOS打包 iOS

1.打开Application Loader

应用程序-->Xcode-->右键显示包内容-->Contents-->Applications-->Application Loader 双击打开即可使用

2.登录APPID

账户如果启用了双重认证的在浏览器登录获取APP专用密码
https://appleid.apple.com/#!&page=signin

3. 选择打包好的IPA文件

4.系统检测完成后提交应用

注意:云打包时使用iOS Distribution发布证书,不要用iPhone Developer证书(该证书打测试包用)

继续阅读 »

1.打开Application Loader

应用程序-->Xcode-->右键显示包内容-->Contents-->Applications-->Application Loader 双击打开即可使用

2.登录APPID

账户如果启用了双重认证的在浏览器登录获取APP专用密码
https://appleid.apple.com/#!&page=signin

3. 选择打包好的IPA文件

4.系统检测完成后提交应用

注意:云打包时使用iOS Distribution发布证书,不要用iPhone Developer证书(该证书打测试包用)

收起阅读 »

接app,小程序,uniapp,mui,vue,php项目

外包

本人从事互联网工作多年,目前就职某银行,技术过硬;
小程序,app,网站都有多个项目经验;
项目案例:
捎四方:应用预览:捎四方(拼车、顺风车)
久久催app:应用预览:久久催 (互联网催收)
巧匠课堂:应用预览:巧匠课堂(在线教育)
猎趣:应用预览:猎趣(二手商品交易平台)
amazingChina:应用预览:amazingChina(入境游)
微信:fym1414901782
QQ : 1414901782
感恩各位老板合作!

继续阅读 »

本人从事互联网工作多年,目前就职某银行,技术过硬;
小程序,app,网站都有多个项目经验;
项目案例:
捎四方:应用预览:捎四方(拼车、顺风车)
久久催app:应用预览:久久催 (互联网催收)
巧匠课堂:应用预览:巧匠课堂(在线教育)
猎趣:应用预览:猎趣(二手商品交易平台)
amazingChina:应用预览:amazingChina(入境游)
微信:fym1414901782
QQ : 1414901782
感恩各位老板合作!

收起阅读 »

2.1.0版升级常见问题:iOS App闪退、input宽度等问题,请升级到2.1.1版

编译模式

HBuilderX 2.1.1版(20190716)已经发布,请先更新版本,再报问题


iOS App在非自定义组件模式的闪退问题

HBuilderX 2.1.0 版本,非自定义组件模式(或称之为模板模式)的老项目,在iOS上会闪退或无法进入。

解决方式1:
修改manifest.json的编译模式配置,改为自定义组件模式。参考:https://ask.dcloud.net.cn/article/35843。可能涉及部分代码调整。

解决方式2:
升级为2.1.1版。

我们强烈推荐开发者尽快升级为自定义组件模式,无论是为了性能、功能、还是稳定性。

模板模式,作为官方已经淘汰的模式,目前在官方的新版发布时已经不再进行测试。包括新增的功能,比如App的debug,也不可能支持模板模式。

未来,云打包也将不再支持模板模式。

另外,开发者新开项目时,请不要复制老项目的manifest。HBuilderX新建项目时,默认是自定义组件模式。但如果你的老项目是模板模式,复制这样的manifest到新项目,会把新项目也搞成模板模式。

css告警问题

2.1起新增了nvue的全局变量和不支持的css告警。
因为nvue其实支持的css是有限的,很多web的css不支持,但开发者写了很多无效代码也不知道。
如果控制台大量告警某些css不可用,一般是nvue里使用了不支持的css,以前没有告警,但也不会生效,现在在控制台给予了告警提醒,但也不影响运行。
由于nvue的uni-app编译模式支持了全局样式,也就是app.vue里的样式会在所有nvue里也生效。如果app.vue里写了nvue不支持的css,也会告警,同样也不影响运行。
想清理干净告警,建议在app.vue里写条件编译 / ifndef APP-PLUS-NVUE /,把vue用的css放这里。

自定义基座更新问题

如果你之前打了自定义基座,换了新版,请重新打自定义基座。不要用新版HBuilderX运行老版基座,那肯定是不行的。

地图打包失效的问题

新版manifest支持了百度地图的可视化配置。除了在manifest的模块中勾选map模块,还需要在sdk配置中勾选高德或百度。推荐高德。

titleNView 失效问题

2.1 起 navigationStyle 支持配置为 custom,可在多端使用。同时修正了 titleNView 配置错误时会导致导航栏隐藏的问题,请注意不要把false的布尔值写成"false"字符串。

// 错误的用法,之前版本会导致 titleNView 隐藏,2.1 不会隐藏 titleNView  
"titleNView": "false"  
// 正确的用法,可以正常隐藏 titleNView  
"titleNView": false

保存文件时提示eslint-vue插件不存在

这是升级时eslint-plugin-vue插件在更新node_module时无法连接npm服务器造成的。
可以在 工具-插件安装 里找到 eslint-plugin-vue,卸载这个插件,然后重新安装。

mac下svn/git插件失效问题

在工具-插件安装 里找到 svn、git,卸载插件,然后重新安装。

2.1.1 还修复了一批其他bug,列表如下:

  • 修复 终端命令分隔符不对导致运行npm命令失效的Bug
  • 修复 Node.js插件依赖的node_module安装失败后,插件仍然被当做已安装成功的Bug
  • 【uni-app插件】
    • 修复 TypeScript 项目中包含 nvue 时编译报错的Bug
    • App端 优化 titleNView 配置为字符串"false"时,等同于布尔型false,均为隐藏导航栏
    • App端(Android平台) 修复部分场景下,导航栏标题显示为页面url的Bug
    • H5端 修复 input 组件在 flex 布局下默认宽度为0的Bug
    • H5端 修复 input 组件设置高度后文字默认未垂直居中的Bug
    • hello uni-app 修复顶部选项卡(nvue版本)下拉刷新无法回弹的Bug
  • 【5+App插件】
    • iOS平台 修复 uni-app使用非自定义组件模式编译可能出现卡在splash界面或崩溃闪退的Bug 详情
    • iOS平台 修复 5+应用使用WKWebview在某些情况下可能引起闪退的Bug
    • iOS平台 修复 webview的circle样式下拉刷新操作不流畅和显示细节不正确的Bug 详情
    • Android平台 修复 nvue页面中image标签的placeholder属性设置本地地址可能引起崩溃的Bug 详情
    • Android平台 修复 原生控件对象(plus.nativeObj.View)不添加到Webview窗口直接显示后无法正常关闭的Bug 详情
继续阅读 »

HBuilderX 2.1.1版(20190716)已经发布,请先更新版本,再报问题


iOS App在非自定义组件模式的闪退问题

HBuilderX 2.1.0 版本,非自定义组件模式(或称之为模板模式)的老项目,在iOS上会闪退或无法进入。

解决方式1:
修改manifest.json的编译模式配置,改为自定义组件模式。参考:https://ask.dcloud.net.cn/article/35843。可能涉及部分代码调整。

解决方式2:
升级为2.1.1版。

我们强烈推荐开发者尽快升级为自定义组件模式,无论是为了性能、功能、还是稳定性。

模板模式,作为官方已经淘汰的模式,目前在官方的新版发布时已经不再进行测试。包括新增的功能,比如App的debug,也不可能支持模板模式。

未来,云打包也将不再支持模板模式。

另外,开发者新开项目时,请不要复制老项目的manifest。HBuilderX新建项目时,默认是自定义组件模式。但如果你的老项目是模板模式,复制这样的manifest到新项目,会把新项目也搞成模板模式。

css告警问题

2.1起新增了nvue的全局变量和不支持的css告警。
因为nvue其实支持的css是有限的,很多web的css不支持,但开发者写了很多无效代码也不知道。
如果控制台大量告警某些css不可用,一般是nvue里使用了不支持的css,以前没有告警,但也不会生效,现在在控制台给予了告警提醒,但也不影响运行。
由于nvue的uni-app编译模式支持了全局样式,也就是app.vue里的样式会在所有nvue里也生效。如果app.vue里写了nvue不支持的css,也会告警,同样也不影响运行。
想清理干净告警,建议在app.vue里写条件编译 / ifndef APP-PLUS-NVUE /,把vue用的css放这里。

自定义基座更新问题

如果你之前打了自定义基座,换了新版,请重新打自定义基座。不要用新版HBuilderX运行老版基座,那肯定是不行的。

地图打包失效的问题

新版manifest支持了百度地图的可视化配置。除了在manifest的模块中勾选map模块,还需要在sdk配置中勾选高德或百度。推荐高德。

titleNView 失效问题

2.1 起 navigationStyle 支持配置为 custom,可在多端使用。同时修正了 titleNView 配置错误时会导致导航栏隐藏的问题,请注意不要把false的布尔值写成"false"字符串。

// 错误的用法,之前版本会导致 titleNView 隐藏,2.1 不会隐藏 titleNView  
"titleNView": "false"  
// 正确的用法,可以正常隐藏 titleNView  
"titleNView": false

保存文件时提示eslint-vue插件不存在

这是升级时eslint-plugin-vue插件在更新node_module时无法连接npm服务器造成的。
可以在 工具-插件安装 里找到 eslint-plugin-vue,卸载这个插件,然后重新安装。

mac下svn/git插件失效问题

在工具-插件安装 里找到 svn、git,卸载插件,然后重新安装。

2.1.1 还修复了一批其他bug,列表如下:

  • 修复 终端命令分隔符不对导致运行npm命令失效的Bug
  • 修复 Node.js插件依赖的node_module安装失败后,插件仍然被当做已安装成功的Bug
  • 【uni-app插件】
    • 修复 TypeScript 项目中包含 nvue 时编译报错的Bug
    • App端 优化 titleNView 配置为字符串"false"时,等同于布尔型false,均为隐藏导航栏
    • App端(Android平台) 修复部分场景下,导航栏标题显示为页面url的Bug
    • H5端 修复 input 组件在 flex 布局下默认宽度为0的Bug
    • H5端 修复 input 组件设置高度后文字默认未垂直居中的Bug
    • hello uni-app 修复顶部选项卡(nvue版本)下拉刷新无法回弹的Bug
  • 【5+App插件】
    • iOS平台 修复 uni-app使用非自定义组件模式编译可能出现卡在splash界面或崩溃闪退的Bug 详情
    • iOS平台 修复 5+应用使用WKWebview在某些情况下可能引起闪退的Bug
    • iOS平台 修复 webview的circle样式下拉刷新操作不流畅和显示细节不正确的Bug 详情
    • Android平台 修复 nvue页面中image标签的placeholder属性设置本地地址可能引起崩溃的Bug 详情
    • Android平台 修复 原生控件对象(plus.nativeObj.View)不添加到Webview窗口直接显示后无法正常关闭的Bug 详情
收起阅读 »

uni-simple-router 路由、拦截、最优雅的解决方案

vue3 + vite

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭,或者查看 官方文档

uni-simple-router

一个更为简洁的Vue-router,专为 uni-app 量身打造

安装

NPM

 npm install uni-simple-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'  
import Router from 'uni-simple-router'  

Vue.use(Router)

大纲

  1. 编程式的导航

  2. 命名式路由

  3. 路由传参

  4. 全局前置守卫

  5. 全局后置钩子

  6. 路由独享守卫

  7. 路由元信息

  8. 完整的导航解析流程

  9. 注意事项

简介说明:

是否你也曾感叹过为啥官方就不搞一个类似 Vue-router 一样的路由管理器?苦苦寻找。搜遍百度?社区?以及 Google?甚至是官方的各大 QQ 群?难受没找到!直到此插件出来之前也没有一个更好的解决方法。于是,没错,就是,它诞生了。只要你会使用 Vue-router 即可马上上手,下面文档的完全不用看。它保留了 Vue-router 完全相似的书写风格,让你 倍感亲切 !

不要脸系列:

最后欢迎大家来PR,一个人的力量是有限的,大家一起来。如果有帮到你们能否在github上点个赞,文章点个赞。赞越多需求完成的越快哦 ,有啥问题在下方留言。不要那么吝啬嘛!

相关连接:

1. uni-simple-router 文档地址

2. uni-simple-router github地址

3. uni-simple-router 插件市场

4.uni-app-tools工具集合

5. uni-app官方路由文档

6.uni-simple-router之H5强化篇

继续阅读 »

vue3 + vite

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭,或者查看 官方文档

uni-simple-router

一个更为简洁的Vue-router,专为 uni-app 量身打造

安装

NPM

 npm install uni-simple-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'  
import Router from 'uni-simple-router'  

Vue.use(Router)

大纲

  1. 编程式的导航

  2. 命名式路由

  3. 路由传参

  4. 全局前置守卫

  5. 全局后置钩子

  6. 路由独享守卫

  7. 路由元信息

  8. 完整的导航解析流程

  9. 注意事项

简介说明:

是否你也曾感叹过为啥官方就不搞一个类似 Vue-router 一样的路由管理器?苦苦寻找。搜遍百度?社区?以及 Google?甚至是官方的各大 QQ 群?难受没找到!直到此插件出来之前也没有一个更好的解决方法。于是,没错,就是,它诞生了。只要你会使用 Vue-router 即可马上上手,下面文档的完全不用看。它保留了 Vue-router 完全相似的书写风格,让你 倍感亲切 !

不要脸系列:

最后欢迎大家来PR,一个人的力量是有限的,大家一起来。如果有帮到你们能否在github上点个赞,文章点个赞。赞越多需求完成的越快哦 ,有啥问题在下方留言。不要那么吝啬嘛!

相关连接:

1. uni-simple-router 文档地址

2. uni-simple-router github地址

3. uni-simple-router 插件市场

4.uni-app-tools工具集合

5. uni-app官方路由文档

6.uni-simple-router之H5强化篇

收起阅读 »