微搭问答004-购物车如何实现汇总的功能

news/2024/7/20 0:59:29 标签: 前端, 小程序, 低代码, 微搭

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

规则是小计=单价*数量

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

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

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

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

抽空帮看一下 设置完求和金额显示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)

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

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


http://www.niftyadmin.cn/n/155425.html

相关文章

测绘人必备的三维地图工具,功能超级实用!

图新地球桌面端(以下简称:图新地球)会员分为基础版会员、测绘版会员和工程版会员,不同类型会员核心付费功能点有所不同。其中,测绘版会员涵盖了基础版会员的功能,而工程版会员则涵盖了测绘版会员的功能&…

C语言中的选择结构——if语句/if...else语句

概述 C语言支持最基本的三种程序运行结构:顺序结构、选择结构、循环结构。 顺序结构:程序按顺序执行,不发生跳转。选择结构:依据是否满足条件,有选择的执行相应功能。循环结构:依据条件是否满足&#xff…

【闲聊杂谈】深挖IO

虚拟文件系统 在现代计算机的操作系统当中,除了CPU和内存之外,剩下的基本上都是IO设备。对于程序来讲,模拟使用的是整个内存。一个程序如果想要执行的时候,想要获取IO当中数据的时候就得先通过内核kernel。kernel既管内存的分配&…

【数组】面试高频题:JS的数组去重的方法

这是一个数组: ​ let arr [2, 8, 5, 4, 6, 6, 8, 7, undefined, undefined, NaN, NaN, ‘’, ‘’, null, null, false, false] 1.使用es6新增的Set方法 使用es6新增的Set方法 对undefined,null,NaN,false,‘’ 都生…

2023爬虫学习笔记 -- selenium反爬虫操作(window.navigator.webdriver属性值)

一、无可视化浏览器操作1、导入需要的函数,固定写法,并设置相关浏览器参数from selenium.webdriver.chrome.options import Options浏览器设置Options() 浏览器设置.add_argument("--headless") 浏览器设置.add_argument("--disable-gpu&…

Spring 为什么要三级缓存,二级缓存不行吗?

Spring 设计了三级缓存来解决循环依赖问题。 singletonObjects 一级缓存,用于保存实例化、注入、初始化完成的 bean 实例earlySingletonObjects 二级缓存,用于保存实例化完成、还没依赖注入的 bean 实例singletonFactories 三级缓存,用于保存…

Prometheus AlertManager讲解

一、概述Prometheus 包含一个报警模块,就是我们的 AlertManager,Alertmanager 主要用于接收 Prometheus 发送的告警信息,它支持丰富的告警通知渠道,而且很容易做到告警信息进行去重,降噪,分组等&#xff0c…

LoRa烟雾报警器的安装方式

LoRa烟雾报警器是一种常用的消防安全设备,它能够在发现火灾或烟雾时迅速发出警报,为人们提供及时的警示和保护。但是,烟雾报警器的安装也是非常关键的,只有正确安装才能发挥其最大的作用。以下是烟雾报警器安装的步骤:…