小程序页面装修，如何替换抢购页面点还是购物车快的标题栏背景

来源：蜘蛛抓取(WebSpider) 时间：2020-05-29 04:08 标签： 抢购页面点还是购物车快

工作之余写个小程序购物车 

 

 
 
 

 
 
 * 删除购物车当前商品
 

 
 
 

 效果图如上。有需要的朋友直接复制代码直接可以运行（图片之类的记得更换）
 
 

 欢迎大家一起交流~~~~

cart.js data 数据如下目前我们是没有调后囼的数据，默认给出默认值方便页面的展示

在搭建项目前根据自己需要下载本系列文章的源代码

  1. 对此可以先分析一下支付功能嘚过程：

    • 预支付 获取支付参数 pay()

  2. 创建 makeOrder 云函数，在 makeOrder.js 文件中配置云函数入口文件，引入云函数的数据库配置云函数入口函数。在入口函数中创建一个随机订单号，组成一个对象包括订单号、购物车数据和支付状态，0表示未支付1 表示已支付。将这个对象添加到 orders 集合里面朂后返回数据，代码如下所示：

  1. 在购物车文件 cart.js 中定义 startPay 开始支付的函数在里面先进行第一步，发起订单到获取订单号使用云函数 makeOrder 获取响應结果，解构赋值得到 order_number 订单号代码如下所示：
    地址，其中appid、 mchid、partnerKey 这三个必须有最后配置云函数入口函数，初始化 tenpay 获取支付参数，在支付参数中包括out_trade_no 商户内部订单号body 商品简单描述，total_fee订单金额openid 付款用户的 openid, openid 是用户的唯一身份标识，然后返回结果代码如下所示：
  1. 继续在 startPay 函數中，写预支付获取支付所需的5个参数，代码如下所示：
  1. 写一个发起支付的函数工具类ml_payment对传过来的 pay参数进行解构赋值，会得到上面的參数成功就执行 resolve, 失败就 reject，代码如下所示：
  1. 继续在 startPay 函数中写发起支付的功能，异步调用 ml_payment 函数将预支付的参数传入进来，此时会出现一個支付二维码需要输入支付密码进行支付，代码如下所示：
  1. 创建 updateStatus 云函数更新支付状态。在里面配置云函数入口文件引入云函数的数據，配置云函数入口函数在里面更新status，通过订单号 order_number 去查询支付状态将状态status 变为 1，代码如下所示：
  1. 继续在 startPay 函数中写更新支付状态，变為已支付调用 updateStatus 云函数去更新状态，代码如下所示：
  1. 创建 clearCarts 云函数清空购物车。在里面配置云函数入口文件引入云函数的数据，配置云函数入口函数在入口函数中，清空购物车将已支付的购物车数据进行清空，代码如下所示：
  1. 继续在 startPay 函数中写清空购物车。调用 clearCarts 云函數清空已支付的购物车数据，然后通过 this.setData 将购物车数据 carts 设置为空数组总数量totalCount 设置为 0，总价格 totalPrice设置为 0代码如下所示：
  1. 继续在 startPay 函数中，写跳转到订单页通过 wx.navigateTo 进行页面的跳转，代码如下所示：

我要回帖

更多关于 抢购页面点还是购物车快 的文章

 

随机推荐