浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2022, March 1, 10:28 PM
在使用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代码
- onTabItemTap(e){
- uni.reLaunch({url:e.pagePath});
- }
偷懒的时候就可以直接这么做。
纯记录。
Javascript | 评论:0
| 阅读:3864
Submitted by gouki on 2022, February 13, 9:41 PM
以前没注意过,好象也没有发生过,最近在使用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"
--
再次运行,正常了。
Javascript | 评论:0
| 阅读:5170
Submitted by gouki on 2021, October 8, 8:36 AM
看到标题的时候,估计会很惊讶,服务端验证那不是很方便么,自定义一个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.。。。
Javascript | 评论:0
| 阅读:4128
Submitted by gouki on 2021, October 1, 10:10 AM
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,变量都是当前页直接给出来的,所以就不会出错了,但遇到问题还是要看本质,才知道怎么改
Javascript | 评论:0
| 阅读:3858
Submitted by gouki on 2021, September 28, 11:10 PM
用webpack打包的时候,页面的图标出不来了,比如:elementUI和fontawesome的图标,在console里出现:Failed to decode downloaded font:<URL>,网上查了大约有两种说法
1、springboot,需要在POM文件里加入对woff/eot等的文件的处理,然而我不是spring项目,所以就明显有问题
2、可能是打包的时候图标文件有问题,因为用webpack,可能就打的不是完整包(极有可能),所以用正常的覆盖一下。
我用方法2解决了。如果你遇到类似的问题,可以尝试一下。
Javascript | 评论:0
| 阅读:4029