Django1.11配合uni-app发起微信支付的实现

下面我将为您详细讲解“Django 1.11 配合 uni-app 发起微信支付的实现”的完整攻略。

一、前置条件

1. 在微信公众平台中开通微信支付功能，并获得相关的 APP ID、商户号 和 支付密钥；
2. 安装 WxPayAPI，并将 WxPayAPI 放置在项目的根目录下；
3. 在 Django 中安装 django-rest-framework（DRF） 和 djangorestframework-jwt（用户鉴权）；
4. 确保 uni-app 中已经安装了 uni.request 等必需的插件。

二、微信支付的 SDK 集成

1. 将微信支付的 WxPayAPI 放置在 Django 项目的根目录下并引入 SDK

将后台收到的请求数据转成 XML 后传入微信支付的 SDK 里面，获取预支付订单信息，然后返回给前端。在 Django 项目的根目录下创建 wxpay 目录，将 WxPayAPI 中的 lib 文件夹以及 WxPay.Api.php 引入到 wxpay 目录下。然后，将 wxpay 目录加入到 settings.py 的 INSTALLED_APPS 中，以便后续的调用。

示例代码：

from wxpay.lib import *
from wxpay import *
@api_view(['POST'])
@permission_classes([IsAuthenticated])
def user_wxpay(request):
    """
    request.POST 包含以下字段：
        openid: 微信用户 openid
        out_trade_no: 商户订单号
        total_fee: 支付金额（单位：元）
        body: 订单描述
    """
    openid = request.POST.get('openid', '')
    out_trade_no = request.POST.get('out_trade_no', '')
    total_fee = request.POST.get('total_fee', '')
    body = request.POST.get('body', '')

    if not all([openid, out_trade_no, total_fee, body]):
        return Response({'errMsg': '请求参数不完整，请检查'}, status=status.HTTP_400_BAD_REQUEST)

    # 微信支付参数配置
    wxpay_conf = wxPayConfig(APPID, MCHID, KEY, APPSECRET, SSLCERT_PATH, SSLKEY_PATH)
    wxpay = WXPay(wxpay_conf)

    # 组装微信支付请求参数
    data = {
        'body': body,
        'out_trade_no': out_trade_no,
        'total_fee': int(float(total_fee) * 100),
        'spbill_create_ip': request.META.get('REMOTE_ADDR', '127.0.0.1'),
        'notify_url': NOTIFY_URL,
        'trade_type': 'JSAPI',
        'openid': openid,
    }

    # 调用微信支付 API 获取预支付订单信息
    result = wxpay.unifiedOrder(data)
    if result['return_code'] != 'SUCCESS' or result['result_code'] != 'SUCCESS':
        return Response({'errMsg': result['return_msg']}, status=status.HTTP_400_BAD_REQUEST)

    # 组装返回给前端的支付信息
    prepay_id = result['prepay_id']
    package = 'prepay_id=%s' % prepay_id
    timestamp = int(time.time())
    nonce_str = getNonceStr()
    sign = wxpay.getSign({
        'appId': APPID,
        'timeStamp': str(timestamp),
        'nonceStr': nonce_str,
        'package': package,
        'signType': 'MD5',
    })

    # 将支付相关信息返回给前端
    data = {
        'nonceStr': nonce_str,
        'package': package,
        'signType': 'MD5',
        'paySign': sign,
        'timeStamp': str(timestamp),
    }

    return Response(data)

1. uni-app 中发起微信支付请求

前端将后台返回的支付参数组装成标准的微信支付格式，并调用 uni.request 发起微信支付请求。需要注意的是，在 uni.request 中设置 dataType: "xml" 和 responseType: "text"，以便保证返回内容的准确性。

示例代码：

<template>
  <view>
    <button @tap="pay">微信支付</button>
  </view>
</template>
<script>
  export default {
    methods: {
      pay() {
        const params = {
          openid: 'xxxx',
          out_trade_no: 'xxxx',
          total_fee: 0.01,
          body: '测试订单',
        }
        uni.request({
          url: 'https://your-api-url.com/user/wxpay/',
          method: 'POST',
          data: params,
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`,
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          dataType: 'xml',
          responseType: 'text',
          success: (res) => {
            console.log(res)
            const data = res.data
            uni.requestPayment({
              'timeStamp': data.timeStamp,
              'nonceStr': data.nonceStr,
              'package': data.package,
              'signType': data.signType,
              'paySign': data.paySign,
              success: (res) => {
                console.log(res)
              },
              fail: (res) => {
                console.log(res)
              }
            })
          },
          fail: (res) => {
            console.log(res)
          }
        })
      }
    }
  }
</script>

三、微信支付的接口测试

在以上的操作完成之后，可以调用微信支付的接口进行测试。由于微信支付是需要用到商户信息和微信支付账号等敏感信息的，所以建议在 DEBUG 模式下进行测试，以便快速完成测试。完成后，需要将代码中的 DEBUG 变量改为 False。

同时，在测试时还需要注意以下几点：

• 在微信支付管理后台开启调试模式；
• 在微信支付管理后台配置异步通知地址；
• 将预支付订单号传入到微信的支付成功回调地址中。

以上就是关于“Django 1.11 配合 uni-app 发起微信支付的实现”的完整攻略，希望对您有所帮助。