小程序微信支付开发demo

微信小程序微信支付开发Demo：轻松实现移动支付功能

随着移动互联网的快速发展,移动支付已经成为人们日常生活中不可或缺的一部分，微信支付作为国内领先的支付方式，其便捷性和安全性受到了广大用户的喜爱，本文将为大家介绍如何使用微信小程序进行微信支付开发，并提供一个简单的Demo示例。

微信小程序微信支付开发概述

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的理念，用户扫一扫或搜一下即可打开应用，微信支付是微信提供的一种移动支付方式，支持多种支付场景，如生活缴费、转账、红包等。

微信小程序微信支付开发步骤

注册微信小程序

需要在微信公众平台注册一个微信小程序,并获取AppID。

配置支付参数

在微信公众平台,进入“开发者中心”-“支付设置”，输入商户号、API密钥等信息，完成支付参数的配置。

引入微信支付JSAPI

在微信小程序的页面上,引入微信支付JSAPI，具体代码如下：

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

调用微信支付接口

在页面中,使用wx.requestPayment()方法调用微信支付接口，具体代码如下：

wx.requestPayment({
  timestamp: timestamp,
  nonceStr: nonceStr,
  package: package,
  signType: signType,
  paySign: paySign,
  success: function (res) {
    // 支付成功后的回调函数
  },
  fail: function (err) {
    // 支付失败后的回调函数
  }
});

timestamp、nonceStr、package、signType、paySign是微信支付接口返回的参数，需要在前端进行拼接。

生成签名

在服务器端,使用微信支付SDK生成签名，具体代码如下：

package com.wxpay.util;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Map;
import java.util.TreeMap;
public class SignUtil {
  public static String sign(Map<String, String> params, String key) {
    Map<String, String> sortedParams = new TreeMap<String, String>(params);
    StringBuilder ++ = new StringBuilder();
    for (Map.Entry<String, String> entry : sortedParams.entrySet()) {
      String value = entry.getValue();
      if (null != value && !"".equals(value)) {
        ++.append(entry.getKey()).append("=").append(value).append("&");
      }
    }
    String stringA = ++.toString();
    String stringSignTemp = stringA + "key=" + key;
    return md5(stringSignTemp);
  }
  private static String md5(String string) {
    char[] hexDigits = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'};
    try {
      MessageDigest md = MessageDigest.getInstance("MD5");
      byte[] bytes = md.digest(string.getBytes());
      StringBuilder ++ = new StringBuilder();
      for (byte aByte : bytes) {
        int i = aByte;
        if (i < 0) {
          i += 256;
        }
        ++.append(hexDigits[i >> 4]);
        ++.append(hexDigits[i & 0x0F]);
      }
      return ++.toString();
    } catch (NoSuchAlgorithmException e) {
      throw new RuntimeException(e);
    }
  }
}

获取预支付交易会话标识

在服务器端,使用微信支付SDK获取预支付交易会话标识，具体代码如下：

package com.wxpay.util;
import com.github.wxpay.sdk.WXPayUtil;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
public class PayUtil {
  public static String getPrepayId(String appid, String mch_id, String nonce_str, String body, String out_trade_no, String total_fee, String spbill_create_ip, String notify_url, String trade_type, String key) {
    Map<String, String> params = new HashMap<>();
    params.put("appid", appid);
    params.put("mch_id", mch_id);
    params.put("nonce_str", nonce_str);
    params.put("body", body);
    params.put("out_trade_no", out_trade_no);
    params.put("total_fee", total_fee);
    params.put("spbill_create_ip", spbill_create_ip);
    params.put("notify_url", notify_url);
    params.put("trade_type", trade_type);
    String sign = SignUtil.sign(params, key);
    params.put("sign", sign);
    CloseableHttpClient httpClient = HttpClients.createDefault();
    HttpPost httpPost = new HttpPost("https://api.mch.weixin.qq.com/pay/unifiedorder");
    httpPost.setEntity(new StringEntity(WXPayUtil.formatXml(params), "UTF-8"));
    httpPost.setHeader("Content-Type", "text/xml");
    try {
      CloseableHttpResponse response = httpClient.execute(httpPost);
      HttpEntity entity = response.getEntity();
      String result = EntityUtils.toString(entity, "UTF-8");
      Map<String, String> resultMap = WXPayUtil.xmlToMap(result);
      return resultMap.get("prepay_id");
    } catch (Exception e) {
      throw new RuntimeException(e);
    }
  }
}

微信小程序微信支付开发Demo示例

以下是一个简单的微信小程序微信支付开发Demo示例：

在页面上引入微信支付JSAPI：

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

在页面的JS文件中,编写支付函数：

// 支付函数
function onPay() {
  // 调用服务器端接口获取预支付交易会话标识
  wx.request({
    url: 'https://your_server.com/getPrepayId',
    method: 'POST',
    data: {
      appid: 'your_appid',
      mch_id: 'your_mch_id',
      nonce_str: 'your_nonce_str',
      body: 'your_body',
      out_trade_no: 'your_out_trade_no',
      total_fee: 'your_total_fee',
      spbill_create_ip: 'your_spbill_create_ip',
      notify_url: 'your_notify_url',
      trade_type: 'JSAPI',
      key: 'your_key'
    },
    success: function (res) {
      // 获取预支付交易会话标识
      var prepayId = res.data.prepayId;
      // 调用微信支付接口
      wx.requestPayment({
        timestamp: res.data.timestamp,
        nonceStr: res.data.nonceStr,
        package: 'prepay_id=' + prepayId,
        signType: 'MD5',
        paySign: res.data.paySign,
        success: function (res) {
          // 支付成功后的回调函数
          wx.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: function (err) {
          // 支付失败后的回调函数
          wx.showToast({
            title: '支付失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  });
}

在页面的WXML文件中,添加支付按钮：

<button bindtap="onPay">支付</button>

通过以上步骤,您就可以完成一个简单的微信小程序微信支付开发Demo，在实际开发过程中，可以根据需求进行功能扩展和优化，希望本文对您有所帮助！