09-小程序项目实战

参考：http://tubie.gitee.io/wxapp/#/home

一，搭建项目

1，创建项目

创建了一个空的项目，里面非常干净，如下：

写一点全局样式：

当前小程序使用版本，如下：

2，配置vant组件库

vant官网：https://vant-contrib.gitee.io/vant-weapp/#/home (opens new window)

在小程序中如何使用，就看文档，文档地址：

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang (opens new window)

在小程序中，如何使用vant，文档写的非常清楚，先生成一个配置文件，如下：

安装依赖，如下：

测试vant组件，在小程序中是否可以使用，代码如下：

效果如下：

到此，说明vant组件库，就配置成功了~

3，配置自定义tabbar

在app.json中，配置默认的tabbar，如下：

效果如下：

上面的配置的是系统内置的tabbar，我们可以使用vant提供的tabbar，叫自定义tabbar。如何使用自定义tabbar呢？

首先，在tabbar中配置custom:true，如下：

此时，系统内置的tabbar，就没有了，如下：

创建一个组件（一定是一个组件），就是自定义的tabbar，如下：

使用vant中的tabbar，如下：

如果没有样式，你就清一下缓存。重新编译。

把tabbar用的数据，提供出来，如下：

html文件中就可以使用之，如下：

给上面的item绑定change事件，如下 ：

实现对应的方法：

使用active这个状态，如下：

现在我们要生成其它tabbar选项，准备数据如下：

在app.json的tabbar中也需要做配置，如下：

把对应的页面，也需要创建出来，如下：

效果如下：

点击样式，可以切换，但是页面不能切换。先去配置一下样式的颜色，如下：

实现切换页面效果：

测试，页面可以实现跳转，如下：

还有一个小问题，当点击切换时，active就有问题，在每一个页面显示的时候，从新给active赋值，如下：

测试，OK，如下：

4，配置less

参考连接： https://blog.csdn.net/m0_58959716/article/details/124274149 (opens new window)

第一步：vscode下载插件Easy-Less插件，找到插件所在位置复制（正常路径为：C:\Users\用户名.vscode\extensions），找不到可以全局搜索“easy-less”，如下：

大家不需要找，我只需要把这个插件，发给大家就OK了。

第二步：复制到微信开发者工具的插件文件夹中，路径一般如下：

C:\用户\用户名\AppData\Local\微信开发者工具\User Data\1a695ca2de1a85735f93a43fb366c83f\Default\Editor\User\extensions

重启维信开发者工具。只有只有重新后，才会加载那个插件。

第三步：微信开发者工具菜单栏点击设置-编辑器设置，然后点击打开页面底部更多编辑器设置

测试之如下：

看home.wxss中有没有生成代码，如下：

二，搜索框与轮播图

1，请求二次封装与API接口

对于wx.reqeust的二次封装，我就不做了，你可以自己去封装，也可以去找别人封装好的。如下：

api.js中放了API接口的地址，如下：

小程序只支持https，并且需要在后台配置，开时发，就不去校验域名的合法性，如下：

到此，就可以发http请求。

2，实现搜索框

效果如下：

上面的输入框是一个假的输入框 。就是一个按钮，点击就跳转到另一个页面了。

使用之，如下:

在全局添加一个背景颜色，如下：

3，实现轮播图

轮播图直接使用小程序中的组件，对应的文档，如下：

https://developers.weixin.qq.com/miniprogram/dev/framework/ (opens new window)

发送ajax，得到数据，然后再去渲染轮播图，发请求，如下：

渲染轮播图：

给轮播图添加一些样式，如下：

三，实现popup页面相关功能

1，配置popup页面

点击首页面上的假的搜索框，去到popup页面，配置一下，如下：

点击首页面的假搜索框，去popup页面，代码如下：

实现上面的gotoPopup方法，如下：

测试如下：

2，绘制popup页面

由于每一次编译，都需要点击进行跳转，添加一个编译模式，如下：

这样，每一次编译，直接编译了popup页面。不需要点击跳转。

先绘制一个搜索框，如下：

在页面中使用之，如下：

在JS文件中，实现对应的方法，如下：

3，创建popup页面的三个组件

经过分析，在popup页面，有三个组件：

• 历史记录与热门搜索 HistoryHot
• 提示列表 TipsList
• 商品列表 ProductList

创建对应的三个组件，如下：

你刚才创建的是页面，现在个修改成组件，默认最外层是一个Page函数，修改成Components函数，如下：

最好在json文件中，修改如下：

