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