微信小程序：购物车加减

最新推荐文章于 2023-01-04 20:57:30 发布
最新推荐文章于 2023-01-04 20:57:30 发布
阅读量4.1k 收藏 10
点赞数 1
分类专栏： 微信小程序实战全记录 文章标签： 小程序
本文为博主原创文章，未经博主允许不得镜像、转载。
本文链接：https://blog.csdn.net/qq_21041889/article/details/104969030
版权

此贴为自己记录贴，以便日后做到同样的项目能给自己提个醒

在加入购物车时，会将商品编号（goods_id）、数量（quan）等有用的信息存入购物车表（cart），有则在原有的基础上添加数量，无则新增一条数据，从而生成一个cart表的id 。打开购物车时，将id、goods_id、quan赋值，如果商品库存或者状态发生变化，也要改要体现出来，例如库存不够、该商品已下架之类的。

购物车的加减和输入数量的操作：

先说手动输入，type="number"  bindblur="getInputQuan"  很容易可以获取到键盘输入的数量quan，同时用id、quan 去后台修改数量；

加和减：跟上面手动输入是一个道理，只不过要在原数量的基础上增加或减少一个，同样去服务端修改数量。不过每次点击“加号”、“减号”或者“手动修改数量”都去请求一次服务，根据返回的结果来判断是否修改成功，从而刷新购物车，不过自我感觉这样不太方便或者不太优化...希望有更好的办法能优化一下！

这其中的一些判断和条件，根据自己需求来吧。

部分代码


                

        

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  Dove言和
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
微信小程序购物车实战：加减商品数量，汇总价格，全选与全不选 ... ...

				
			

			

				

					03-29
				

			

		

		

			
				
微信小程序，这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。
摘要: 加减商品数量，汇总价格，全选与全不选
设计思路：
一、从网络上传入以下Json数据格式的数组  1.标题title 2.图片地址 3.数量num 4.价格price  5.是否选中selected 
二、点击复选框toggle操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，方便遍历
三、全选操作 首次点击即为全部选中，再次点击为全不选，全选按钮本身也跟随toggle变换
四、点击结算按钮，将已选中的数组取出，以供通过网络提交到服务端，这里给个toast作为结果演示。
五、利用s

			
		

	



                

              
                



	

		

			

				
					
微信小程序 —— 购物车加减

				
			

			

				

					weixin_43037740的博客
				

				

					02-21
					
					3443
					
				

			

		

		

			
				
wxml 部分：
 <view class='reduce mr20'>
    <image class='reduceImg' src='http://image-ibeef.oss-cn-qingdao.aliyuncs.com/miniProgram/shop/reduce.png' mode="widthFix" style='width: 35rpx;'   bind...

			
		

	



                


  
              

                


	

		

			

				
					
小程序手动修改购物车数量的问题

				
			

			

				

					zzzzzzyx的博客
				

				

					04-05
					
					1094
					
				

			

		

		

			
				
小程序手动修改购物车数量的问题
最近在写小程序相关的项目，其中有一个是购物车模块，实现手动输入值修改数量，或者通过按钮点击加减操作。通过按钮的加减操作可以通过一个事件处理函数来完成，然后传入当前的索引以及第二个参数step（1或者-1），当点击的时候直接让当前索引的商品加上step，step为1就是添加商品，step为-1就是减少商品，当然也需要设置临界值，如下
<text class="r...

			
		

	





	

		

			

				
					
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]

				
			

			

				

					菜鸟老五
				

				

					07-20
					
					2万+
					
				

			

		

		

			
				
代码注释很容易理解







 


<!-- 最外层视图pages -->
<view class="pages">

  <view wx:if="{{hasList}}">
  <!-- 编辑 -->
  <view class='edit'>
  <label class='edit_btn' bindtap...

			
		

	



		

			
		



	

		

			

				
					
微信小程序 数量增减

				
			

			

				

					hgp0487561的博客
				

				

					03-27
					
					3871
					
				

			

		

		

			
				