在popup页面中，使用上面的三个组件，如下：

按上面的写法，三个组件都显示出来了，按理说，只需要显示其中某一个组件，定义一个状态，控制显示哪一个组件，如下：

使用之，如下：

4，完成历史记录和热门搜索的结构和样式

使用到了vant中如下两个组件：

开始写结构，如下：

样式，我们写在less文件中，所以我们需要创建一个less文件，对应的样式，如下：

同理，下面的热门搜索和上面的历史记录是一样的，copy代码，如下：

5，完成搜索页的数据渲染

在父中发请求，获取数据，传递给子，组件结构如下：

导入接口，准备三个容器，如下：

在onload钩子中，发请求，如下：

给搜索框中赋默认值，数据在deaultKeyword中的keyword属性中，如下：

代码如下：

渲染历史记录与热门搜索数据，需要父传子，如下：

在子中接收数据，如下：

在html文件，渲染历史记录，如下：

再去渲染热门搜索，如下：

6，清空历史记录

给垃圾桶绑定点击事件，如下：

给父身上绑定自定义事件，如下：

在JS文件中，实现上面的方法，需要触发父中的方法，如下：

当clearHistory事件触发了，就会让父中的clearHistory触发，如下：

在这个方法中，实现清空历史记录的功能，如下：

测试OK。

7，点击热门搜索或历史记录标签去产品列表（子传父）

当我们点击热门搜索标签时，需要去商品列表页面，还需要把你点击的标签中的数据，传递到商品列表页面。

分析如下：

分析：需要先把tag中的数据传递给父，就是子传父，再把数据传递给子，就是父传子。

给tag绑定点击事件，如下：

实现对应的方法，如下：

使用自定义属性，得到点击的标签中的数据，如下：

在方法，得到点击的那个数据，如下：

触发自定义事件，把数据传递过去，如下：

在父的身上绑定自定义事件，如下：

实现changeBlockShow，如下：

数据在detail中。得到数据，就可以让商品列表显示出来，如下：

测试看一下，商品列表是否显示OK？

测试OK。

在父也可以得到子传递过来的关键字，如下：

到此，我们就实例了子传父，并且显示出了商品列表组件。

同理，我们点击历史记录，也是一样的，代码如下：

点击历史记录，测试如下：

8，根据传递过来的关键字，获取商品数据

直接上代码，如下：

调接口，获取数据，如下：

测试看一下，数据有没有回来，如下：

现在，数据就回来了。到此，你要知道，在父中保存了商品列表的数据。

9，绘制商品列表页中的下拉菜单

实现目标：

使用vant提供下拉菜单，如下：

准备下拉菜单所用到的数据，直接在vant中copy，如下：

在HTML文件中，使用之，如下：

10，父传子，绘制商品列表组件

准备容器，接收子传递过来的数据，如下：

给goodsList赋值，如下：

查看goodsList有没有数据，如下：

父有数据了，传递给子，代码如下：

子中接收之，并查看，如下：

接下来，把商品列表再封装成一个组件。如下：

设置成组件，如下：

使用上面的组件，如下：

现在我们的组件结构是这样的，如下：

把商品列表数据再传递一次，传递到GoodsList组件中，如下：

在GoodsList中，接收之，如下：

测试，到底有没有数据，如下：

有了数据，就可以写结构和样式，渲染数据。结构如下：

把样式写在less中，实现对应的样式，如下：

对价格进行处理，处理我们使用到wxs，类似于JS，使用wxs实现vue听过滤器，对价格进行处理。如下：

在组件中就可以使用之，如下：

11，处理下拉菜单分类数据

现在我们的下拉菜单如下：

数据还都是一些假的数据，我们之前调用过一个接口，那个接口中，包含下拉菜单对应的数据，如下：

解构出这个数据，如下：

现在我们看一下下拉菜单需要的数据结构是什么的？如下：

经过对比，后面响应回来的数据，并不是我们需要的，我们就需要整理数据格式，如下：

代码如下：

定义一个状态，把数据保存一下，如下：

在调度器中，查看如下：

然后，父传子，把数据传递给子，如下：

子接收数据，并使用之，如下：

使用之，如下：

上面下拉菜单的数据渲染，还有一个问题，默认没有选中其中的一项，如下：

我们再次分析，后端给我们的数据，如下：

发现，它是有一个checked选项，如果checked是true的话，表示默认选中这一项。

定义一个状态，表示选中的那一项。如下：

在AppData中测试如下：

使用上面的filterCategoryCurrentID这个数据，父传子，如下：

