微搭问答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)

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

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

相关内容

热门资讯

AI做攻略、“双向奔赴”……国... 本文转自:人民网人民网记者 许维娜今年国庆假期,AI(人工智能)成了不少年轻人的“旅行搭子”。行前做...
合肥的这个“梗”, 翻篇了 社交平台的评论区,曾长期流传一句专属于合肥的黑色幽默。有人问合肥哪里好玩,本地网友半开玩笑地回复:合...
7万+旅游中高层都在的群,今天... 做旅游这行,资源卡位、渠道互通、项目落地——往往就差一个“对的机会”。我们的行业社群已聚集70,00...
一场帐篷音乐节,如何让井研从“... 帐篷音乐节现场封面新闻记者 周洪攀10月的研溪湿地,晚风里裹着柑橘的清甜与民谣的回响。夜幕降临,10...
白鹤翩翩落星愿,上海迪士尼度假... 10月9日,世界候鸟日前夕,上海迪士尼度假区星愿公园的湖风里多了一分白鹤的灵动。三座白鹤雕塑正式揭幕...
成都锦江边赏初秋枫叶飘飘 目前,成都锦江边国华街枫叶树红了。近年来,国华街附近的几条街都栽种了红枫树,是城区较集中看枫叶的点位...
GBTA:商务旅行正在复苏,但... 亚太正在成为全球商务旅行增长的重要引擎。在经历疫情后的快速反弹之后,全球商务旅行正在进入一个新的增长...
从景区焕新到节赛引流 邹城双节... 齐鲁网·闪电新闻10月9日讯 中秋、国庆“双节”假期,邹城市文化和旅游局提前谋划、周密部署,立足自身...
江山如此多娇 且看石楼今朝 金秋十月,黄河岸畔秋意盎然,丰收盛会喜迎国庆。本次石楼国庆文旅活动以“江山如此多娇,且看石楼今朝”为...
海南国庆假期接待游客475.4... 2026年国庆假期,海南接待游客475.40万人次,较2025年增长13.1%,较2024年增长15...