项目名称:收藏集市小程序
项目描述:结合社区和电商于一体的新一代收藏爱好者交流、拍卖平台。责任描述:首页社区、店铺模块、订单模块、个人中心等等。
技术要点:
1.项目组成由小程序原生页面结合 webview 来加载 H5 项目,涉及到H5 向小程序通信,如分享配置,采用 web-view 的 postMessage 来实现。
2.借助 IntersectionObserver 来实现埋点的自动上报。
3.借助 Canvas 实现业务开发中各种小程序卡片分享图/海报。遇见的问题是,由于分享出去的卡片带有不必要的页面参数,所以分享出去的 url 必须要做删除无用参数处理。4.从基础库 2.7.1 开始,借助小程序端的实时日志,对项目错误上报、用户行为收集、叮叮群报警,解决项目裸奔的问题。
5.首页社区推荐:feed 流视频自动播放器控制,每个视频容器中心给一个通栏的被观察元素,当与viewport 中间交叉实现自动播放视频。
6.店铺瀑布流采用 flex 布局: 卡片奇偶排列,无极端情况下,最为稳定,呈现瀑布流效果。项目优化:
1.采用分包加载,优化小程序首页启动的下载时间,下载主包仅为 1.43M的资源代价。2.图片、字体文件托管到 CDN 上节约用户 98%的流量、使用七牛云对图片进行缩放/裁剪。项目成就:
1.从 20 年 11 月中旬到今年五月份收藏集市达到均值 5 万+UV。添加人数月稳定增长11.81%。2.个人技术能力、职场综合能力得到显著提升。