小程序调起支付demo 小程序实现支付功能

这是一个适合已经入门微信小程序的教程。

下面首先暂时一下效果图：

这个是商品页面，我们可以在数据库中添加我们的商品数据，或者是使用小程序的可视化内容管理平台进行添加编辑。

当点击购买的时候回拉起微信支付，我们可以进行付款。或者是不输入密码，订单信息同样会被提交，以未支付的形式出现在未支付页面。

这个是订单页面：

当我们点击“去支付”的时候，我们的手机会弹出支付密码。当点击已支付的时候，会显示我们已经支付过得订单。

---

能看懂的基础知识：

首先，开发者需要知道一些有关小程序中数据库相关的基础知识和云开发中函数的基础知识。

如果开发者没有了解过相关的知识，

---

思路：
有关概念

requestAPI

向后台的请求函数

利用函数向微信后台传递参数，同时获得参数。

requestAPI利用获得的参数拉起微信支付。

---

实现支付的思路：

1.点击获得这个商品的数据信息。

// 在页面显示的时候就进行显示
 onShow(){
  wx.cloud.database().collection('buy_goods').get()
  .then(res=>{
    console.log(res)
    // 进行赋值
    this.setData({
      goodslist:res.data
    })
  })
 }

2.调用函数传递向微信后台。

wx.cloud.callFunction({
  name:'buy-pay',
  // 向云函数传入参数
  data:{
    body:this.data.goodslist[index].title,
    // 这个地方要加一个单引号
    outTradeNo:orderid +'', 
    // 这个地方必须是number类型
    totalFee:Number(this.data.goodslist[index].price) * 100
  }
}).then(res=>{
  console.log(res)
 this.pay(res.result.payment)
})
})
},

pay(payment){
  var that=this
  wx.requestPayment({
   //  依次进行赋值
  ...payment,
  success(res){
    console.log(res)
    // 把订单状态改变，当在订单页面显示时，可以显示出已支付
    // 数据库部分的内容是先进行查询，之后再更新
    wx.cloud.database().collection('buy_order').doc(that.data.order_id).update({
      data:{
        status:1
      },
      // 每一个函数调用成功之后，都可以加上一项success
      success(res){
        console.log(res)
        wx.showToast({
          title: '支付成功',
        })
      }
    })
  },
  fail(res){
   console.log(res)
   wx.showToast({
     title: '支付失败',
   })
  }
  })
 }

})

后天传递微信后天的函数：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    "body" : event.body,//商品描述？？body是属性还是自定义好的。==是从event中传入的。
    "outTradeNo" : event.outTradeNo,//订单号
    "spbillCreateIp" : "127.0.0.1",//终端IP
    "subMchId" : "1621670684",//商户号
    "totalFee" : event.totalFee,//订单金额
    "envId": "pay-try-0gmo3urf4597ee3d",//云环境名称
    "tradeType":"JSAPI",//交易类型
    "functionName": "pay_cb" //调用云函数成功之后的回调函数
  })
  return res
}

3.使用API并且改变订单状态。

pay(payment){
  var that=this
  wx.requestPayment({
   //  依次进行赋值
  ...payment,
  success(res){
    console.log(res)
    // 把订单状态改变，当在订单页面显示时，可以显示出已支付
    // 数据库部分的内容是先进行查询，之后再更新
    wx.cloud.database().collection('buy_order').doc(that.data.order_id).update({
      data:{
        status:1
      },
      // 每一个函数调用成功之后，都可以加上一项success
      success(res){
        console.log(res)
        wx.showToast({
          title: '支付成功',
        })
      }
    })
  },
  fail(res){
   console.log(res)
   wx.showToast({
     title: '支付失败',
   })
  }
  })
 }

})

---

可能会遇到的问题：
1.向云函数传递参数的时候需要注意格式：

// 向云函数传入参数
  data:{
    body:this.data.goodslist[index].title,
    // 这个地方要加一个单引号
    outTradeNo:orderid +'', 
    // 这个地方必须是number类型
    totalFee:Number(this.data.goodslist[index].price) * 100
  }

2.requestpay进行依次赋值的时候可以用...payment实现