微信小程序支付的前后端实现可以分为以下几个步骤：

1. 微信开放平台注册账号并创建小程序应用。

2. 在小程序后台设置支付相关信息，包括支付证书、支付回调地址等。

3. 在小程序前端页面中调用wx.requestPayment函数，调起微信支付界面。

4. 在小程序后端服务器中接收微信支付回调，验证支付结果并处理订单。

以下是前后端Java版实现的示例代码：

前端代码

wx.requestPayment({timeStamp: '', // 时间戳nonceStr: '', // 随机字符串package: '', // 统一下单接口返回的 prepay_id 参数值signType: 'MD5',paySign: '', // 签名success(res) {// 支付成功后的处理},fail(res) {// 支付失败后的处理}
});

后端代码

1. 统一下单接口调用

/*** 微信统一下单* @param openid 用户openid* @param orderNo 订单号* @param amount 支付金额* @param ip 请求IP* @param notifyUrl 支付回调地址* @return 返回预支付订单号等信息*/
public static Map<String, String> unifiedorder(String openid, String orderNo, String amount, String ip, String notifyUrl) throws Exception {Map<String, String> result = new HashMap<>();// 组装请求参数Map<String, String> params = new HashMap<>();params.put("appid", APP_ID);params.put("mch_id", MCH_ID);params.put("nonce_str", WXPayUtil.generateNonceStr());params.put("body", "订单支付");params.put("out_trade_no", orderNo);params.put("total_fee", amount);params.put("spbill_create_ip", ip);params.put("notify_url", notifyUrl);params.put("trade_type", "JSAPI");params.put("openid", openid);String sign = WXPayUtil.generateSignature(params, KEY);params.put("sign", sign);// 发送请求并解析返回结果String xmlParams = WXPayUtil.mapToXml(params);String xmlResult = HttpUtil.post(UNIFIEDORDER_URL, xmlParams);Map<String, String> resultMap = WXPayUtil.xmlToMap(xmlResult);if ("SUCCESS".equals(resultMap.get("return_code"))) {if ("SUCCESS".equals(resultMap.get("result_code"))) {// 组装前端支付参数String prepay_id = resultMap.get("prepay_id");String timeStamp = String.valueOf(System.currentTimeMillis() / 1000);String nonceStr = WXPayUtil.generateNonceStr();String signType = "MD5";Map<String, String> payParams = new HashMap<>();payParams.put("appId", APP_ID);payParams.put("timeStamp", timeStamp);payParams.put("nonceStr", nonceStr);payParams.put("package", "prepay_id=" + prepay_id);payParams.put("signType", signType);String paySign = WXPayUtil.generateSignature(payParams, KEY);result.put("timeStamp", timeStamp);result.put("nonceStr", nonceStr);result.put("package", "prepay_id=" + prepay_id);result.put("signType", signType);result.put("paySign", paySign);} else {// 统一下单失败result.put("errMsg", resultMap.get("err_code_des"));}} else {// 请求失败result.put("errMsg", resultMap.get("return_msg"));}return result;
}

1. 支付结果回调处理

/*** 微信支付结果回调处理* @param request* @return*/
@RequestMapping(value = "/wxpay/notify", method = RequestMethod.POST)
@ResponseBody
public String notify(HttpServletRequest request) {String xmlResult = HttpUtil.getRequestBody(request);try {Map<String, String> resultMap = WXPayUtil.xmlToMap(xmlResult);if ("SUCCESS".equals(resultMap.get("return_code"))) {if ("SUCCESS".equals(resultMap.get("result_code"))) {// 验证签名if (WXPayUtil.isSignatureValid(resultMap, KEY)) {// 处理订单// ...return WXPayUtil.success();} else {return WXPayUtil.fail("签名验证失败");}} else {return WXPayUtil.fail(resultMap.get("err_code_des"));}} else {return WXPayUtil.fail(resultMap.get("return_msg"));}} catch (Exception e) {e.printStackTrace();return WXPayUtil.fail("系统错误");}
}