子接收之，如下：

子使用之，如下：

测试之，如下：

再去补充一个小知识点，需求如下：

看一下输入框中显示数据取决于什么，实现如下：

12，搜索框实现搜索功能

在搜索框中输入内容，按回车，也需要显示商品列表，如下：

输入了数据，按了回车，触发了search事件，找到对应的方法，获取输入框中输入的数据，如下：

到目前为止，点击历史记录或热门搜索或在输入框中输入关键字，都可以跳到商品列表页面。

13，点击下拉菜单不同选项，发送ajax请求，获取数据（子传父）

点击不同的选项，可以得到不同的分类ID：

给选项上绑定change事件，如下：

实现cateChange方法，如下：

把分类ID传递给父，通过自定义事件，如下：

在父上绑定这个自定义事件，如下：

实现对应的方法，如下：

查看父是否可以得到这个ID：

到此，子就把分类的ID传给父，父得到子传递过来的分类ID，有了个分类ID，就可以发ajax请求，获取数据了。

调接口，获取数据，还需要其它的参数，准备其它的参数，如下：

现在就关注分类ID，就OK，其它参数使用默认值。

现在调用获取商品列表的数据，需要传递一堆的参数，如下：

现在在控制台，看一下，发送请求时，参数有没有带过去，如下：

现在，点击不同的分类，重新去调用接口，如下：

在network中，测试如下：

当点击了居家分类，重新去调用接口，此时分类ID就变了。按理说，获取到的数据应该是不一样的。实际测试全部中的数据和居家中的数据是一样的。

14，价格排序

准备数据如下：

使用数据，并且绑定chagne事件，如下：

实现对应的方法，如下：

把数据传递给父，如下：

父绑定fn2自定义事件，如下：

实现priceChange方法，如下：

在控制台测试之，如下：

测试，发现小问题，如下：

修改如下代码：

再次测试之，如下：

15，搜索框输入提示组件

需求：

输入时，会触发chagne事件，绑定chang事件，如下：

实现对应的方法，如下：

然后，发送ajax请求，获取数据，如下（下图中，少了一个await：）：

测试之（下图中，少了一个await：）：

保存数据，如下：

把数据保存到容器，如下（下图中，少了一个await：）：

在控制台中查看一下，如下：

改正一个错误，加上await，如下：

完成tips布局：

使用之，如下：

父传子，把数据传递给组件，如下：

子中接收之，如下：

子中使用之，如下：

实现没有更多数据，如下：

16，输入框做防抖处理

我们用一副图来理解一下它的过程：

• 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；

• 当事件密集触发时，函数的触发会被频繁的推迟；

• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

防抖的应用场景很多：

• 输入框中频繁的输入内容，搜索或者提交信息；

• 频繁的点击按钮，触发某个事件；

• 监听浏览器滚动事件，完成某些特定操作；

• 用户缩放浏览器的resize事件；

对输入框做防抖操作，代码如下：

17，实现点击提示单元格

需求：

给每一个单元素格绑定点击事件并传参，如下：

实现上面的方法，如下：

还需要在父上绑定fn自定义事件，如下：

测试，完美。

18，实现空组件

当我们搜索一此数据时，没有时，如下：

此时，我们可以实现一个空组件，如下：

使用之，如下：

四，用户模块实现

1，顶部实现

添加一个编译模式，如下：

导入对应的组件：

准备默认图片，把到aassets中，如下：

在data中，引入并使用之，如下：

实现对应的结构，如下：

书写对应的样式，如下：

2，九宫格布局

引用对应的组件：

准备对应的数据：

iconArr: [{
      icon: "label-o",
      text: "我的订单"
    },
    {
      icon: "bill-o",
      text: "优惠劵"
    },
    {
      icon: "goods-collect-o",
      text: "礼品卡"
    },
    {
      icon: "location-o",
      text: "我的收藏"
    },
    {
      icon: "flag-o",
      text: "我的足迹"
    },
    {
      icon: "contact",
      text: "会员福利"
    },
    {
      icon: "aim",
      text: "地址管理"
    },
    {
      icon: "warn-o",
      text: "账号安全"
    },
    {
      icon: "service-o",
      text: "联系客服"
    },
    {
      icon: "question-o",
      text: "帮助中心"
    },
    {
      icon: "smile-comment-o",
      text: "意见反馈"
    },
  ],

实现对应的结构，如下：

3，弹出层实现

引用对应的组件：

在页面中，使用弹出层组件，如下：

