首页 > 编程知识 正文

微信小程序框架,好玩的微信小程序

时间:2023-05-06 04:58:36 阅读:266751 作者:939

近期项目涉及微信小程序,鉴于原生小程序文件结构过于复杂,决定使用wepy框架开发

wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一

下项目开发过程中遇到的坑:

1.minUI

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

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

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

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

2.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编译中最后一次错误会被记录在这里,上传之前记得清除一下。

3.Echarts

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

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

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

例如:

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

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。