今天是愉快開發**專案的第四天了，相信如果大家跟著我能把前兩天的前端內容敲完，相信你是有比較大的收貨的。
今天的內容是完成購物車的前端**。
購物車的設計還是比較常規的ui，展示商品的資訊，提供選中按鈕，提供加減按鈕，提供結算按鈕，提供一鍵清空按鈕，並在介面底部實時展示目前的購物車已選中的商品的總價。
首先是商品的資訊卡片，依然是以flex為核心的布局方式。
class
="body"
>
class
="product"
>
bindchange
="checked"
class
="left"
>
>
checkbox
>
checkbox-group
>
src=
>
image
>
class
="middle"
>
>
蘋果text
>
>
進口紅富士，又大又甜text
>
>
￥6text
>
view
>
class
="right"
>
>
-text
>
>
1text
>
>
+text
>
view
>
view
>
view
>
page
.product
.middle
.middle :nth-child(1)
.middle :nth-last-child(2)
.middle :nth-child(3)
.product > .left
.product > image
.product > .right
.product > .right :nth-child(1)
.product > .right :nth-last-child(2)
.product > .right :nth-child(3)
基本是這樣的樣式，我們現在只是寫前端內容，所以這個選中和數量加減沒效果的。
接下來寫全部刪除按鈕和底部的內容。
class
="button"
>
清空購物車view
>
class
="bottom"
>
class
="bottom_left"
>
>
￥999text
>
view
>
class
="bottom_right"
>
去結算view
>
view
>
.button
.bottom
.bottom_left
.bottom_left > text
.bottom_right
基本的框架是這樣的，大家可以自己多做幾組資料，然後按照自己的設計完成布局，每個人都有自己的布局方式，我只是給大家提供乙個完成**的思路。
然後再強調一下，目前我們都是在完成頁面的前端內容，不涉及任何後端資料互動，所以我們寫的都是死資料，並且盡量不寫js的內容，只寫樣式。
點讚、關注、收藏都是對作者莫大的鼓勵，謝謝！
微信小程式 雲開發實戰教程
雲函式，雲儲存，雲資料庫，雲呼叫 index.js 是入口檔案，雲函式被呼叫時會執行該檔案匯出的 main 方法 const cloud require wx server sdk exports.main event,context event let sum a b return pages m...
微信小程式開發之雲開發多表關聯
首先，不知道雲開發使用的集合到底是什麼資料庫，貌似傳聞是nosql庫中的mongodb，查詢語法和mongodb也很像，由於關係型資料庫用多了，大多數情況下都在用linq，sql使用的都很少了。簡單熟悉了一下雲開發中多個集合表的關聯方式，下面舉個簡單多關聯的例子，廢話少說上 1 const resu...
微信小程式知識雲開發
乙個小程式最多5個服務類目，乙個月可以修改3次類目 小程式侵權投訴的發起與應對 軟體著作權作品登記證書 實現小程式支付功能 如何借助官方支付api簡單 高效率地實現小程式支付功能 借助小程式雲開發實現 只需要乙個簡單的雲函式 exports.main async event,context even...