首页
/
每日頭條
/
科技
/
3小時實戰入門小程序雲開發
3小時實戰入門小程序雲開發
更新时间:2026-06-09 18:20:57
一、接收到的規格數組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
推荐阅读
廉價電熱毯多為化纖物 無阻燃成分存安全隐患
廉價電熱毯多為化纖物 無阻燃成分存安全隐患
據山東廣播電視台電視生活頻道《生活幫》報道,近期節目中播出了廉價電熱毯存在嚴重的質量問題,使用起來有很大的隐患,那麼在日常的使用中,這些電熱毯到底會帶來哪些危害,記者專門找專家來給大家做個實驗,看看這些廉價電熱毯經不經的住考驗。在記者前期調查中,很多市民都向記者反映,他們在使用電熱毯的時候遇到過着火...
2026-06-09
電水壺怎麼使用
電水壺怎麼使用
泡咖啡、泡茶、泡面、喝剛燒好的新鮮開水,這些都是現代都市人的生活習慣。快速電水壺能在最短的時間内提供沸水,這正好與現代人的生活節奏合拍。【1】應将電水壺放置于耐熱的台面上或地上使用。如果在木質台面或地面上使用,應墊一層耐熱的物品,或注意其使用時間不要過長。【2】注水要超過電熱管,但不要太滿;電源線插...
2026-06-09
家用空調維護知識
家用空調維護知識
1、在空調進、出風口能否能放置雜物?為使室内外機組的進風口和出風口保持暢通無阻,請不要在空調進、出風口放置任何雜物。2、能用水沖洗空調室内機嗎?請不要把水直接潑在室内機上,以免造成機器的損壞。3、能否将油漆或殺蟲劑直接噴塗在空調表面上?為避免造成機器的損壞、危及您的人身安全,請不要将任何油漆或殺蟲劑...
2026-06-09
電水壺使用三大注意事項
電水壺使用三大注意事項
電水壺使用時應注意以下三點:注入壺内液體至少高于發熱器表面幾毫米,經常清除壺中水垢,以及時常檢查膠木插座周圍有無壺水滲漏現象。以下内容由作文庫知識百科整理,供您參考。【1】注入壺内的液體至少應高于發熱器最高表面幾毫米,但不能超過規定的最高水位線;使用時必須先裝水,後通電,切忌先通電,後裝水;切勿用電...
2026-06-09
家用豆漿機如何使用?
家用豆漿機如何使用?
家用豆漿機如何使用?家用豆漿機如何使用?1、在制作豆漿時根據自己的需要取出适量的食材同時根據量杯和機型來确定取材的多少。在制作豆漿時需要将準備好的黃豆用水充分的浸泡。2、将準備好的食材清洗過後放入量杯中,同時将水加到上下水位之間。3、将豆漿機的五谷精磨器按照豆漿機的使用說明書指示的方向安裝好,使得五...
2026-06-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved