项目一: 鲜惠商城(PC端)
开发周期:4个月
项目描述:该项目是一个促销商品推荐网站的PC端项目,客户注册后可以根据商品分类按需添加购物车,并购买商品, 主要有首页模块,分类模块,商品详情,登录模块,购物车,结算支付模块以及个人中心。
技术要点:
我主要负责商品详情,商品分类,登录模块以及购物车模块;
使用vue脚手架(vue-cli)进行架构,vue-router配置路由,实现单页面的路由跳转;
使用vuex数据仓库,存取公用数据,实现登录注册,商城购物,分类查询等功能;
借助原生JS中的方法IntersectionObserver()异步检测目标元素与祖先元素相交情况的变化, 实现数据和图片的懒加载;
使用rem适配方案,自定义封装轮播图组件,面包屑组件,城市选择组件等;
使用webpack进行打包开发
实现技术:
vue、webpack、vue-cil、axios、localStorage、rem
项目二: U鲜购(小程序)
开发周期:1个月
项目描述:基于uniapp开发的微信小程序商城项目, 主要包括首页模块,分类模块,购物车模块以及我的模块
技术要点:
由于小程序中不支持axios,因此在uni-app中使用的是@escook/request-miniprogram第三方包发起网络数据请求,在页面生命周期函数onLoad()中获取数据。
在首页组件中的onPageScroll()生命周期函数中监听页面滚动,当滚动一定距离后右下角显示top按钮,点击即调用uni.pageScrollTo()将页面滚动到顶部。
由于小程序有体积和资源加载限制,为了优化其下载和启动速度,项目中进行了分包加载配置,把除了默认启动页面以及TabBar页面之外的页面资源配置在subPackages选项中。
搜索框部分进行了防抖处理,商品列表区域的上拉加载更多功能通过节流阀防止发起额外的请求