小程序踩坑笔记

用过了IDE,再看wepyjs,才发现后者的强大。 当然,预览和调试还是需要IDE的,所以wepyjs的作用就是提高开发效率。

一、使用PostCSS

前段时间wepy还没有正式支持postcss,但相关插件已经在开发了,通过查看源码编译成功。须注意:

  • cssnext早已废弃,现使用postcss-cssnext,用法不变。
  • style的lang属性必须指定为postcss,以便编译脚本能正确识别。
  • 使用cssnano会导致编译失败,可使用postcss-csso等插件代替。

postcss的其它插件也能照常使用,可以替代sass。

二、使用vue的语法检查

wepy“借鉴了Vue.js的语法风格和功能特性”,但提供的standard模板却使用低标准的html语法检测规则,建议采用vue的recommended标准,以保障更好的代码质量。须注意:

  • 务必替换eslintrc的plugins的值为['vue']
  • wepy毕竟不是vue,有些规则并不适用,比如v-on的modifier,不妨直接关闭。
  • indent检测不太好使,如果你的缩进习惯比较好,可以关闭。

这样操作之后,可以通过在package.json的script部分添加eslint --fix --ext .js,.wpy src来自动修复并格式化代码,效率不降反升。

三、自定义组件有重大缺陷

wepy 1.7版本的自定义组件,在循环渲染(甚至用到多个实例)时,实际上只渲染一次,导致数据绑定及事件响应失效。

其中,通过repeat元素创建的会绑定初次渲染的数据和事件,而block创建的则绑定最后一次申明的事件,数据未能绑定。但有一个例外,即className均被正确传递了!

这是已知的bug,而2.x版本还不可用,因此涉及到多重实例的情况,建议通过view+class+tap的方式在page内单独实现。

猜你喜欢

转载自my.oschina.net/u/2324376/blog/1788940