小程序模板网

微信小程序支付简单小结与梳理


前言

公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理。

支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点。

当然在开发之前,我们需要有下面这些东西:

  • appId
  • 密钥(小程序配置界面)
  • 商户号
  • api密钥(商家后台自己设置)

当然这些是不用我们自己申请的,公司会有人申请好,然后要什么跟这个人说,让他提供就可以了。

首先来看一下官方给出的业务流程时序图

 
这个图很清晰的表达了在小程序支付中的整个流程,每一步要做些什么。

一个完整的支付,一般情况下都是包含了下面三个主要的点;

  • 支付(正常是支付平台提供的h5页面让用户操作,主要是输密码)
  • 通知(用户完成一笔支付了,支付平台要通知商家支付结果,商家收到结果后进行一些相应的处理)
  • 查询(与第二点有点反过来的意思,商家自己主动去支付平台查询支付的结果,然后根据结果做相应的处理)

下面就重点来简单实现一下上面说的第一点,支付,也是可以进行下面两步的在大前提。

 

支付的简单实现

 

小程序的实现

简单起见,在index.wxml中添加一个输入框和一个button,绑定一下相应的事件,输入框主要是用于输入订单号,按钮用于模拟提交一个订单并发起支付。

 

<!--index.wxml-->
<view class="container">
    <input type="text" bindinput="getOrderCode" style="border:1px solid #ccc;"  />
    <button bindtap="pay">立即支付</button>
</view>

然后在index.js中写上一小段代码,主要是处理上面按钮的点击事件。

 

Page({
    data: {
        txtOrderCode: ''
    },
    pay: function () {
        var ordercode = this.data.txtOrderCode;
        wx.login({
          success: function (res) {
            if (res.code) {
              wx.request({
                url: 'https://www.yourdomain.com/pay',
                data: {
                  code: res.code,//要去换取openid的登录凭证
                  ordercode: ordercode
                },
                method: 'GET',
                success: function (res) {
                  console.log(res.data)
                  wx.requestPayment({
                    timeStamp: res.data.timeStamp,
                    nonceStr: res.data.nonceStr,
                    package: res.data.package,
                    signType: 'MD5',
                    paySign: res.data.paySign,
                    success: function (res) {
                      // success
                      console.log(res);
                    },
                    fail: function (res) {
                      // fail
                      console.log(res);
                    },
                    complete: function (res) {
                      // complete
                      console.log(res);
                    }
                  })
                }
              })
            } else {
              console.log('获取用户登录态失败!' + res.errMsg)
            }
          }
        });
    },
    getOrderCode: function (event) {
        this.setData({
          txtOrderCode: event.detail.value
        });
    }
})

可以看到,在这里Catcher先通过wx.login这个API先取到了登录的凭证code,并把这个凭证code做为请求参数用wx.request这个API发起一个网络请求。

在这个网络请求处理后会返回小程序支付所需要的相关参数。拿到这些参数后,再调用wx.requestPayment这个支付API,此时才算是真正的发起支付。

至此,小程序这边的事已经做完了,接下来就是要去处理接口那边的事了,其实接口要做的就是返回小程序需要的几个参数。但是要拿到这几个参数还是需要做不少事情的。

 

接口的实现

据悉最新版的Senparc.Weixin.MP已经支付了小程序相关的内容,但是公司用的版本还是比较低

并且近期也没有打算对这个组件进行升级。所以就从白纸一张开始了。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21889.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询