本文主要介绍基于微信小程序实现电商SKU组合算法问题 ，这也是电商业务里比较复杂的一块内容了。下面先看下实现的效果：git
SKU点击切换效果算法
后台编辑商品时，将一些规格组合禁用，如： 金色 256G 原厂延保版 是禁用状态的。当内存选中256G，版本选中原厂延保版，那么颜色里 金色就会变成 虚线边框，表示这种组合是被禁用的，点击了 金色后就会 变成无货状态，不可购买。json
下面来整理下实现思路，先定义一下接下来会用到的名词：小程序
规格名—好比：颜色、内存、版本微信小程序
规格值—好比：暗夜绿色、256G、原厂延保版数组
SKU—惟一肯定一件商品，即 { 颜色：暗夜绿色；内存：256G；版本：原厂延保版；}微信
后台接口返回的数据是一个SKU的列表json字符串 skuList：xml
每个SKU对象都含有 skuId，price(价格)，stocks(库存)，properties(SKU属性值)对象
咱们分三步走：接口
一、组装SKU数据，在界面上显示出 全部规格选项
1.1 把全部的sku对象的 properties(SKU属性值) 放进一个数组 allProperties
1.2 而后我要得到全部的规格名 放进 数组 propKeys，获取全部的规格名下的规格值 放进 对象 skuGroup
1.3 有了 skuGroup对象，咱们就能够在界面上渲染出
二、默认选中一个SKU，并计算其余选项的状态，可选或者不可选（虚线边框）
//找到和商品价格同样的那个SKU，做为默认选中的SKU，（后台代码计算商品价格时，须要把全部SKU的最低价设置成商品的价格）
并组装好三个变量： selectedProp，selectedPropObj，selectedProperteis
而后在wxml里就能够渲染出来，默认SKU的选中状态和其余选项的状态
prod.wxml部分代码
其中有wxs方法：array_contain 和 props_contain2
number.wxs 部分代码
三、规格选项的点击事件，计算当前SKU的信息
总结：只要是作电商的小伙伴都会遇到SKU的规格选择问题吧，但愿本文对大家有所帮助。想要看详细代码的同窗能够去看咱们的开源商城系统源码。
开源商城系统Mall4j 项目地址：https://gitee.com/gz-yami/mall4j