定义一个状态以及方法，控制弹出层显示与隐藏，如下：

在html文件中，使用这个状态，如下：

当点击下面的登录时，就需要显示弹出层，如下：

实现上面的gotoLogin，如下：

现在有一个问题，弹出层，没有盖住下面的tabbar，需要盖住下面的tabbar，如下：

先尝试改一下这两个组件的层叠性，如下：

效果如下：

4，登录表单的绘制

需求如下：

引入vant中对应的组件，如下：

在JS文件，先定义状态：

绘制HTML结构，如下（下面的密码选项的value和error-message写错了）：

改一点结构，添加一个DIV，并写书写样式，如下（下面的密码选项的value和error-message写错了）：

在输入用户名和密码时，对用户名和密码进行校验，给输入框绑定input事件，如下（下面的密码选项的value和error-message写错了）：

实现对应的方法，如下：

如果确实输入了用户名和密码，看一下，数据有没有收集到，如下：

当点击登录，如下：

实现goToLogin方法，如下：

到此，登录表单就绘制完毕了，并带有校验功能。

5，实现登录功能

导入登录接口，如下：

发送登录请求，如下：

不要忘记添加async，如下：

看一下，服务器响应的结果，如下：

我们需要做什么？逻辑如下：

第三件事和第四件事，先不着急做，在data中定义一个状态，叫isLogin，表示是否登录，如下：

第三件事和第四件事如下：

测试一把，如下 ：

头像信息没有显示，原因是后端响应的默念头像图片失效了。所以我们就不管了。

现在明明登录了，如果再去点击编译，效果如下：

登录了，用户名和头像就要从本地获取了，如下：

测试之，如下：

默认isLogin是fase，表示没有登录，如果登录了，isLogin是需要有值，把token的值，给isLogin。如下：

把本地数据删除一下，删完，就相当于没有登录，如下：

登录之，如下：

还有一个问题，已经登录了，再次尝试点击用户，如下：

如果登录成功了，不需要弹出登录框，如下：

测试OK。

6，退出登录

需求：

引用vant中的一个组件，如下：

使用这个组件，如下：

定义出上面的那个状态和两个方法，如下：

给小箭头添加一个点击事件，如下：

实现上面的gotoLogout方法，如下：

现在有一问题，如果没有登录，那这个dialog是不能弹出。没有登录，不存在退出登录，所以我们需要判断，如下：

现在尝试登录一把，如下：

当点击确认，实现退出登录，不需要调用接口，直接把token和userinfo清空就OK了，如下：

7，导航守卫

在没有登录的情况下，不能进入购物车的，实现守卫，实现守卫的代码需要写在自定义tabbar中，如下 ：

实现守卫，如下：

测试OK。

五，详情页实现

1，点击跳转到详情页面

添加详情页面，如下：

在商品列表组件中，绑定点击事件，并传递ID，如下：

实现对应的方法，并且获取ID，如下：

在详情页面，获取ID，如下：

2，获取详情页面数据

引入API，如下：

发起ajax请求，获取数据，如下：

3，详情页面结构和样式替换

详情页面的结构和样式，我都写好，我们直接copy了。我准备了两个压缩包，如下：

解压之，如下：

使用上面的detail把我们代码中的detaili赋盖掉，如下：

修改details.js中的代码如下：

效果如下：

4，相关产品数据渲染

引用接口，如下：

准备对应的状态：

发送ajax请求，获取数据，如下：

查看数据，如下：

添加编译模式，如下：

实现HTML结构，如下：

5，商品导航

采用vant weapp中的GoodsAction商品导航组件:

https://vant-contrib.gitee.io/vant-weapp/#/goods-action

引入对应的JSON文件，如下：

使用组件如下：

把详情页面，拖到最后面，如下：

修改详情页，对应的样式，如下：

点击收藏切换样式，定义一个状态，如下：

定义一个方法，改变上面的状态，如下：

再定义一个样式，如下：

在HTML文件，使用之如下：

6，购物车的弹出层

需求：

引用对应的组件，如下：

准备一个状态，控制弹出层是否显示，如下：

再定义两个方法，控制弹出层是否显示，如下：

在HTML中，使用之，如下：

默认肯定是不显示的，所以默认值还改成false，如下：

给加入购物车绑定点击整个的，如下：

实现上面的方法，如下：

测试之，如下：

但是它把商品导航覆盖掉了，写一点样式，如下：

除上上面点击加入购物车，需要弹出弹出层之外，详情页面上，还有一个选择规格，点击时，也需要弹出弹出层，如下：

