項目決定使用微信小程序作為一個收銀端的開發(fā)，就用到了購物車的機制。

大致思路是：點擊商品，加入購物車，購物車概覽變化，點擊購物車打開購物車詳情，可進行數(shù)量與操作員的調整，物品情況無誤后，進入結算界面。

大致的界面如：

在開發(fā)時遇到了幾個坑：

1、在頁面內打開一個底部彈窗，點擊背景后關閉，思路與傳統(tǒng)web開發(fā)差不多，建立一個cart_container，包含：cart_cover（背景灰色，點擊關閉內容） cart_box（購物車打開的內容） cart_intro（底部打開的條，點擊打開內容）。這里在vue開發(fā)的時候，在cart_container的class里綁定一個切換方法即可，切換cart_container的height為80rpx與100%之間切換，可在小程序里就算設置了height:80rpx與overflow：hidden，里面看不到的【內容】還是遮住了后面的列表，所以只能在cart_cover  與 cart_box上加了wx:if 來控制其是否渲染。

2、在vue中，做列表時，可以用computed來計算數(shù)值，例如商品列表上的badge，可在小程序的時候不支持{{ get_count(goods_id) }}這樣的方式，那么只能在goods的列表數(shù)據(jù)中追加 cart_count，然后再列表輸出的時候輸出{{item.cart_count}}，加上其他業(yè)務還會修改購物車數(shù)量，做了一個購物車同步的方法，讀取購物車數(shù)據(jù)，計算count，寫回goods列表，這里在數(shù)組方面遇到一個使用技術的錯誤在下面說明；

3、待補充……

前端css的新的：多用flex布局，之前的布局方式會多多少少的不如在web開發(fā)中方便。

另，一個數(shù)組方面的犯錯記錄，這不算小程序的坑，在實際開發(fā)中，決定將商品的id從數(shù)字修改為sha1后的字符串，所以在購物車同步方法中，做的一個臨時數(shù)組：counts = []，循環(huán)購物車數(shù)據(jù)，將 count[gds_id] = 1這樣的數(shù)據(jù)整理出來，然后再循環(huán)加入到goods列表中。之前測試的數(shù)據(jù)id都是數(shù)字，沒問題，可遇到字符串id就出現(xiàn)了goods列表無法顯示數(shù)字的問題，下面是解決過程：

然后換了一個方法

推薦閱讀：https://weappdev.com/t/topic/420

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。