首页
/
每日頭條
/
科技
/
3小時實戰入門小程序雲開發
3小時實戰入門小程序雲開發
更新时间:2026-01-19 15:48:22
一、接收到的規格數組1、數據庫中的規格數組

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)1

2、接收到的規格數組

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)2

"product_sku": [ { "prod_id": "6d85a2b962c55aa90ee369061d16c305", "sku_name": "全托班", "sku_price": 4888, "sku_properties": ["餐飲:午餐 晚餐", "休息:午休", "其他:作業輔導"], "sku_stock": 16, "sku_price": 32, "_id": "b69f67c062cf7d120b0a37880f7add15" }, { "prod_id": "6d85a2b962c55aa90ee369061d16c305", "sku_default": true, "sku_name": "午托班", "sku_price": 3800, "sku_properties": ["餐飲:午餐", "休息:午休", "其他:無"], "sku_stock": 18, "sku_price": 24, "_id": "f6e08a6462cf76490c4326ad233eb96d" }

二、轉換産生3個對象,和3個數組,1個布爾值

3小時實戰入門小程序雲開發(托管小程序雲開發-052-)3

1、全部的SKU對象(包含所有的規格名和對應的屬性值集合): skuGroup

let skuGroup = {}//全部的SKU對象(包含所有的規格名和對應的屬性值集合),循環顯示的依據 /**{ * 休息:["午休"], * 餐飲:["午餐 晚餐","午餐"], * 其他:["作業輔導","無"] * }, */

2、SKU規格名數組: propKeys

let propKeys = []//SKU規格名數組, /** * ["餐飲","休息","其他"] */

3、SKU規格值(屬性)數組:allProperties

let allProperties = []//SKU規格值(屬性)數組, /** * ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] */

4、選中的SKU對象:selectedPropObj

let selectedPropObj={} //選中的SKU對象,就是獲取的sku數組的第一個sku /** * {餐飲: "午餐 晚餐", 休息: "午休", 其他: "作業輔導"} */

5、 選中的SKU值數組:selectedProp

let selectedProp = [] //選中的SKU值數組 /** * ["午餐 晚餐", "午休", "作業輔導"] */

6、選中的SKU完整數據對象(帶價格,數量): selectedSku

let selectedSku={} //選中的SKU完整數據對象(帶價格) /** * { * _id: "b69f67c062cf7d120b0a37880f7add15", * prod_id: "6d85a2b962c55aa90ee369061d16c305", * sku_name: "全托班", * sku_price: 4888, * sku_properties: Array(3), * sku_stock: 18, * sku_total: 24 * } */)

7、是否有選中的sku(布爾值):findSku

findSku: true, //是否有選中的sku

三、所需變量

data: { autoplay:true, currentSwiper:0, //當前幻燈片序号 currentTab: 0, // tab選項卡(商家詳情、規格參數) product: null, //商品詳情 //規格對應參數 skuList: [], //商品規格數組 skuGroup:{},// 全部的SKU對象(包含所有的規格名和對應的屬性值集合) propKeys:[],//SKU規格值(屬性)數組 ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] allProperties:[],// SKU規格值(屬性)數組 selectedPropObj: {}, //選中的SKU對象 selectedProp:[] ,// 選中的SKU值數組 selectedSku:{}, //選中的SKU完整數據對象(帶價格,庫存數量,總量) findSku: true, //是否有選中的sku prodNum:1, //已選擇商品數量,默認為1 skuShow: false, //是否顯示sku規格彈窗 },

四、數據初始化實現代碼1、根據skuList進行數據組裝: _groupSkuProp

/** * 根據skuList進行數據組裝 */ _groupSkuProp: function() { const skuList = this.data.skuList; //sku數組 let skuGroup = {}//全部的SKU對象(包含所有的規格名和對應的屬性值集合),循環顯示的依據 /**{ * 休息:["午休"], * 餐飲:["午餐 晚餐","午餐"], * 其他:["作業輔導","無"] * }, */ let allProperties = []//SKU規格值(屬性)數組, /** *["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] */ let propKeys = []//SKU規格名數組, /** * ["餐飲","休息","其他"] */ let selectedPropObj={} //選中的sku對象,就是獲取的sku數組的第一個sku /** * {餐飲: "午餐 晚餐", 休息: "午休", 其他: "作業輔導"} */ for (var i = 0; i < skuList.length; i ) { let properties = skuList[i].sku_properties //該sku的屬性值,是一個數組 /** * ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導"] */ allProperties.push(...properties) //ES6數組拼接 //處理屬性值數組 let propList = properties for (var j = 0; j < propList.length; j ) { let propval = propList[j].split(":"); //字符串分隔 為key,value let props = skuGroup[propval[0]]; //先取出 規格名 "餐飲" //選中的sku對象,就是sku數組的sku_default屬性為true的那個個sku,把對應的屬性值 組裝到selectedProp if (skuList[i].sku_default) { const key=propval[0] const value= propval[1] selectedPropObj[key] = value } //如果規格名數組中沒有當前規格名,将其加入規格名數組 const index=propKeys.findIndex(item=>item==propval[0]) if (index<0){ propKeys.push(propval[0]); //propKeys:SKU規格名數組 } if (props == undefined) { props = []; //還沒有,新建個新的空數組 props.push(propval[1]); //把規格的值 "午餐" 放進空數組 } else { if (!this.array_contain(props, propval[1])) { //如果數組裡面沒有"午餐" props.push(propval[1]); //把 "午餐" 放進數組 } } skuGroup[propval[0]] = props; //最後把數據 放回規格對象對應的值 } } this.setData({ skuGroup,//全部的SKU對象(包含所有的規格名和對應的屬性值集合) propKeys, //SKU規格值(屬性)數組 ["餐飲:午餐 晚餐","休息:午休","其他:作業輔導","餐飲:午餐","休息:午休","其他:無"] allProperties,// SKU規格值(屬性)數組 selectedPropObj,//選中的SKU對象 }) console.log('skuGroup=',skuGroup) console.log('propKeys=',propKeys) console.log('allProperties=',allProperties) console.log('selectedPropObj=',selectedPropObj) this._parseSelectedObjToVals(); },

2、将選中的SKU對象進行處理:_parseSelectedObjToVals1、轉換為SKU值數組:

将選中的 {key:val,key2:val2}轉換成 [val,val2]

2、并找出選中的SKU完整數據對象:

根據選中的SKU字符串,在skuList中找到SKU完整數據對象

/** * 将選中的SKU對象進行處理 * 1、轉換為SKU值數組: * 将選中的 {key:val,key2:val2}轉換成 [val,val2] * 2、并找出選中的SKU完整數據對象: * 根據選中的SKU字符串,在skuList中找到SKU完整數據對象 */ _parseSelectedObjToVals: function() { let selectedPropObj = this.data.selectedPropObj; //選中的SKU對象 let selectedProperties = "" //選中的SKU字符串,臨時變量 /** * 餐飲:午餐 晚餐;休息:午休;其他:作業輔導 */ let selectedProp = [] //選中的SKU值數組 /** * ["午餐 晚餐", "午休", "作業輔導"] */ for (var key in selectedPropObj) { selectedProp.push(selectedPropObj[key]); selectedProperties = key ":" selectedPropObj[key] ";"; } selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1); //去讀最後一個分号; console.log('selectedProp=',selectedProp) this.setData({ selectedProp: selectedProp }); //将選中的SKU字符串和skuList中的SKU進行比對,查找出選中的SKUSKU完整數據對象 let selectedSku={} //選中的SKU完整數據對象(帶價格) /** * { * _id: "b69f67c062cf7d120b0a37880f7add15", * prod_id: "6d85a2b962c55aa90ee369061d16c305", * sku_name: "全托班", * sku_price: 4888, * sku_properties: Array(3) * } */ let findSku = false; for (var i = 0; i < this.data.skuList.length; i ) { const sku_properties=this.data.skuList[i].sku_properties //sku數組轉成字符串 let sku_properties_str=sku_properties.join(";") if (sku_properties_str == selectedProperties) { findSku = true selectedSku= this.data.skuList[i] //選中的SKU完整數據對象(帶價格,數量) let product=this.data.product //修改數量,庫存和總數 product.product_stock=selectedSku.sku_stock product.product_total=selectedSku.sku_total //修改商品價格 product.product_price=selectedSku.sku_price this.setData({ selectedSku, product }); break; } } this.setData({ findSku }); console.log('selectedSku=',selectedSku) console.log('findSku=',findSku) },

3、判斷數組是否包含某對象: array_contain

/** * 判斷數組是否包含某對象 */ array_contain: function(array, obj) { for (var i = 0; i < array.length; i ) { if (array[i] == obj) return true; } return false; },

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
稀土元素有幾種
稀土元素有幾種
1.什麼是稀土元素?嚴格地說,它們和周期表上的其他元素一樣——比如碳、氫和氧——原子序數在57到71之間。另外還有兩種性質相似的稀土元素,有時也會與它們組合在一起,但主要的稀土元素就是這15種。要制作第一個,镧,從鋇原子開始,加上一個質子和...
2026-01-19
攬境530tsi四驅越野
攬境530tsi四驅越野
攬境530tsi四驅越野?對于多口之家,在選車時會更多的關注乘坐空間和舒适性,考慮到車輛的使用範圍,其實也可以選購一些中大型SUV比如,一汽大衆的旗下的旗艦SUV:攬境,其車身長寬高分别是5152mm、2002mm、1795mm,軸距達到了...
2026-01-19
别克昂科威plus功能簡介
别克昂科威plus功能簡介
文:懂車帝原創李德喆[懂車帝原創行業]懂車帝從别克品牌獲悉,從9月23日起,别克eConnect智能互聯系統将迎來新一輪升級。涉及車型包括君威及君威GS、昂科威S系列、昂科威Plus系列以及微藍7的部分車型。别克智能互聯系統啟動新一輪升級更...
2026-01-19
手機注冊2個微信号
手機注冊2個微信号
手機注冊2個微信号?首先,打開微信界面,點擊我→設置,我來為大家科普一下關于手機注冊2個微信号?以下内容希望對你有幫助!手機注冊2個微信号首先,打開微信界面,點擊我→設置。選擇第一個,賬号與安全。在選擇“更多安全設置”。接下來我們就要給自己...
2026-01-19
好聽簡單手機店名
好聽簡單手機店名
好聽簡單手機店名?博世手機店浩然手機店,現在小編就來說說關于好聽簡單手機店名?下面内容希望能幫助到你,我們來一起看看吧!好聽簡單手機店名博世手機店浩然手機店派卡手機店笏石手機店魔方手機店豪華手機店概念手機店艾尚天地手機店奮強家手機店芳草手機...
2026-01-19
Copyright 2023-2026 - www.tftnews.com All Rights Reserved