SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看!

一、从思路说起

1、SKU

开始之前,需要先搞懂SKU是什么东西?指代的是什么?这个具体讲的是什么,这里面主要搞清楚两个概念,一个是规格,一个是规格值。

规格:例如 手机的外壳颜色、运存等

规格值:对外壳颜色来说,具体的规格名可以是黑色、白色。墨绿色 对于运存这个规格来说,具体的规格名可以是64GB 128GB等

SKU就是根据多个规格值来确定单个的商品可以根据运存(规格名)64GB(规格值)、颜色黑色、入网类型全网通等等规格值的组合 确定iPhone11的单个商品

2、SKU开发草稿

有时候总是头疼,当拿到一个复杂的或者是自己不熟悉的业务的时候,不知道从何下手,不知道自己能不能完成,其实是很害怕自己不能完成的,因为接触自己不熟悉的领域,知道到那一刻,脑子是一片空白的,完全是被吓住了,其实每当做完的时候,回头想想,其实也挺简单的,没有什么难以写出来的代码,这里不说算法,只是针对业务开发啊,算法是想破头,也写不出来,哈哈,所以现在很重视写代码的思路问题,这次跟着七月老师来学习,想把一些开发的思路记录下来,这次SKU开发,老师提到了一个开发草稿的知识,哈哈,可以简单的打个草稿,把页面的大概的轮廓勾勒出来,然后再细化那些细节,我觉得这种方法由外到内,由浅入深,很好啊!

(1)realm组件

首先是新建的一个realm组件,先说realm这个单词的意思,领域的意思,这里也有总控制器的意思,这里控制SKU展示以及选择,但是需要调取其他的组件来协同完成这个SKU功能

在这里组件index.wxml文件中 用view标签先大体做个结构性的骨架,其伪代码是这样的:

 1 <view class="container">
 2     <view>
 3         <image></image>
 4     </view>
 5     <block wx:for="{{}}">
 6         <s-fence></s-fence>
 7     </block>
 8     <view class="counter-container">
 9         <l-counter></l-counter>
10     </view>
11 </view>

最上面是商品的图片以及名称等信息,中间是规格名以及规格值的选择,最后是一个数量选择器,底部会是一个加入购物车和立即购买的按钮,重点来看中间规格名与规格值那部分

(2)fence组件

抽象出这个fence组件,之所以为什么叫fence,还是先看看这个fence的意思哈,这里说一下,七月老师这个命名还是很讲究的,fence有篱笆;栅栏;围栏;(障碍赛马中的)障碍物这些意思,大概理解还是栅栏比较合适,每个规格名和规格值的组合就是一个栅栏,至于多个组合,我们只需要循环出来就好了,由于这个fence组件是主要的,所以这里提取出来了两个业务的相关的JS文件,来实现复杂业务的分离,这其实也就是模型类,来梳理写代码的思路,一个是fence.js,一个是fence-group.js文件,现在也不是很熟悉这里面的到底要写哪些代码,等以后再补充一点,先看一下fence组件的骨架代码,大概的一个轮廓

1 <view class="container">
2     <view class="title"></view>
3     <view></view>
4 </view>

上面是规格名称 下面是规格值的列表,是横向排列的

(3)数据的流向问题

至于数据的流向问题,这里简单的介绍一下,数据是怎么传递的:

商品入口获取到商品的id --> 根据商品ID从服务器获取spu详情数据 --> 在detail页面中进行绑定 --> 通过realm组件属性进行数据的传递

以下4和5是 2019年12月9日10:44:57 补充...

(4)cell组件 

这个是随着开发的进行,后来重新创建的组件,这个组件就细化到最小的处理单位了,细化到一个规格值,例如金属灰、七龙珠这种用户点击的规格值了

(5)models处理类

与每个组件相对应的会抽象出一个逻辑处理类,主要就是完成逻辑代码的编写:

fence-group.js 所有规格名的类

fence.js 单一规格名下的所有规格值的类

cell.js 最小单元规格值的类

judger.js 总控制类

matrix.js 矩阵处理类

sku-code.js sku匹配路径的数据字典

3、SKU开发难点分析

(1)规格值的提取

规格值的提取这里用到了数学中的矩阵的思想来解决,用到的是二维数组来进行的矩阵转置,其实转置思想在这里就是将二维数组中单个元素的行列进行颠倒

矩阵转置:https://baike.baidu.com/item/矩阵转置/4150715

重点分析:

知道了矩阵转置,看一下接口返回的数据的结构,这里主要看的是规格值,也就是sku_list下面的specs

接口的详细介绍地址:https://course.7yue.pro/lin/sleeve/3%20API:Banner.html#spu-商品

把接口中返回的示例数据进行提取,然后进行组合成二维数组,你会发现,大概是这个样子的(后面是单个元素的下标):

1 金属灰[0,0] 七龙珠[0,1] 小号 S[0,2]  第一行
2 青芒色[1.0] 灌篮高手[1,1] 中号 M[1,2]  第二行
3 青芒色[2,0] 圣斗士[2,1] 大号 L[2,2]  第三行
4 橘黄色[3,0] 七龙珠[3,1] 小号 S[3,2]  第四行

将这个进行转置,转置之后大概是这个样子的:

1 金属灰[0,0] 青芒色[0,1]   青芒色[0,2] 橘黄色[0,3]     第一行
2 七龙珠[1,0] 灌篮高手[1,1] 圣斗士[1,2] 七龙珠[1,3]     第二行
3 小号 S[2,0] 中号 M[2,1]   大号 L[3,2] 小号 S[3,3]     第三行

这个后续还有去重复的工作:

2019年12月5日10:45:34补充,未完待续... 

(2)规格值状态的确定

这个其实是将规格值进行组合,来确定最终的一个SKU,规格值的状态是分为三种的:可选、选中(可反选的)、不可选(禁用)

这里面有一句话可以概括这个计算过程:用户每选择一次都是需要重新计算所有规格值的状态

突破点:

待确认的SKU路径
已确认的SKU路径

已存在的SKU路径需要存取的 然后从这个字典中进行匹配,这里面包含完整的SKU路径和部分的SKU路径

举例说明:

4条完整的SKU路径:
  金属灰 七龙珠 小号 S
  青芒色 灌篮高手 中号 M
  青芒色 圣斗士 大号 L
  橘黄色 七龙珠 小号 S

部分路径:
  金属灰
  七龙珠
  小号 S
  金属灰 七龙珠
  金属灰 小号 S
  七龙珠 小号 S
  。。。
  。。。

所有的路径共计28种

2019年12月9日11:01:59补充,未完待续...

12-20 00:13