用微信小程序做一个小电商 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）对应的值