小程序实战项目笔记

1.项目说明

    本项目名称为叮当书店，为校内的一个书籍购物平台，为学生提供书籍购买、订单查询、心得分享等服务。

    技术栈为uni-app+Vue+vuex。

2.踩坑

2.1 vuex的使用

2.1.1 命名空间

    store中各个模块需要通过namespaced:true（注意单词书写！）开启命名空间，之后通过dispatch派发action时，都需要给action方法前加上命名空间。

另外，在mutations中调用另一个mutations方法时，即便是在同一个模块下，也需要用this.commit(’ 模块名/函数 ')的方式来调用。

2.1.2 actions和mutations

      两者区别：actions是用来触发mutations的，它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发；而mutations可以直接修改state，但只能包含同步操作。

      在小程序项目中，与以往PC端项目不同，对购物车中商品的操作都通过对本地存储中cart数据的修改来实现(减少后端压力），并未发送相关的http请求，因而可以在事件回调中直接调用mutations中的方法（mapMutations）

2.2 storage本地存储

2.2.1 SyntaxError: Unexpected token o in JSON at position 1

       本地存储应有存有取。在对vuex中的数据进行修改时，还需要在最后持久化存储，存储时注意需要把数据通过JSON.stringfy转换为字符串存储到本地。在state中取出数据时主要通过JSON.parse将数据从JSON字符串转换为数据，以防本地数据为空，还需要给数据赋初始值。

2.3 用户头像昵称获取API

        低版本使用的wx.getUserInfo接口被回收，调用该API获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”；

        基础库版本低于2.27.1的小程序可以使用wx.getUserProfile接口获取用户头像昵称信息。

2.4 样式问题

2.4.1 固定定位

    固定定位的盒子必须要有宽度，一般设置为100%，否则不生效。

    固定定位的盒子会挡住页面中其他内容，可以用padding预留出盒子的高度。

2.4.2 scss模板

    书写样式采用scss模板时，注意各个类之间的嵌套关系，如果嵌套关系写错则样式将不会生效。

3.功能实现

3.1 购物车

3.1.1 全选与反选按钮的实现

（1）radio的初始值

      方法一：使用every方法遍历购物车列表，当item.goods_state都为true时，every方法返回true。

      方法二：遍历购物车列表，将列表中商品的数量goods_count相加得到总数量total，与列表中选择状态的商品总数checkedCount比较，相同为true。

（2）点击radio实现全选与全不选

       将按钮的新状态newState（原状态取反）直接赋值给所有商品的goods_state。

       但把购物车清空时，radio还是勾选。由于购物车列表是个空数组，every方法检测到空数组直接返回true。

（3）改变某个商品的状态实现radio的反选

        总数量total为计算属性，依赖于每个商品的goods_state值，因此当某个商品状态改变时，按钮的状态都被会重新计算一次，从而实现自动反选。

3.1.2 加入购物车

    加入购物车时，拿到商品goods_id，与购物车列表中的商品进行查找，如果找得到则将该商品的goods_count++(find方法返回符合条件的item），否则将商品push到购物车列表中。

3.1.3 右滑删除

    通过uni-app提供的uni-swipe-action 组件（最外层包裹性质的容器）和 uni-swipe-action-item组件。

    uni-swipe-action 组件是最外层包裹性质的容器。

   uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 right-options 属性来指定操作按钮的配置信息。

3.2 商品列表

    分页请求，参数需要包含pageSize和pageNum,返回的数据包含total总页数（当pageSize * pageNum < total时可以请求pageNum+1页的数据）。

3.2.1 下拉刷新

   （1）在pages.json文件中配置页面的enablePullDownRefresh属性为true

     (2)  在页面的onPullDownRefresh方法中清空当前的商品列表信息goodsList，重置请求参数，重新发请求获取数据（调用uni.stopPullDownRefresh关闭刷新效果）

3.2.2 上拉加载

    （1）在pages.json文件中配置页面的onReachBottomDistance属性为150

    （2）在页面的onReachBottom方法中获取下一页的数据，注意节流和判断是否超过total

3.3 tabbar数字徽标

    （1）调用uni.setTabBarBadge方法，改变索引为index的徽标内容text（必须是字符串<3）

    （2）监听商品的数量goods_count相加得到总数量total，变化则重新调用上述方法

    （3）tab上的页面都需要改变购物车的数字徽标，可将上述操作封装为mixins

3.4 搜索

3.4.1 搜索历史

    对搜索框进行防抖操作，将搜索关键词存入到历史记录列表中。

    搜索历史应按后往前的顺序，使用unshift会影响数组顺序，而渲染时直接使用索引作为key值，生成不必要的DOM节点，因此可以使用push+reverse

    搜索历史应该去重，使用new Set 和 Array.from去重。同时为了保证顺序，可以先delete再add。