Pixivc开发第一阶段小记

本来是一时兴起做的一个快速开发挑战,没想到这个挑战从1天完工一个页面拉长到了一周的时间,把需求扩展到了全端适配,而且细做了样式。

这个项目是基于已有的Pixivic.com这个网站,利用他们现成的后端(API公开且后端代码开源),做一个前端的程序,实现更加优雅地P站看图体验。

目前第一阶段开发已经结束,项目已经上线到了pwp.app:

https://pixivc.pwp.app

这个第一阶段的开发对我的开发能力是有不小的锻炼,所以对整个这个阶段做一个记录。

项目构建

最开始是以高速开发一个图站为目标做的这个项目,所以还是启用了Vue + Element,虽然上次提过不想再用,但是在熟悉React之前对我来说最速方案仍然是这一套。

(有一说一,Element现在还停在2.13.0,明明有很大的问题还是不更新,为了解决这个版本的既有问题还是用自己编译的版本替换了官方的正式版)

这一次项目在构建上有三个改变,第一是样式不再写到Vue文件内,因为整个项目是更加侧重与样式,样式的成分很重,所以所有的less都剥离出去了。

第二是时间方面的处理类库不再使用moment,moment体积比较大,考虑到需求不是很复杂,换用dayjs。

第三是没有必要拆出来放组建的就不做组件了,其实这样反而更好开发。通信方面都是靠父子组件或者store,尽量避免了使用vue-bus。

项目重点

项目侧重于样式,主要是使用了一下mixin,然后了解了一下瀑布流的布局在响应式下怎么写(我用的是封装好的vue-mansory,自己写的话CSS可以写列排瀑布流,行排需要用JS,到时候另开一篇笔记吧)。

动画方面主要用JS + transition控制的,没有做key + frame的纯CSS动画。

样式的难点主要在于各个页面做响应式这方面,使它在全端都能用,这一部分样式调整还是调了很长时间的,让我在样式这一方面获得了一些新技能新经验。

然后用到的依赖方面,这一次是多了解了一下无限滚动和Lazyload的一些相对复杂的用法,瀑布流 + LazyLoad还有详情页图片翻页这一块需要做一定的宽高计算,还要考虑到设备的情况,算是这个阶段的难点吧,调了很长时间才调好。

项目未来

这个新坑后面有更多精力会进一步改进一步维护,为了防止别人的后端出现大改或者是其他的变化,我自己Fork了一份后端。考虑到这个后端运行成本很高,如果现在这个借用的后端不可用了,那么这个项目将会停止,代码归档。

有精力的情况下主要是会进一步调优移动端的东西,然后把现在功能上的缺失补上去。

Pixivc
GitHub Repo