项目介绍:https://mp.weixin.qq.com/s/Uw7mkNqAyXnmE1Gh5C14UA

这个项目可以说是迭代版本最多的一次了(不过现在是NSW的项目最多了),项目中有三位程序参与,我负责前端及后端开发。

该项目共经历了三次大更新,第一代因为疫情原因项目取消了。项目介绍中使用的是第二代,也是功能最多的一版,第三代的话只是更新了UI,取消了多人定制。此外还有个衍生的项目(SU20 NSW VISION捏人)。本文以第二代版本为例进行讲解。

首先,放一下历代版本的UI。

第一代版本(已取消)
第二代版本(于2020年04月30日上线)
!第三代版本(于2020年07月09日上线)

第一代的版本虽然取消,但是开发中踩过的坑为后续两代的开发提供了很大的遍历。前期设计中整个选择的过程均在canvas中显示效果,导致每次更换切换选择时都要等待1~2s来加载图片(因为小程序中要先使用wx.getImageInfo获取网络图片,才能在canvas中进行渲染,每次切换都要重新获取所有图片,导致不必要的资源浪费,也延长了等待时间)

在第二代的初期,才用的方案为:在选择性别,体型和姿势后,将所需要的素材图全部下载到缓存中,之后的在进行调用就相当于本地图片调用了,将切换的事件压缩到了1s以内(但是每次切换也要有loading,很是影响用户体验)。

最后我们将图片合成的部分放到了服务端(这个项目从前端到后端都是我个人独立完成的),这里用到了前面提及的一个nodejs插件canvas,至于选择中的预览则是直接样图片堆叠的方式显示,每张素材图都压缩到极致后,可以做到秒切换。

最终效果预览

之后的衍生项目 SU20 NSW VISION 也是直接使用的这种方案,效果非常完美。

截止目前,以上小程序均已下线。线下的店铺还能玩到其他版本的,不过定制的应该已经没了(也算是绝版了吧)。

总之,这个项目的开发,确实学到了很多新知识,期待更大的挑战。

最后修改:2021 年 04 月 05 日 09 : 06 AM
如果觉得我的文章对你有用,请随意赞赏