手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

uniapp点击tabbar不刷新的处理

在使用UniApp进行小程序开发的时候,总是不可避免的会使用tabbar。在小程序中tabbar的页面和普通的页面不一样,比如,他对应的页面就始终含有tabbar,而其他页面则不显示tabbar(要显示只能用自定义组件)。而且切换页面的时候,只能用switchTab,而不能用navigateTo。

这些都是平时可以看得到和可以通过报错信息查看得到的(比如navigateTo跳到tabbar时,出错信息就是提示不能跳转到tabbar的页面)。

tabbar还有一些有意思的小特性,比如,tabbar对应的页面,不能是分包里的,只能含在主包里。tabbar打开后数据加载完,默认不再刷新。这个就带来不小的问题,比如电商的首页,加载后不刷新那就一直无法获取最新数据了。

通过查看uniapp的文档,发现App.vue除了常见的onLaunch/onShow/onHide等之外,还有什么onPageNotFound(这个平时不会触发,只有扫描、转发等才会触发,navigateTo等不会触发此事件)之类的。[应用生命周期:生命周期 - uni-app官网 (dcloud.io)]

而普通页面,常用事件就是onInit/onLoad/onShow/onHide/onUnload,除此之外还有:onResize/onPullDownRefresh/onReachBottom/onPageScroll,如果是页面点击事件,还有onTabItemTap/onShareAppMessage/onNavigationBarButtonTap/onBackPress【页面生命周期:生命周期 - uni-app官网 (dcloud.io)

当注意到onTabItemTap事件后,就想起来,可以利用此事件进行操作:onTabItemTap(e){console.log(e);},打印这个e,可以看到他是一个Json对象,有三个主要的key:index/pagePath/text,index是针对Tabbar的索引 ,pagePath是当前Tab的路径,text是tabbar对应的文字。

于是就可以利用这个pagePath:

JavaScript代码
  1. onTabItemTap(e){  
  2.    uni.reLaunch({url:e.pagePath});  
  3. }  

偷懒的时候就可以直接这么做。

纯记录。

uniapp创建的小程序提示文件体积超过500KB

以前没注意过,好象也没有发生过,最近在使用UniApp创建小程序的时候,运行几下就突然出现:[JS 文件编译错误] 以下文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理。

很烦人,一旦出现这个错误,tab页几乎都是正常的。但无法跳转到其他页面,出错信息是xxxxpage not registed。

在开发者工具上设置过:Es6转为Es5,不启用。uniapp的manifest.json中,对微信小程序也是设置了,上传时压缩代码,但仍然不起作用。

这时候看一下,HbuilderX的运行菜单,运行->运行到小程序模拟器->运行时是否压缩代码,如果没有打勾,就打个勾。

----网上有提示,如果用cli创建的,则需要package.json中增加:

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

--

再次运行,正常了。

ElementUI form服务端验证

看到标题的时候,估计会很惊讶,服务端验证那不是很方便么,自定义一个rules,杀杀水就达到目标了。

事实上,我是在做一件偷懒的事情,毕竟大家都知道表单验证很多时候为了方便和节约性能,都是客户端先检验,然后再服务端检验,这样用户体验也好,但是在后台的时候,如果你要写两遍,那花的精力就大了。特别是elementUI的rules,还得写自定义的validateFunc,于是我就想着前端不校验,后端校验,然后把error回显到指定的元素上。
 
比如如果只是弹个窗,提个示,那谁都可以实现了,但如果你不能为指定元素做错误提示,那么在表单过多的情况下,用户也会很苦恼。如果表单有几十个,怎么破?
 
翻了一下elementui的form和form-item的源码,发现可以额外传递error进去。用来提示该元素出错了。error是一个string,组件中会watch,然后给validateStatus赋值error,给validateMessage赋值error对应的string。
 
于是,在submit的时候,发现有error时,可以直接this.errors = res.data.error;这时候相应的元素就会飘红。除了没有focus到第一个标红的元素上,其他一切OK
 
---
如果用的是step 表单,那要注意,如果要去不同的step,需要先设置step ,然后 在 this.$nextTick()中进行赋值。否则,页面出来了。变量会提前赋值,渲染出来的表单元素无法将error赋值进去。被这个折腾了一晚上。
 
---
用这个的好处是,只有提示,不会象他原来的rules会阻止下一步的进行。现在就感觉轻松多了。
本来是准备切到andtv的,结果 发现elementUI的2.15,把andtv中的几个额外的组件也加全了。比如description-item和 骨架屏。。确实666
 
----
再忍忍,现在还得用VUE2.。。。
 

Avoid mutating a prop directly since the value will be overwritten whenever the parent

 InertiaJS和VueNestable共用时,遇到的Avoid mutating a prop directly since the value will be overwritten whenever the parent.

因为在使用InertiaJS时,所有的变量都是通过props传递进去的。比如分类的数据。这时候用vue-nestable,就会出现上面的错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: xxxx

因为xxxx变量是props传过来的。因此不能在子组件再通过组件来修改xxxx变量。要偷懒直接在data变量中定义一个中间变量,这时候就方便了。

data(){
    return {
        yyyy: this.xxxx
    }
}

然后vue-nestable的v-model可以直接用this.yyyy,报错信息解除。

-----

这个问题主要是出在inertiaJS上。毕竟其他完整的页面demo,变量都是当前页直接给出来的,所以就不会出错了,但遇到问题还是要看本质,才知道怎么改

Failed to decode downloaded font:

 用webpack打包的时候,页面的图标出不来了,比如:elementUI和fontawesome的图标,在console里出现:Failed to decode downloaded font:<URL>,网上查了大约有两种说法

1、springboot,需要在POM文件里加入对woff/eot等的文件的处理,然而我不是spring项目,所以就明显有问题

2、可能是打包的时候图标文件有问题,因为用webpack,可能就打的不是完整包(极有可能),所以用正常的覆盖一下。

我用方法2解决了。如果你遇到类似的问题,可以尝试一下。

Records:29812345678910»