到此，弹出层的绘制就OK了。

7，弹出层的结构和样式实现

需求：

实现对应的HTML结构，如下：

实现对应的样式，如下：

引入对应的计数器组件，如下：

效果如下：

实现上面+1或-1方法，如下：

8，点击购物车去购物车

需求：

给对应的按钮绑定点击事件，如下：

实现上面的方法，如下：

之前我们实现的导航守卫是对TabBar的导航守卫。只有点击Tabbar时，才能实现守卫，先看一下，有没有登录，如下：

没有登录，我们之前是做过路由的守卫，下面的守卫的代码，只能点击tabbar时，才能守卫到，如下：

看一下本地，如下：

现在我们点击tabbar测试一下，如下：

现在不一样，我们是在详情页面中点击去购物车，此时我们还需要在详情页面中实现守卫，如下：

测试守卫是否OK，如下：

1S后，就返回到了登录页，如下：

9，登录成功后，返回上一页面

现在有这样一个问题，我们点击详情页中的购物车，如果没有登录，跳到登录页，现在如果我开始登录，关键是登录完后，跳到什么地方，我们是从详情页点击购物车，由于没有登录，跳到登录页，如下：

现在点击登录，登录成功后，我们去哪了？看代码：

测试如下：

我们是从详情页面，跑到了登录页，登录成功后，还是想回到详情页面，也就是回到上一页面。在app.js中定义一个上一页的路径，如下：

在详情页，去购物时，就需要把这个详情页路径，存储起来，如下：

登录成功后，我们就需要从全局中获取上面的保存的路径，跳到上面的路径对应的页面，如下：

测试一下，如下：

跳转时，并没有传递ID，如下：

10，返回上一页面时，带ID

把ID也存储在全局中，如下：

在详情页面中，存储ID，如下：

返回上一页时，也需要把ID传过去，如下：

测试，如下：

11，并不是每一次都需要返回上一页

现在我们不去详情，重新编译，直接登录之，如下：

并不是每一次都需要返回上一页面，定义一个状态，来表示是否需要返回上一页，如下：

在详情页面中，需要把这个状态，设置成true，如下：

登录成功后，就可以做判断，如下：

测试，OK。

12，封装成一个返回上一页的工具函数

刚才在点击详情页的购物车时，需要鉴权，写了很多代码，如果其它地方，也需要鉴权，还需要写一遍，可以把鉴权的代码封装一个函数，如下：

在详情页面中使用之，如下：

测试，OK。

封装过，点击收藏也是一样的，如下：

测试OK。

13，返回上一页内容补充

现在我们没登录，我们不去点击详情页面中的购物车，点击tabbar中的购物车，如下：

因为，我们之前，在自定义tabbar中也是实现了守卫，如下：

现在我们点击tabbar中的购物车，提示需要登录，去登录，登录完后，要去购物车，也就是说，此时的上一页并不是详情页面，此时的上一页指的是购物车页，如下：

测试之，登录 成功了，但是没有跳到购物车，也报错了，如下：

分析之，利用navigateTo是去不到购物车页面，如下：

再定义一个全局的状态，表示是否是tabbar页面，如下：

在tabbar页面，给这个状态赋值，如下：

登录成功后，再一次判断，如下：

测试，OK。

14，添加购物车逻辑

点击购物车中的+1需要把此商品添加到购物车，导入接口，如下：

定义一个状态，获取当前购物车中某个商品的数量，如下：

点击加1或-1时，就需要给这个状态赋值，如下：

添加商品到购物车，需要使用这个数量，如下：

代码如下：

结果如下：

然后，提示不回购物车成功。如下：

测试之，如下：

15，添加购物车时，显示数量

需求：

定义一个状态，表示购物车中商品的数量，如下：

调用完毕后，就需要给上面的状态赋值，如下：

看一下，有没有数据，如下：

然后，就可以给购物车添加一个小图标，如下：

如果这样，购物车的数量还是0，我们需要调用一个接口，获取数量，如下：

发起ajax请求，获取数量，如下：

16，解决一个小bug

为了防止页面闪一下，登录成功后，添加一个定时器，如下：

六，首页面其它内容渲染（自学）

1，分类数据渲染

需求：

之前，我们获取首页面的数据只用到了轮播图的接口，实际上还有很多数据，如下：

我们定义一个chanel状态，并给它赋值，如下：

查看之，如下：

引用对应的组件，如下：

对应的HTML结构如下：

效果如下：

