微信小程序wepy框架+minui踩坑之路

前言:wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一下项目开发过程中遇到的坑

minUI

由于minUI与wepy框架兼容性较好,而且支持单组件导入,所以选择了minUI,使用方式官网有写,需要的组件直接npm安装即可,不过要注意的是,它的form组件对form表单提交支持性并不好,如果想要提交表单还是建议原生或者使用异步提交:

Note

小程序组件系统中组件是隔离的,所以提交表单时无法用 form 表单获取输入框中的值,只能单独获取

minUI中的button组件并不支持disabled禁用(或者我没看懂文档,至少直接写disabled不行)。

minUI中的很多组件样式是无法通过style或者class控制的,所以如果有需要,可以进入packages,找到组件的wxss自行添加。

minUI可以和原生组件一起使用,例如原生scroll-view+minUI中的list。

wepy

  1. wepy的组件与父级css是共用的,也就是说主页面中的css组件也可以使用。
  2. 发送广播是向子组件传输数据的重要手段,而且子组件中的events可以当成子组件的生命周期函数使用(类似子组件的 onLoad)。
  3. 在组件中写生命周期其实是调用组件页面的生命周期,所以就像文档说的不需要写生命周期函数。
  4. 页面调用全局是this.globalData.,组件调用全局变量是this.$parent.globalData.,组件中的组件调this.$parent.$parent.*,此类推。
  5. 子组件所需要引入的UI组件/其他组件,都写在父级页面的usingComponents中,注意路径不要写错。
  6. 由于第一次用,所以刚开始修改了dist文件导致项目崩溃(其实人也很崩溃),然后就是一个漫长的恢复项目的过程,重新cli等,但是发现还是不成功,显示页面构建失败之类的,刚开始发现忘了装async的pollyfill,npm后还是报错,最后查阅资料发现是babel的配置出了问题,于是乎修改了wepy.config.json再次编译如果显示UI组件找不到,路径正确的情况下可能是未开启微信小程序ide的ES6转ES5,最后再次build终于成功,所以请勿修改dist文件夹!
  7. 不知道是不是build –watch的问题,在编译中添加文件后,删除/重命名文件都无效,只要被build进去的文件无法通过再次build删除(无奈),所以最后上传小程序时,我采用的方法是将dist文件单拎出来,对其中无效(被删除/重命名)的文件进行整理,最后记得整理app.json文件,最后进行上传即可。注:其中_wepylogs.js文件是用来记录错误的,在wepy编译中最后一次错误会被记录在这里,上传之前记得清除一下。

Echarts

这个参考一位大佬所写的方法:

https://blog.csdn.net/juzipidemimi/article/details/81807110

需要注意的是,我是将开源中的项目down下来直接复制了charts文件夹,其中每一个charts的组件中,存在一个initChart方法,它是用来代替原来的ec:{},原理在文章中有写,这个方法被写在了methods(){}中,如果你想通过后台数据实现动态刷新图表,可以使用ES7的async将你的request变为异步函数,最后在.then中进行initChart,否则如果请求的时间在initChart之后,图表是不会渲染出来的,因为数据没有请求到。

目前项目顺利开发完成,上传的dist目录结构:

img

注:index.template.html不会被上传

感谢您的阅读,本文由 JSPeng | BLOG 版权所有。如若转载,请注明出处:JSPeng | BLOG(http://jspeng.com/2018/10/13/微信小程序wepy框架+minui踩坑之路/
使用 Css 获取用户密码
2018年个人总结