需求分析与实现思路
在支付页面上生成支付二维码，并显示订单号和金额
用户拿出手机,打开微信扫描页面上的二维码,然后在微信中完成支付
实现思路：
我们通过 HttpClient 工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder
具体参数参见“统一下单”API, 构建参数发送给统一下单的 url ，返回的信息中有支付 url，根据 url 生成二维码，显示的订单号和金额也在返回的信息中。
后端代码实现
（1）在 pinyougou-pay-interface 创建包com.pinyougou.pay.service ，包下建立接口
package com.pinyougou.pay.service; import java.util.Map; /** * 微信支付接口 * @author Administrator * */ public interface WeixinPayService { /** * 生成微信支付二维码 * @param out_trade_no 订单号 * @param total_fee 金额(分) * @return */ public Map createNative(String out_trade_no,String total_fee); }
（2）pinyougou-pay-service 创建 com.pinyougou.pay.service.impl 包，新建类
@Service public 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<String,String> param=new HashMap();//创建参数 param.put("appid", appid);//公众号 param.put("mch_id", partner);//商户号 param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串param.put("body", "品优购");//商品描述param.put("out_trade_no", out_trade_no);//商户订单号param.put("total_fee",total_fee);//总金额（分）param.put("spbill_create_ip", "127.0.0.1");//IPparam.put("notify_url", "http://test.itcast.cn");//回调地址(随便写)param.put("trade_type", "NATIVE");//交易类型try {//2.生成要发送的 xmlString xmlParam = WXPayUtil.generateSignedXml(param, partnerkeySystem.out.println(xmlParam);HttpClient client=newHttpClient("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<String, String> resultMap = WXPayUtil.xmlToMap(result);Map<String, String> 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<>(); } } }
（3）pinyougou-cart-web 创建 PayController.java
/** * 支付控制层 * @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"); } }
这里我们订单号通过分布式 ID 生成器生成，金额暂时写死，后续开发我们再对接业务系统得到订单号和金额
浏览器测试
前端代码实现
在 pinyougou-cart-web 创建 payService.js
app.service('payService',function($http){ //本地支付 this.createNative=function(){ return $http.get('pay/createNative.do'); } });
在 pinyougou-cart-web 创建 payController.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'),size:250,level:'H',value:response.code_url}); }); } } );
修改 pay.html ,引入 js
<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script> <script type="text/javascript" src="js/base.js"> </script> <script type="text/javascript" src="js/service/payService.js"> </script> <script type="text/javascript" src="js/controller/payController.js"> </script> <script type="text/javascript" src="plugins/qrious.min.js"></script>
指令
<body ng-app="pinyougou" ng-controller="payController" ng-init="createNative()">
设置二维码图片的 ID
<p class="red"></p> <div class="fl code"> <img id="qrious"> <div class="saosao"> <p>请使用微信扫一扫</p> <p>扫描二维码支付</p> </div> </div>
显示订单号
订单号：{{out_trade_no}}
显示金额
<em class="orange money">￥{{money}}</em>元
文章知识点与官方知识档案匹配，可进一步学习相关知识
