易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

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

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 | 阅读:7244

ElementUI form服务端验证

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 | 阅读:5796

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

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 | 阅读:6246