本文主要介紹基於微信小程序實現電商SKU組合算法問題 ，這也是電商業務裡比較複雜的一塊內容了。下面先看下實現的效果：
SKU點擊切換效果
後臺編輯商品時，將一些規格組合禁用，如： 金色 256G 原廠延保版 是禁用狀態的。當內存選中256G，版本選中原廠延保版，那麼顏色裡 金色就會變成 虛線邊框，表示這種組合是被禁用的，點擊了 金色後就會 變成無貨狀態，不可購買。
下面來整理下實現思路，先定義一下接下來會用到的名詞：
規格名—比如：顏色、內存、版本
規格值—比如：暗夜綠色、256G、原廠延保版
SKU—唯一確定一件商品，即 { 顏色：暗夜綠色；內存：256G；版本：原廠延保版；}
後臺接口返回的數據是一個SKU的列表json字符串 skuList：
每一個SKU對象都含有 skuId，price(價格)，stocks(庫存)，properties(SKU屬性值)
我們分三步走：
1、組裝SKU數據，在界面上顯示出 所有規格選項
1.1 把所有的sku對象的 properties(SKU屬性值) 放進一個數組 allProperties
下面就是對應的結果
1.2 然後我要獲得所有的規格名 放進 數組 propKeys，獲取所有的規格名下的規格值 放進 對象 skuGroup
結果如下
1.3 有了 skuGroup對象，我們就可以在界面上渲染出
結果如下
2、默認選中一個SKU，並計算其他選項的狀態，可選或者不可選（虛線邊框）
//找到和商品價格一樣的那個SKU，作為默認選中的SKU，（後臺代碼計算商品價格時，需要把所有SKU的最低價設置成商品的價格）
並組裝好三個變量： selectedProp，selectedPropObj，selectedProperteis
然後在wxml裡就可以渲染出來，默認SKU的選中狀態和其他選項的狀態
prod.wxml部分代碼。其中有wxs方法：array_contain 和 props_contain2
number.wxs 部分代碼
3、規格選項的點擊事件，計算當前SKU的信息
最後，給出開源商城系統Mall4j 項目地址，大家可以去直接參考代碼。https://gitee.com/gz-yami/mall4j
鏈接文章
https://juejin.im/post/5dc36e986fb9a04a8a53bf33
閱讀更多 前端在路上 的文章
