微信公众号、微信小程序使用JsApi支付方式，前端vue+后端c#，详细介绍

在当今的移动互联网时代，使用微信支付已经成为了很多企业和开发者的主要选择。在本篇文章中，我们将详细介绍如何在一个基于Vue的前端以及C#的后端中集成微信JsApi支付方式，包括相应的代码示例。

一、微信支付的基础知识

微信支付是一种通过微信账户进行的移动支付方式，支持商户通过微信API进行支付处理。其中JsApi支付是针对网页中的即时支付方式，支持用户在微信中进行支付。

二、集成步骤准备

1. 注册微信支付

首先，您需要先注册一个微信公众号，并开通微信支付。开通后，您将获得AppID，商户号和API密钥，这些信息是后续接入的基础。

2. 安装必要的库

在后端C#中，您需要使用一些库来完成HTTP请求和签名。可以使用HttpClient和第三方的XML解析库如System.Xml。

三、后端C#代码实现

下面是一个简单的C#后端示例代码，用于生成微信支付订单。

using System;
using System.Net.Http;
using System.Text;
using System.Xml;
using System.Security.Cryptography;
using System.Threading.Tasks;

public class WeChatPay
{
    private string appId = "your_app_id";
    private string mchId = "your_mch_id";
    private string apiKey = "your_api_key";

    public async Task<string> CreateOrder(string openId, decimal totalFee, string orderId)
    {
        string nonceStr = Guid.NewGuid().ToString("N");
        string tradeType = "JSAPI";

        // 生成签名
        var parameters = new SortedDictionary<string, string>
        {
            { "appid", appId },
            { "mch_id", mchId },
            { "nonce_str", nonceStr },
            { "body", "商品描述" },
            { "out_trade_no", orderId },
            { "total_fee", (totalFee * 100).ToString() }, // 单位为分
            { "spbill_create_ip", "127.0.0.1" },
            { "notify_url", "https://yourdomain.com/notify" },
            { "trade_type", tradeType },
            { "openid", openId }
        };

        string sign = GenerateSign(parameters);
        parameters.Add("sign", sign);

        // 生成XML请求
        var xmlRequest = BuildXml(parameters);

        using (var httpClient = new HttpClient())
        {
            var content = new StringContent(xmlRequest, Encoding.UTF8, "text/xml");
            var response = await httpClient.PostAsync("https://api.mch.weixin.qq.com/pay/unifiedorder", content);
            var responseString = await response.Content.ReadAsStringAsync();
            return responseString; // 返回XML响应
        }
    }

    private string GenerateSign(SortedDictionary<string, string> parameters)
    {
        var sb = new StringBuilder();
        foreach (var param in parameters)
        {
            sb.Append($"{param.Key}={param.Value}&");
        }
        sb.Append($"key={apiKey}");
        return CalculateMD5(sb.ToString()).ToUpper();
    }

    private string CalculateMD5(string input)
    {
        using (var md5 = MD5.Create())
        {
            var inputBytes = Encoding.UTF8.GetBytes(input);
            var hashBytes = md5.ComputeHash(inputBytes);
            return BitConverter.ToString(hashBytes).Replace("-", "").ToLowerInvariant();
        }
    }

    private string BuildXml(SortedDictionary<string, string> parameters)
    {
        var sb = new StringBuilder();
        sb.Append("<xml>");
        foreach (var param in parameters)
        {
            sb.Append($"<{param.Key}>{param.Value}</{param.Key}>");
        }
        sb.Append("</xml>");
        return sb.ToString();
    }
}

四、前端Vue代码实现

在Vue中，我们需要调用后端的接口，发起支付请求。

<template>
  <div>
    <button @click="pay">微信支付</button>
  </div>
</template>

<script>
export default {
  methods: {
    async pay() {
      const response = await fetch('https://yourdomain.com/api/createOrder', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          openId: '用户的openid',
          totalFee: 1, // 1元
          orderId: '订单号'
        })
      });

      const data = await response.json();

      // 解析微信返回的xml信息，获取预支付ID等信息
      const prepayId = this.parseXml(data); // 解析XML的逻辑

      // 调用微信支付接口
      wx.chooseWXPay({
        timestamp: new Date().getTime(), // 时间戳
        nonceStr: '随机字符串', // 随机字符串
        package: `prepay_id=${prepayId}`, // 预支付ID
        signType: 'MD5', // 签名方式
        paySign: '签名', // 签名
        success: function(res) {
          // 支付成功
        },
        fail: function(err) {
          // 支付失败
        }
      });
    },

    parseXml(data) {
      // XML解析逻辑
    }
  }
}
</script>

五、小结

以上是一个简单的微信JsApi支付的集成流程。在真实的项目中，您还需要处理支付异步通知、交易查询、支付结果的保存等功能。切记要根据最新的微信支付文档调整和优化代码。在实际开发中，请妥善保护敏感数据，如API密钥等。希望这篇文章能帮助您顺利实现微信支付的集成。