前情提醒:
1.此为进入行业内的第一个项目,刚刚从学校毕业,也没有独立开发过一款微信小程序,所以对许多基础点并不懂。如果有什么比较菜的地方,请大佬们见谅,勿喷。
2.总体周期为4个星期,共完成两个小程序(大概十几个页面),包括UI,功能
开始坑:
1.Picker:一款功能强大的滚动选择器(就是有些复杂,不过还是香的)
uni-app:https://uniapp.dcloud.io/component/picker?id=picker(微信开发者文档也有,就不给链接了)
2.要完成的效果是城市的三级联动,由于后台返回的数据是下标,因此就需要我根据下标把用户选中项和城市列表的id项匹配上,然后把对应的城市,区域的数组数据返回到picker中
解决办法:
1.这里最开始是准备用插件市场的插件,但是当代码写到一半的时候,突然发现插件中有些效果和我想要的效果是不同的,如果想要完成我的效果,就需要看插件的源码进行修改调试(这里由于已经看过插件的源码,发现改动挺麻烦的,因此我选用了第二种)
2.自己写一个函数,我写了一个函数专门做数据的选中项和数据列表的id匹配,将得到的数据进行返回,这样就可以完成预期的效果,也可以实现多个页面使用同一个函数
执行遇到问题及解决:
1.将用户在picker组件事件中e的值进行打印,分别进行判断,不同列改变和不同列不同值改变时所应该进行匹配。例如:第一列进行变化,第二列也要根据第一列进行变化,第三列一次类推;
2.当我完成匹配后发现,当我每次进行匹配都要运行大量循环和判断就会造成卡顿,因此我将每一次获取到的e中的value值作为下一次匹配的依据,这样我就不需要每次都去匹配所有的数据了。例如:我选中了第一列的第二个值,那么我下次匹配区域就可以在这个界限中进行,这样就减少了程序的运行,提高了效率。
3.当我完成匹配去测试时发现,当我直接将第一列跳回第一个值时,可能会造成下面的数据的错乱(因为我第一个数据只有一条,循环匹配中用到了.length,这是第二列就会报错),我在每一次进行匹配时对只有一个的数据进行了单独判断,这样就不会造成错乱的问题了
4.由于我的函数封装是完成功能后做的,因此在封装完成使用时,出现了一个Render错误,这里我的问题是,调用的层次过多导致渲染层不渲染了(我解决问题时看的解决方案,虽然简单,但是解决了问题)
链接:https://www.cnblogs.com/xiao-hui-hui/p/10489256.html
其实做第一个项目,还遇到了其他的问题(包括兄弟传值,用户登录,筛选等),不过印象并不深刻,而且解决起来并不是很难,这里就不说了