微搭问答004-购物车如何实现汇总的功能
迪丽瓦拉
2025-05-29 02:27:27
0

在电商小程序中,我们通常给用户一个购物车的功能,可以自主的将商品加入购物车。因为所购商品有单价和数量,我们需要计算一个小计。

规则是小计=单价*数量

计算完小计后需要根据所购商品的小计的金额进行一下求和,计算出总的价格。

要想实现购物车功能,我们考虑了两种方案,一种是将商品加入到小程序缓存,然后通过缓存来操作。另外一种方案是建立数据源,每次用户选择商品时加入到数据源里计算结果。

一位粉丝根据专栏电商小程序

开发时遇到了不少问题,以下是我们的沟通过程以及问题定位的过程

抽空帮看一下 设置完求和金额显示0
看代码是否哪块写错了,
给指导一下,谢谢

在这里插入图片描述
这里的字段我们需要注意的是首先需要有一个openid的字段,这是一个数据权限的字段,用来标识数据是属于谁的

另外一个是商品小计的字段,现在类型选择了计算公式。计算公式会根据你自己的算法自动的进行计算

用的啥表达式?

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们在课程里讲了要通过API来计算购物车的合计金额,然后通过变量来调取API的计算结果,将结果绑定到组件上进行显示

现在问题的表现是合计金额是0,不知道哪里出了问题。一般初学者遇到的最大障碍就是不知道该如何调试程序,发现没有获得预期的效果就觉得无从下手了。

一般调试分为后端调试和前端调试,首先要判断后端是否正常返回结果了,因此我让他通过API的方法测试看是否可以返回正常结果

在这里插入图片描述
看返回结果是0,从截图上看,首先就是提交参数那,没有给正确的参数

{"openid":"这里是示例"
}

默认参数的值是这里是示例,你自己在做测试的时候,要传入实际的值,按默认值肯定是查不到数据的

再一个就是检查代码,看参数是否正确传入了

在这里插入图片描述
我们在构造入参的时候,左边是参数名,右边是参数值,这个要符合json对象格式的语法

这里构造了一个查询条件,字面意思是openid= 实际的值

这里有一个语法叫字符串字面值,一般用双引号包裹起来就构成了一个字符串字面值,那你实际的查询效果变成了

openid = params.openid这样肯定就查不出内容来了,实际我们是要把入参求值之后在作为查询条件,因此将代码改为

{"key":"openid","rel":"eq","val":params.openid
}

改了之后发现还是返回不了值,这个时候就需要检测一下你的数据
在这里插入图片描述
这里商品单价有两行明显是有问题的,出现这种问题说明是在数据录入的时候质量不太好,究其原因是我们的校验做的不好,让脏数据入库了。

在实际项目里,你不能认为用户就会按照既定的规则去录入数据,要么是疏忽,要么是故意录入,因此字段类型校验是必要的。

另外的问题是openid有几条数据是空的,这种情况一般是你通过PC端录入时会出现。因为在H5的环境下是获取不到openid的,需要你将程序发布成小程序进行测试

在这里插入图片描述
将代码修改好,参数也传对之后API是可以正常返回了

后端正确返回之后,发现金额还是0,那就需要排查前端了,我们是通过变量定义去获取API,那就打开开发调试工具,输入变量的路径,看看页面有没有正常返回回来数据

在这里插入图片描述
如果变量没返回,那说明你参数没有正确传入,确实取不到值的,我们可以改一下,在生命周期函数通过API来调一下,代码结构是

const result = await app.cloud.callConnector({name:'API标识',methodName:'方法标识',params:{openid:app.auth.currentUser.openId}}
)console.log(result)

发布成小程序后,打开小程序的调试工具,在窗口里观察结果

日常开发中我们要熟练掌握后端调试和前端调试以及小程序调试的方法,这样当程序出了问题你才能知道如何解决。

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...