二维码
(1) 容错级别
L级（低） 7％的码字可以被恢复。
M级（中） 的码字的15％可以被恢复。
Q级（四分）的码字的25％可以被恢复。
H级（高） 的码字的30％可以被恢复。
(2) 二维码生成插件qrious
qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。
qrious.js二维码插件的可用配置参数如下：
| 参数 | 类型 | 默认值 | 描述 |
| background | String | "white" | 二维码的背景颜色。 |
| foreground | String | "black" | 二维码的前景颜色。 |
| level | String | "L" | 二维码的误差校正级别(L, M, Q, H)。 |
| mime | String | "image/png" | 二维码输出为图片时的MIME类型。 |
| size | Number | 100 | 二维码的尺寸，单位像素。 |
| value | String | "" | 需要编码为二维码的值 |
web引入qrious.js
qrious.min.js
微信支付SDK
(1) 解压WxPayAPI_JAVA_v3.zip
(2) 将解压的maven工程导入到IDE(eclipse)
(3) 打成jar包,并安装到maven仓库
mvn install:install-file -Dfile=d:\setup\wxpay-sdk-0.0.3.jar -DgroupId=com.github.wxpay -DartifactId=wxpay-sdk -Dversion=0.0.3 -Dpackaging=jar
(4) 在要使用微信扫码支付的工程引入依赖
com.github.wxpay wxpay-sdk 0.0.3
HttpClient工具类
HttpClient是Apache Jakarta Common下的子项目，用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包，并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中，比如Apache Jakarta上很著名的另外两个开源项目Cactus和HTMLUnit都使用了HttpClient。
HttpClient通俗的讲就是模拟了浏览器的行为，如果我们需要在后端向某一地址提交数据获取结果，就可以使用HttpClient.
关于HttpClient（原生）相对比较麻烦，进行封装，使用封装后的工具类HttpClient（对原生HttpClient进行了封装）
HttpClient工具类使用的步骤
HttpClient client=new HttpClient(请求的url地址);client.setHttps(true);//是否是https协议client.setXmlParam(xmlParam);//发送的xml数据client.post();//执行post请求String result = client.getContent(); //获取结果
添加配置文件weixinpay.properties
## 微信公众账号或开放平台APP的唯一标识 appid=**************** ## 财付通平台的商户账号 partner=********* ## 财付通平台的商户密钥 partnerkey=********************************* ## 回调地址 notifyurl=http://a31ef7db.ngrok.io/WeChatPay/WeChatPayNotify
将二维码插件QRious拷贝到web 的plugins目录中
后端代码(ServiceImpl)
@Servicepublic class WeixinPayServiceImpl implements WeixinPayService { @Value("${appid}") private String appid; @Value("${partner}") private String partner; @Value("${partnerkey}") private String partnerkey; /** * 生成二维码 * @return */ public Map createNative(String out_trade_no,String total_fee){ //1.创建参数 Map param=new HashMap();//创建参数 param.put("appid", appid);//公众号 param.put("mch_id", partner);//商户号 param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串 param.put("body", "xxx");//商品描述 param.put("out_trade_no", out_trade_no);//商户订单号 param.put("total_fee",total_fee);//总金额（分） param.put("spbill_create_ip", "127.0.0.1");//IP param.put("notify_url", "http://www.xxx.cn");//回调地址(随便写) param.put("trade_type", "NATIVE");//交易类型 try { //2.生成要发送的xml String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey); System.out.println(xmlParam); HttpClient client=new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder"); client.setHttps(true); client.setXmlParam(xmlParam); client.post(); //3.获得结果 String result = client.getContent(); System.out.println(result); Map resultMap = WXPayUtil.xmlToMap(result); Map map=new HashMap<>(); map.put("code_url", resultMap.get("code_url"));//支付地址 map.put("total_fee", total_fee);//总金额 map.put("out_trade_no",out_trade_no);//订单号 return map; } catch (Exception e) { e.printStackTrace(); return new HashMap<>(); } }} 后端代码(Controller)
/** * 支付控制层 * @author Administrator * */@RestController@RequestMapping("/pay")public class PayController { @Reference private WeixinPayService weixinPayService; /** * 生成二维码 * @return */ @RequestMapping("/createNative") public Map createNative(){ IdWorker idworker=new IdWorker(); return weixinPayService.createNative(idworker.nextId()+"","1"); }} 前端代码,先引入angular.js
angular.min.js
base.js
var app = angular.module('xxx', []); Service.js
app.service('payService',function($http){ //本地支付 this.createNative=function(){ return $http.get('pay/createNative.do'); } }); Controller.js
app.controller('payController' ,function($scope ,payService){ //本地生成二维码 $scope.createNative=function(){ payService.createNative().success( function(response){ $scope.money= (response.total_fee/100).toFixed(2) ; //金额 $scope.out_trade_no= response.out_trade_no;//订单号 //二维码 var qr = new QRious({ element:document.getElementById('qrious'),// 根据id选择元素 size:250, level:'H', value:response.code_url }); } ); } }); html页面
引入js
指令
html代码
![]()
请使用微信扫一扫
扫描二维码支付
微信扫码支付状态
后端(ServiceImpl)
@Override public Map queryPayStatus(String out_trade_no) { Map param=new HashMap(); param.put("appid", appid);//公众账号ID param.put("mch_id", partner);//商户号 param.put("out_trade_no", out_trade_no);//订单号 param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串 String url="https://api.mch.weixin.qq.com/pay/orderquery"; try { String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey); HttpClient client=new HttpClient(url); client.setHttps(true); client.setXmlParam(xmlParam); client.post(); String result = client.getContent(); Map map = WXPayUtil.xmlToMap(result); System.out.println(map); return map; } catch (Exception e) { e.printStackTrace(); return null; } } 后端代码(Controller)
/** * 查询支付状态 * @param out_trade_no * @return */ @RequestMapping("/queryPayStatus") public Result queryPayStatus(String out_trade_no){ Result result=null; int x = 0; while(true){ //调用查询接口 Map map = weixinPayService.queryPayStatus(out_trade_no); if(map==null){ //出错 result=new Result(false, "支付出错"); break; } if(map.get("trade_state").equals("SUCCESS")){ //如果成功 result=new Result(true, "支付成功"); break; } try { Thread.sleep(3000);//间隔三秒 } catch (InterruptedException e) { e.printStackTrace(); } //为了不让循环无休止地运行，我们定义一个循环变量，如果这个变量超过了这个值则退出循环，设置时间为5分钟 x++; if(x>=100){ result=new Result(false, "二维码超时"); //1.调用微信的关闭订单接口 Map payresult = weixinPayService.closePay(out_trade_no); if( !"SUCCESS".equals(payresult.get("result_code")) ){//如果返回结果是正常关闭 if("ORDERPAID".equals(payresult.get("err_code"))){ result=new Result(true, "支付成功"); seckillOrderService.saveOrderFromRedisToDb(userId, Long.valueOf(out_trade_no), map.get("transaction_id")); } } if(result.isSuccess()==false){ System.out.println("超时，取消订单"); //2.调用删除 seckillOrderService.deleteOrderFromRedis(userId, Long.valueOf(out_trade_no)); } break; } } return result; } 前端js
Controller.js
//查询支付状态 queryPayStatus=function(out_trade_no){ payService.queryPayStatus(out_trade_no).success( function(response){ if(response.success){ location.href="paysuccess.html"; }else{ if(response.message=='二维码超时'){ location.href="payTimeOut.html"; }else{ location.href="payfail.html"; } } } ); } Service.js
修改createNative方法
//本地生成二维码 $scope.createNative=function(){ payService.createNative().success( function(response){ .......... queryPayStatus(response.out_trade_no);//查询支付状态 } ); } 关闭微信扫码支付
后端代码(ServiceImpl)
@Override public Map closePay(String out_trade_no) { Map param=new HashMap(); param.put("appid", appid);//公众账号ID param.put("mch_id", partner);//商户号 param.put("out_trade_no", out_trade_no);//订单号 param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串 String url="https://api.mch.weixin.qq.com/pay/closeorder"; try { String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey); HttpClient client=new HttpClient(url); client.setHttps(true); client.setXmlParam(xmlParam); client.post(); String result = client.getContent(); Map map = WXPayUtil.xmlToMap(result); System.out.println(map); return map; } catch (Exception e) { e.printStackTrace(); return null; } } 后端代码(Controller)
修改queryPayStatus方法前端代码
修改queryPayStatus方法