---

效果图

前言

由于使用到的微信小程序需要实现支付功能，而微信支付的申请手续较为繁琐，所以使用了支付宝支付，但是微信小程序正常情况不支持支付宝支付，所以我使用了web-view内嵌了支付宝的h5支付。

---

1.Springboot支付宝沙箱支付：

不会使用支付宝沙箱支付的同学可以看这篇文章Springboot支付宝沙箱支付

#支付宝环境
alipay:
  url: https://openapi.alipaydev.com/gateway.do
  app_id: 商户号
  app_private_id: 商户私钥
  format: json
  charset: UTF-8 
  alipay_public_key: 商户公钥
  sign_type: RSA2
  return_url: 支付完成后的地址
  notify_url: 回调地址


    @RequestMapping("/paytest")
    @IgnoreAuth
    public   void   alipay (HttpServletRequest httpRequest,
                            HttpServletResponse httpResponse)   throws IOException {



        //获得初始化的AlipayClient
        AlipayClient alipayClient =  new DefaultAlipayClient( Constant.URL , Constant.APP_ID, Constant.APP_PRIVATE_KEY, Constant.FORMAT,
                Constant.CHARSET, Constant.ALIPAY_PUBLIC_KEY, Constant.SIGN_TYPE);
        //创建API对应的request
        AlipayTradePagePayRequest alipayRequest =  new  AlipayTradePagePayRequest();
        alipayRequest.setReturnUrl(Constant.RETURNURL);
        //在公共参数中设置回跳和通知地址
        alipayRequest.setNotifyUrl(Constant.NOTIFYURL);
        String outTradeNo = RandomUtil.randomNumbers(15);
        String totalAmount = "88.8";
        alipayRequest.setBizContent( "{"  +
                "    \"out_trade_no\":\""+outTradeNo+"\","  +
                "    \"product_code\":\"FAST_INSTANT_TRADE_PAY\","  +
                "    \"total_amount\":"+totalAmount+","  +
                "    \"subject\":\"Iphone6 16G\","  +
                "    \"body\":\"Iphone6 16G\","  +
//                "    \"passback_params\":\"merchantBizType%3d3C%26merchantBizNo%3d2016010101111\","  +
                "    \"extend_params\":{"  +
                "    \"sys_service_provider_id\":\"2088511833207846\""  +
                "    }" +
                "  }" );
        //填充业务参数
        String form= "" ;
        try  {
            //调用SDK生成表单
            form = alipayClient.pageExecute(alipayRequest).getBody();
        }  catch  (AlipayApiException e) {
            e.printStackTrace();
        }
        httpResponse.setContentType( "text/html;charset="  +  Constant.CHARSET);
        //直接将完整的表单html输出到页面
        httpResponse.getWriter().write(form);
        httpResponse.getWriter().flush();
        httpResponse.getWriter().close();
    }

2.小程序拉起支付

代码如下：

<web-view src="http://localhost:8080/back/app/alipay/paytest" > </web-view>

到此处小程序可以完成支付，但是却无法返回到小程序目标界面，只能到返回return_url的web界面

---

3.web界面返回小程序

我们可以通过访问一个使微信小程序重定向的h5界面，来让小程序返回到目标界面

代码如下：

<!-- h5端 HTML和JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
     wx.miniProgram.redirectTo({
     //url 为小程序的目标界面
      url:"/pages/inner/index?source=123"
     })

</script>

这时只要将return_url改为此界面的地址即可。

---