介绍
天使童装是商城小程序,在拿到项目的那一刻，首先梳理了一下主要功能，确保注意到每一个小细节，增强用户体验。
除了支付无法实现 总共实现了5个模块,首页,分类,购物车,微信授权登录,
网络封装
在写项目之前需要在微信开发者页面把https的请求地址加入微信地址让微信可以读取,还需要进行网络封装来让我们请求更加方便快捷,不用再一遍遍的请求wx.request方法来实现请求了,大大提高了开发效率,准备工作做好了,就需要写页面了
首页页面
首页页面
1.首先实现了轮播图 使用的微信官方文档给出的组件进行配置就可以使用
2.搜索框（点击搜索框输入关键字进入搜索页面，返回符合条件的商品列表）把输入框的关建字拿到然后请求搜索接口等接收到了数据返回值 再渲染到列表,搜索页面有一个列表样式改变:我的实现思路是定义一个布尔值,利用动态class 当布尔值为true时实现第一个样式不为true时实现第二个样式.
3.上拉加载(判断盒子离顶部达到一定距离时请求接口添加列表数据)
4.点击商品进入详情页(点击时拿到商品id 跳转传值请求数据并渲染)
分类页面
1.搜索功能 (因为在首页已经实现搜索只需跳转传值即可)
2.点击购物车添加到购物车(点击购物车图标时需要拿到id和数量并请求接口)
3.点击商品进入详情页(在首页已经实现只需传值跳转即可)
4..点击左侧分类，进入对应的内容(首先需要渲染左侧分类点击时拿到id并传给右侧然后请求数据渲染页面,点击时需要清空右侧数据)
购物车页面
1.点击删除按钮可以删除商品(点击拿到id请求数据,并利用splice方法删除页面对应列表)
2.点击商品右下角+ - 按钮可以改变商品数量(利用vant步进器,添加chenge事件在数据变更时请求数据进行更改)
3.点击去结算进入确认订单页面(跳转页面再次请求购物车数据即可)
4.点击新增收货地址进入收货地址页面(点击跳转进入收货列表页面请求数据渲染列表,点击添加按扭进入添加数据页面首先需要填写相应数据如姓名,手机号,地址,地址可以使用vant,填写完毕后请求数据把收货地址保存到服务器,默认收货人:后端并没有给出修改默认收货人接口,所以我们需要保存本地,点击收货列表内容时,替换本地储存的数据,在订单页面获取本地数据渲染出来即可)
我的页面
请求微信官方接口授权登录,返回的code如果为0无需注册,为10000则执行注册方法,还需要在进入我的页面时在页面加载生命周期里,调用一遍流程,随时保持登录状态,并且在进行添加购物车进入购物车页面的时候都需要判断本地是否有token 有的话放行,没用调用登录弹出层进行登录或注册
对此次项目的总结
在此次项目开发中，中间出现很多问题,但是通过沟通，交流，最终都解决了,本次开发的项目,先写静态页面,然后根据思路进行逻辑操作,还使用了vant组件提高开发效率,并拆分组件提高效率和复用性,再对搜索和添加购物车,步进器等进行防抖节流来优化性能并对首页列表和详情页详情图进行懒加载优化提高效率
该项目中还是有一些难点，比如登录授权，接口封装，但是经过老师的讲解，自己再进行一些思考，还是可以解决的。谢谢大家