在珠海魅族科技有限公司担任前端开发。主要负责魅族官网的开发和维护,包括但不限于H5电商页面、新品发布会在PC和H5等多端的展示页面、新品购物详情页面、官网新推活动页面等。个人工作开发过程中以React技术栈为主,包括React, Redux, TypeScript, AntDesign等,同时也掌握Vue全家桶技术栈,包括Vue, VueX, Element-UI等。后端尝试过 Node+Express+MongoDB的方案进行开发。
魅族H5购物平台(React + Redux + TypeScript + Antd),负责魅族H5购物平台订单列表、订单详情、收发货地址表单、售后列表、交易记录等页面的开发。该平台产品逻辑基本与手机淘宝类似。
根据业务调整,配合后端定义新接口和新字段,以满足最新业务需求。
开发过程中解决history.go()方法与魅族手机自带ie内核浏览器的兼容性问题,通过手写window.localStorge中建立跳转链接的栈,用window.location.href出入栈的方式实现页面跳转。
【手机浏览器: https://store.meizu.cn】【测试版】
【手机浏览器: https://store.meizu.cn/h5/order/list.html】【测试版】
魅族watch页面(React + GSAP3),负责魅族手表H5概述页面的开发。
引入GSAP3动画插件,将原先不能在移动端展示的视频用动画高度还原,并加入滚动交互,提升用户体验。
通过js控制动画,在滑动到指定位置才触发动画,减少不必要的重绘和回流,从而达到性能优化。
【微信浏览: https://m.meizu.com/meizuwatch/summary/weixin】
【手机浏览器: https://m.meizu.com/meizuwatch/summary】
魅族官网商城(jQuery),参与魅族商城购买PC页面的开发与bug修复。
开发优惠券弹窗,实现弹窗内滚动,修复页面在小尺寸Mac设备显示兼容问题。
按需求修改预览图组件,动态插入样式,实现产品跟随页面上下滑动展示。
【PC浏览器: https://detail.meizu.com/item/meizu18.html】
魅族18系列概述和参数页面(React + ScrollMagic),负责魅族手机18系列参数和概述多端页面的开发。
通过ScrollMagic流畅地展示产品页面,滚动到对应区块,动态插入css样式,优化交互体验。
修复视频在安卓端播放样式问题,根据业务调整,配合后端获取字段动态加载二级导航。
【PC浏览器:https://www.meizu.com/18/spec】
【手机浏览器:https://m.meizu.com/18/summary】