用微信小程序做一個小電商 sku

效果展示圖

 

 

 

 

功能點概述

1. 圖一功能點有
   1. 搜索
   2. 輪播圖
   3. 商品展示
   4. 圖二功能點
      1. 導航欄
      2. 加入購物車
      3. 圖四功能點
         1. 評論點
         2. 圖五購物車
            1. 復選框 ( 全選全不選 )
            2. 即點即改
            3. 總計結算

 

功能詳解

 

1.A（搜索）

使用微信小程序自帶函數bindinput實現

在每次輸入一個字符的時候就會觸發這個函數也就是，每次input框中的值發送改變都會觸發bindinput綁定的事件

圖示：

Wxml端

 

Js端

 

獲取到值之后就可以放到接口中進行查詢然后查詢結果直接循環到頁面中使用

1.B（輪播圖）

網址 :  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

輪播圖主要使用的是swiper標簽進行循環

 

如圖示設置屬性進行輪播

代碼如下：

Wxml端

 

Js端

 

1.C（商品展示）

寫一個width為49%的盒子用一個循環包裹 將數據的位置排版好 然后用

<block wx:for=”{{GoodsArr}}”>

你寫的盒子

</block>

循環出來大概就是這個樣子的

 

 

 

2.A（導航欄）

思路：

首先在js端設置一個數組 然后直接將數組放到四個並排的div上並設置點擊事件並綁定參數nav.id

點擊之后根據它的id 用this.setData 直接修改對應id的樣式名這樣樣式就做好了

然后我們在樣式切換后要跳轉到對應的頁面

就使用scroll-view 下的scroll-into-view={{某個盒子的id}}屬性就會跳轉對應id的盒子的開頭處

 

 

1. b（添加購物車）

這個也沒什么難度

主要是聯查獲取用戶的唯一標識和商品的唯一標識和購買的數量我寫死了設置為1然后調取接口入庫就ok

3.A（評論）

這個沒什么難度。。。。。。。。

主要就是在頁面中獲取到用戶的唯一標識和商品的唯一標識和你的評論內容（上面1.A中有獲取input框中value的辦法）

4.A(復選框)

使用

<checkbox-group bindchange="checkboxChange">

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

</checkbox-group>

這樣寫之后

每次點擊其中一個盒子他就會獲取你checkbox中的value值 你可以設置為你需要的值進行獲取並且存放

checkboxChange:function(e){

e.detail.value->為一個數組 [1,5,9]

}

之后獲取到你要的值之后就可以自由發揮了

4.B即點即改

思路：

點擊之后在把數組中對應的值setData就ok

意味點擊之后 觸發事件 調取接口 成功后 在前台 修改值

上代碼

 

4.c（總計結算）

使用4.A獲取到購物車的id之后立即調取接口進行計算並返回前台（直接setData）對應的值