1、为了公司账号交易业务的发展,更好的服务公司客户,也是为了方便玩家,重构公司冗余的旧版APP已经是一个迫切需求。
2、软件功能包含登录注册,账号列表,动态表单,实时价格计算,优惠券,订单管理,砍价系统,助力模块,AI推荐,客服等多个模块,核心功能模块是动态表单,前后端分别校验,价格实时计算。以及砍价模块,该模块逻辑以及规则非常复杂。
3、业务流程:用户通过在平台使用手机号登陆后即可发布或挑选适合的商品上架或购买,购买时可选择好友助力,通过邀请新用户可获得账号价值一定比例的优惠,然后买家下单实时计算优惠后加个以及优惠券砍价等一系列叠加后最终价格,最终用户交易完毕后通过客服引导卖家发货后交易结束,结束后钱款暂时性冻结,待买家更改绑定信息后或等待一定时间即可解除冻结。
提示(最少80个中文字符)
1、整体架构和设计思路,不同模块使用的技术栈。
2、“我”的负责模块和结果(尽可能量化)。
3、“我”遇到的难点、坑,和解决方案。
1、整体采用uniapp vue3以及一些第三方库进行开发,设计上主要使用视图逻辑分离的策略
2、我作为公司彼时唯一的前端人员,整个项目从立项到选型到开发都由我一人负责,为了规范开发,硬性要求包含逻辑的单文件模板必须全部是自定义组件,不能写原生或组件库组件,通过这种硬性要求,最后的效果就是打包后体积极小,视图分离后复用性极大提高。相比于公司同样功能的旧版本代码体积缩小93%,完整包体积缩小75%。
3、难点1、公司希望首屏加载白屏时间尽可能短,并且在切换tabbar的时候不要闪屏,但是因为uniapp的底层限制,使用原生tabbar必然在首次加载其他页面的时候白屏,为了解决这个问题,我通过单页面模拟tabbar效果,不仅实现了首屏无缝加载,还实现了h5应用中少见的左右顺滑平移效果。
难点2、全局的通知以及弹窗提醒,在原来的项目中,同一个通知组件和弹窗组件以及配置几乎遍布每一个组件,如果能把这个解决掉那必然是一个巨大的优化,结果通过实现函数式组件,一行调用即可弹窗,通过回调来跳转或执行相应逻辑,代价体积立即压缩10%
难点3、公司希望app侧滑可以收起抽屉或弹窗而不是退回上一个页面,这在传统的h5项目中很难实现,不过我通过一个巧妙的全局响应式状态管理,一个弹窗状态栈链接到返回操作,以及在每次弹窗时向浏览器注册一个空的页面跳转,成功实现侧滑收起任意页面弹出元素的功能
难点4、不算难点,只是原本超级冗余的一个地方,页面加载相关,原软件几乎每一个列表页面的源码都有将近300多行的数据请求,分页,触底刷新,底部状态栏等逻辑,通过使用vue3 hooks,成功将二十多列表页面逻辑复用同一个hooks,通过向hooks传递请求函数来获取所有内容,通过这一项包体积再度压缩40以上,大幅节省cdn,oss等流量费用