項(xiàng)目決定使用微信小程序作為一個(gè)收銀端的開(kāi)發(fā)，就用到了購(gòu)物車(chē)的機(jī)制。
大致思路是：點(diǎn)擊商品，加入購(gòu)物車(chē)，購(gòu)物車(chē)概覽變化，點(diǎn)擊購(gòu)物車(chē)打開(kāi)購(gòu)物車(chē)詳情，可進(jìn)行數(shù)量與操作員的調(diào)整，物品情況無(wú)誤后，進(jìn)入結(jié)算界面。
大致的界面如：
在開(kāi)發(fā)時(shí)遇到了幾個(gè)坑：
1、在頁(yè)面內(nèi)打開(kāi)一個(gè)底部彈窗，點(diǎn)擊背景后關(guān)閉，思路與傳統(tǒng)web開(kāi)發(fā)差不多，建立一個(gè)cart_container，包含：cart_cover（背景灰色，點(diǎn)擊關(guān)閉內(nèi)容） cart_box（購(gòu)物車(chē)打開(kāi)的內(nèi)容） cart_intro（底部打開(kāi)的條，點(diǎn)擊打開(kāi)內(nèi)容）。這里在vue開(kāi)發(fā)的時(shí)候，在cart_container的class里綁定一個(gè)切換方法即可，切換cart_container的height為80rpx與100%之間切換，可在小程序里就算設(shè)置了height:80rpx與overflow：hidden，里面看不到的【內(nèi)容】還是遮住了后面的列表，所以只能在cart_cover 與 cart_box上加了wx:if 來(lái)控制其是否渲染。
2、在vue中，做列表時(shí)，可以用computed來(lái)計(jì)算數(shù)值，例如商品列表上的badge，可在小程序的時(shí)候不支持{{ get_count(goods_id) }}這樣的方式，那么只能在goods的列表數(shù)據(jù)中追加 cart_count，然后再列表輸出的時(shí)候輸出{{item.cart_count}}，加上其他業(yè)務(wù)還會(huì)修改購(gòu)物車(chē)數(shù)量，做了一個(gè)購(gòu)物車(chē)同步的方法，讀取購(gòu)物車(chē)數(shù)據(jù)，計(jì)算count，寫(xiě)回goods列表，這里在數(shù)組方面遇到一個(gè)使用技術(shù)的錯(cuò)誤在下面說(shuō)明；
3、待補(bǔ)充……
前端css的新的：多用flex布局，之前的布局方式會(huì)多多少少的不如在web開(kāi)發(fā)中方便。
另，一個(gè)數(shù)組方面的犯錯(cuò)記錄，這不算小程序的坑，在實(shí)際開(kāi)發(fā)中，決定將商品的id從數(shù)字修改為sha1后的字符串，所以在購(gòu)物車(chē)同步方法中，做的一個(gè)臨時(shí)數(shù)組：counts = []，循環(huán)購(gòu)物車(chē)數(shù)據(jù)，將 count[gds_id] = 1這樣的數(shù)據(jù)整理出來(lái)，然后再循環(huán)加入到goods列表中。之前測(cè)試的數(shù)據(jù)id都是數(shù)字，沒(méi)問(wèn)題，可遇到字符串id就出現(xiàn)了goods列表無(wú)法顯示數(shù)字的問(wèn)題，下面是解決過(guò)程：
然后換了一個(gè)方法
推薦閱讀：https://weappdev.com/t/topic/420
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。