在微信小程序中，做购物车功能的部分的时候，涉及到商品的增加和减少功能，一般来说这部分的功能主要就是事件，当点击“-”时，绑定了一个将数字减少的函数，当减少到1时就不再减少，当点击“+”号时，绑定了将数字增加的功能，我先初步设计一个，首先就是在data中定义一个num变量：


  data: {
    num:0
  },  

之后在wxml页面设计一个加减的框，中间的数字绑定了...

			
		

	





	

		

			

				
					
微信小程序 - [完整源码] 实现左右联动效果，类似外卖点餐的左右联动功能界面（支持页面自定义样式、购物车自动计算金额、购物车加减商品等功能）

				
			

			

				

					王佳斌
				

				

					09-08
					
					8845
					
				

			

		

		

			
				
微信小程序外卖点餐界面源码，微信小程序仿美团饿了么点餐页面，微信小程序左菜单右内容同时联动，微信小程序左右联动功能详细教程，微信小程序实现左右菜单联动功能，微信小程序如何实现像美团一样的点餐界面，微信小程序如何实现左右布局且联动的点餐界面，微信小程序左右联动，微信小程序仿美团饿了么点餐界面，微信小程序实现类似美团外卖店铺页面滑动左右联动，微信小程序scroll-view实现左右联动效果，小程序实现左右联动的菜单列表，小程序实现外卖购物页面左右联动，小程序微信商品列表的左右联动，小程序商品分类页面滑动左右联动

			
		

	





	

		

			

				
					
微信小程序购物车 数量加减功能

				
			

			

				

					用心创作每一篇文章
				

				

					01-04
					
					997
					
				

			

		

		

			
				
现在就为大家介绍这个小组件，在微信小程序中，该如何去写。

			
		

	





	

		

			

				
					
微信小程序的购物车加减的方法

				
			

			

				

					javascript和jq设置金额整数与小数点后面的字体大小
				

				

					10-29
					
					966
					
				

			

		

		

			
				
微信小程序加减按钮方法的实现

			
		

	





	

		

			

				
					
微信小程序购物车数量加减功能的实现

				
			

			

				

					ainie0728的博客
				

				

					10-19
					
					1676
					
				

			

		

		

			
				
实现一个简单的数量增减功能
1.wxml



<view class='stepper sum'>
<text class='{{minusStatus}}' type='number' bindtap='bindMinus'>-</text>
<input bindinput='bindManual' value...

			
		

	





	

		

			

				
					
微信小程序实现一个简单的加减法的计算器

				
			

			

				

					共勉
				

				

					03-09
					
					9833
					
				

			

		

		

			
				
首先看一下效果图：