2，品牌机制商实现

对应对应的状态，并赋值，如下：

查看数据，如下：

对应的HTML如下：

书写对应的样式如下：

3，周一到周四实现

定义状态，并赋值，如下：

查看数据，如下：

HTML渲染数据，如下：

4，人气推荐

定义状态并赋值，如下：

查看数据，如下：

渲染数据，如下：

5，专题推荐

定义状态并赋值，如下：

查看数据，如下：

HTML渲染数据，如下：

效果如下：

对应的样式，如下：

6，居家实现

定义对应数据，并赋值，如下：

查看数据如下：

渲染数据，如下：

7，根据效果图，实现点击去详情和回到顶部

• 自行实现

七，专题页数据渲染（自学）

1，专题页数据渲染

引入对应的组件，如下：

添加接口，如下：

定义状态，获取对应的数据，如下：

渲染数据如下：

样式，如下：

2，专题页的分页

• 分析专题页的分类实现

八，分类页面数据渲染（自学）

1，分类页面数据渲染

引用接口，如下：

copy type组件到components下面，如下：

引用对应的组件，如下：

定义数据，发ajax请求，实现对应方法（自行学习），如下：

渲染数据，如下：

九，点击首页小分类模块进入二级分类（自学）

1，实现二级分类模块

点击如下小分类模块：

绑定事件，如下：

实现上面的方法，如下：

创建对应的type页面，如下：

点击测试是否可以跳转成功，如下：

二级分类接口如下：

在type.js中引入接口，并使用之，逻辑全部实现，自行学习，如下：

引用需要使用的组件，如下：

HTML结构如下：

对应的样式，如下：

效果如下：

十，购物车模块实现

1，购物车数据的渲染

需求：

添加一个编译模式，如下：

先发送ajax请求，获取购物车中的数据，封装对应的API接口，如下：

准备两个状态，如下：

发送ajax请求，获取数据，给上面的状态赋值，如下：

此到，购物车数据就回来了，看一下，vant提供了一些组件，关于购物的，我去看一下这些组件，如下：

上面的是我们在购物车中，需要使用到的组件。在代码中引入，如下：

在HTML中，把数据渲染出来，如果购物车中没有数据，需要渲染出一个空组件，空组件可能显示也可能不显示，定义一个状态控制空组件是否显示，如下：

发送ajax获取到购物车中的数据后，需要让空组件隐藏掉，如下：

渲染空组件和购物车列表数据，如下：

通过上面的状态控制购物车是否显示，如下：

把购物车中的数据显示出来，如下：

上面的结构和样式，可能看不清，下面是一张大图：

2，绘制提交订单模块

需求：

找到vant中对应的组件，如下：

3，切换某个商品的状态

在切换商品的状态时，也需要调用接口，准备API接口，如下：

在购物车JS文件中，引入上面的接口，如下：

给每一个商品的复选框绑定change事件，如下：

实现上面的对应的方法，如下：

现在我们考虑一个问题，如下：

所以我们需要定义一个状态，表示这个全选按钮是否选中，如下：

然后，再去实现上面的方法，再分析那个接口，如下：

需要就考虑传参，如下：

获取对应的参数，如下：

测试发送ajax请求，如下：

看一下，第1个商品的数据，如下：

重新给购物车数据赋值，如下：

当我们所有商品都选中了，还需要让全选按钮选中，如下：

在全选按钮上，使用上面的状态，如下：

还在有一问题，不去点击商品前面的复选框，测试，如下：

所以一上来，就需要判断全选按钮是否需要选中，如下：

到此，切换某个商品的状态，就OK了。

4，全选或取消全选实现

需求：

给全选复选框绑定点击事件，如下：

实现上面的方法，如下：

5，加1减1实现

需求：

定义几个状态如下：

使用上面的三个状态，如下：

给编辑和完成按钮绑定点击事件，如下：

实现上面的方法，如下：

点击完成，又回到了之前的状态。

点击了编辑，步进器就出来了，我们就可以加1或减1，给步进器绑定change事件，如下：

点击+1或-1，也是需要调用接口的，接口如下：

在JS文件中，引入上面的接口，如下：

我们调用接口时，需要传递很多的参数，如下：

实现方法，如下：

测试OK，但是有一个小bug，就是添加1件商品时，默认数量是0。

6，删除实现

需求：

对应的API接口，如下：

给删除按钮绑定点击事件，如下：

实现对应的方法，可以得到对应的删除的ID，如下：

导入接口，调用接口，实现删除，如下：