实现的功能及步骤：首先在wxml当中编辑好布局等。俩个input标签用于输入值。一个view用于给计算结果。
首先对于input标签要绑定好一个方法，也就是将输入的数字实时同步。在js文件当中编辑：绑定的俩个方法相同，对原本的num和num1赋值，需要注意的是，在这是的e.detail.value获取的值要进行数据类型强制转换。
handleInput(e) {
    th...

			
		

	





	

		

			

				
					
微信小程序购物车

				
			

			

				

					05-09
				

			

		

		

			
				
微信小程序购物车实现了点击商品添加和购物加减删除商品以及累计金额，直接用工具打开就能用。

			
		

	





	

		

			

				
					
微信小程序商城项目之购物数量加减（3）

				
			

			

				

					01-20
				

			

		

		

			
				
我们在购买宝贝的时候，购物的数量，经常是我们需要使用的，如下所示：
在宝贝详情页里：

在购物车里：


现在就为大家介绍这个小组件，在小程序中，该如何去写
下图为本项目的图：


wxml：


<!-- 主容器 -->

  <!-- 减号 -->
  -
  <!-- 数值 -->
  <input type=number bindchange=bindManual value={{num}} />
  <!-- 加号 

			
		

	





	

		

			

				
					
小程序实现抛入购物车效果，计算金额，加减等功能

				
			

			

				

					09-30
				

			

		

		

			
				
该小程序案例实现了购物车加减计算金额，单选全选计算金额，计算数量，删除，以及抛物线点击商品抛入购物车效果.

			
		

	





	

		

			

				
					
微信小程序 购物车简单实例

				
			

			

				

					01-03
				

			

		

		

			
				
微信小程序，这里实现购物车功能的小demo,有需要此功能的朋友可以参考下。 摘要: 加减商品数量，汇总价格，全选与全不选  设计思路： 一、从网络上传入以下Json数据格式的数组 1.购物车id：cid 2.标题title 3.数量...

			
		

	





	

		

			

				
					
微信小程序带购物车功能

				
			

			

				

					04-19
				

			

		

		

			
				
这是一个模拟购物车的功能，实现菜单切换，加减数量，汇总金额，实现支付的用例

			
		

	





	

		

			

				
					
Cannot read property ‘replace‘ of undefined

					
热门推荐

				
			

			

				

					Dove言和 
				

				

					07-10
					
					4万+
					
				

			

		

		

			
				
微信小程序之坑坑坑.....(ಥ﹏ಥ)(ಥ﹏ಥ)(ಥ﹏ಥ)

微信小程序报“Cannot read property 'replace' of undefined”，原因有以下可能：

(1):你可能用到了这个data.replace(/\-/g, "/")，例如下面这样↓↓↓；如果data为NULL，就会报错


var data = this.data.hopeopentime //'201...

			
		

	





	

		

			

				
					
微信小程序wx:if与wx:else多条件判断

				
			

			

				

					Dove言和 
				

				

					03-04
					
					3万+
					
				

			

		

		

			
				
wx:if 多条件判断


<view wx:if="{{condition}}">单个条件</view>
<view wx:if="{{condition1|| condition2}}">多个或条件</view>
<view wx:if="{{condition1&& condition2}}">多个且条件</v...

			
		

	





	

		

			

				
					
微信小程序：预览PDF文件

				
			

			

				

					Dove言和 
				

				

					02-26
					
					1万+
					
				

			

		

		

			
				
微信小程序直接预览PDF文件



官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.openDocument.html



代码：


//打开pdf文件
    wx.showLoading({
      title: '加载中...',
    })
    wx.downloadFile({
      url: ...

			
		

	





	

		

			

				
					
微信小程序开发-点击事件，获取元素id

				
			

			

				

					Dove言和 
				

				

					03-01
					
					1万+
					
				

			

		

		

			
				
1、点击事件，获取元素id，页面传值

不是专业程序员，突然就想研究一下微信小程序的开发，开发一个实时的菜价系统小程序，新手一个，什么都不懂，就从0开始，想着写个博客把遇到的问题和解决的办法一点点的写下来吧。

首先遇到的问题就是参数传递；

小程序里的点击触发事件、如何获取当前元素的id、如何吧值传递到下一个页面例：



&lt;view class="kindleft"&gt;
 
 &...

			
		

	





	

		

			

				
					
微信小程序:仿微信聊天界面源码.rar_

					
最新发布

				
			

			

				

					09-05
				

			

		

		

			
				
微信小程序:仿微信聊天界面源码.rar 是一个仿照微信聊天界面的小程序源码压缩文件。该源码文件可以用于开发微信小程序，使得小程序的聊天功能与微信类似。

在微信小程序中，用户可以通过该源码文件来创建一个聊天界面，实现类似微信的聊天功能。通过该源码文件，开发者可以了解和学习微信聊天界面的实现方法和技巧，快速搭建一个类似的聊天界面。

该源码文件中提供了一些常见的聊天功能，比如文字消息的发送和接收，图片消息的发送和接收，语音消息的发送和接收等等。开发者可以根据自己的需求对源码进行修改和扩展，以满足特定的功能需求。

使用该源码文件，开发者只需下载解压后，在微信小程序开发工具中导入该项目，即可实现仿微信聊天界面的小程序。开发者还可以根据自己的需求进行样式和功能的定制，使得聊天界面更加符合自己的设计要求。

总之，微信小程序:仿微信聊天界面源码.rar 是一个可以帮助开发者快速搭建仿微信聊天界面的小程序源码文件，通过学习和使用该源码文件，开发者可以轻松实现微信类似的聊天功能。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
Dove言和

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值