微信二维码支付快速入门
目錄
一、二維碼生成插件qrious
二、HttpClient
三.微信掃碼支付
1.申請步驟
2.開發(fā)文檔
四、入門Demo
1.工程搭建
2.myStudy-pay-interface
3.myStudy--pay-service
(1)引入pom依賴
(2)創(chuàng)建配置文件
(3)導(dǎo)入上文提到的HttpClient工具類
(4)創(chuàng)建WeixinPayService的實(shí)現(xiàn)類
4.myStudy--pay-web
(1)引入pom依賴
(2)創(chuàng)建配置文件
(3)創(chuàng)建返回結(jié)果集對象
(4)創(chuàng)建Controller層對象
(5)編寫前端
(6)具體流程
一、二維碼生成插件qrious
? qrious是一款基于HTML5 Canvas的純JS二維碼生成插件。通過qrious.js可以快速生成各種二維碼,你可以控制二維碼的尺寸顏色,還可以將生成的二維碼進(jìn)行Base64編碼。
qrious.js二維碼插件的可用配置參數(shù)如下:
| background | String | "white" | 二維碼的背景顏色。 |
| foreground | String | "black" | 二維碼的前景顏色。 |
| level | String | "L" | 二維碼的誤差校正級別(L, M, Q, H)。 |
| mime | String | "image/png" | 二維碼輸出為圖片時(shí)的MIME類型。 |
| size | Number | 100 | 二維碼的尺寸,單位像素。 |
| value | String | "" | 需要編碼為二維碼的值 |
二維碼容錯(cuò)級別介紹
-
L級(低) 7%的碼字可以被恢復(fù)。
-
M級(中) 的碼字的15%可以被恢復(fù)。
-
Q級(四分)的碼字的25%可以被恢復(fù)。
-
H級(高) 的碼字的30%可以被恢復(fù)。
下面的代碼即可生成一個(gè)簡單的二維碼:
<html> <head> <title>二維碼入門小demo</title> </head> <body> <img id="qrious"> <script src="qrious.min.js"></script> <script>var qr = new QRious({element:document.getElementById('qrious'),size:250, ? level:'H', ? value:'http://www.baidu.com'}); </script> </body> </html>二、HttpClient
? HttpClient是Apache Jakarta Common下的子項(xiàng)目,用來提供高效的、最新的、功能豐富的支持HTTP協(xié)議的客戶端編程工具包,并且它支持HTTP協(xié)議最新的版本和建議。HttpClient已經(jīng)應(yīng)用在很多的項(xiàng)目中,比如Apache Jakarta上很著名的另外兩個(gè)開源項(xiàng)目Cactus和HTMLUnit都使用了HttpClient。
? HttpClient通俗的講就是模擬了瀏覽器的行為,如果我們需要在后端向某一地址提交數(shù)據(jù)獲取結(jié)果,就可以使用HttpClient.
? 我們這里這里為了簡化HttpClient的使用,提供了工具類HttpClient(對原生HttpClient進(jìn)行了封裝)
public class HttpClient {private String url;private Map<String, String> param;private int statusCode;private String content;private String xmlParam;private boolean isHttps;public boolean isHttps() {return isHttps;}public void setHttps(boolean isHttps) {this.isHttps = isHttps;}public String getXmlParam() {return xmlParam;}public void setXmlParam(String xmlParam) {this.xmlParam = xmlParam;}public HttpClient(String url, Map<String, String> param) {this.url = url;this.param = param;}public HttpClient(String url) {this.url = url;}public void setParameter(Map<String, String> map) {param = map;}public void addParameter(String key, String value) {if (param == null)param = new HashMap<String, String>();param.put(key, value);}public void post() throws ClientProtocolException, IOException {HttpPost http = new HttpPost(url);setEntity(http);execute(http);}public void put() throws ClientProtocolException, IOException {HttpPut http = new HttpPut(url);setEntity(http);execute(http);}public void get() throws ClientProtocolException, IOException {if (param != null) {StringBuilder url = new StringBuilder(this.url);boolean isFirst = true;for (String key : param.keySet()) {if (isFirst)url.append("?");elseurl.append("&");url.append(key).append("=").append(param.get(key));}this.url = url.toString();}HttpGet http = new HttpGet(url);execute(http);}/*** set http post,put param*/private void setEntity(HttpEntityEnclosingRequestBase http) {if (param != null) {List<NameValuePair> nvps = new LinkedList<NameValuePair>();for (String key : param.keySet())nvps.add(new BasicNameValuePair(key, param.get(key))); // 參數(shù)http.setEntity(new UrlEncodedFormEntity(nvps, Consts.UTF_8)); // 設(shè)置參數(shù)}if (xmlParam != null) {http.setEntity(new StringEntity(xmlParam, Consts.UTF_8));}}private void execute(HttpUriRequest http) throws ClientProtocolException,IOException {CloseableHttpClient httpClient = null;try {if (isHttps) {SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {// 信任所有public boolean isTrusted(X509Certificate[] chain,String authType)throws CertificateException {return true;}}).build();SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext);httpClient = HttpClients.custom().setSSLSocketFactory(sslsf).build();} else {httpClient = HttpClients.createDefault();}CloseableHttpResponse response = httpClient.execute(http);try {if (response != null) {if (response.getStatusLine() != null)statusCode = response.getStatusLine().getStatusCode();HttpEntity entity = response.getEntity();// 響應(yīng)內(nèi)容content = EntityUtils.toString(entity, Consts.UTF_8);}} finally {response.close();}} catch (Exception e) {e.printStackTrace();} finally {httpClient.close();}}public int getStatusCode() {return statusCode;}public String getContent() throws ParseException, IOException {return content;}該工具類的使用步驟:
HttpClient client=new HttpClient(請求的url地址); client.setHttps(true);//是否是https協(xié)議 client.setXmlParam(xmlParam);//發(fā)送的xml數(shù)據(jù) client.post();//執(zhí)行post請求 String result = client.getContent(); //獲取結(jié)果三.微信掃碼支付
? 微信掃碼支付是商戶系統(tǒng)按微信支付協(xié)議生成支付二維碼,用戶再用微信“掃一掃”完成支付的模式。該模式適用于PC網(wǎng)站支付、實(shí)體店單品或訂單支付、媒體廣告支付等場景。
1.申請步驟
https://pay.weixin.qq.com
2.開發(fā)文檔
在線微信支付開發(fā)文檔:
https://pay.weixin.qq.com/wiki/doc/api/index.html
appid:微信公眾賬號或開放平臺APP的唯一標(biāo)識
mch_id:商戶號 (配置文件中的partner)
partnerkey:商戶密鑰
sign:數(shù)字簽名, 根據(jù)微信官方提供的密鑰和一套算法生成的一個(gè)加密信息, 就是為了保證交易的安全性
微信支付SDK
微信支付提供了SDK, 下載后打開源碼,install到本地Maven倉庫即可使用。
SDK中有以下功能較為常用:
(1)獲取隨機(jī)字符串
WXPayUtil.generateNonceStr()(2)Map轉(zhuǎn)換為XML字符串(自動添加簽名)
WXPayUtil.generateSignedXml(param, partnerkey)(3)XML字符串轉(zhuǎn)換為Map
WXPayUtil.xmlToMap(result)注意:
-
微信二維碼需要接受xml格式的數(shù)據(jù),所以我們可以將數(shù)據(jù)封裝到Map中并用SDK的方法轉(zhuǎn)為xml字符串
-
在查詢訂單狀態(tài)時(shí),返回的也是xml格式的數(shù)據(jù),需要將xml字符串轉(zhuǎn)換為Map進(jìn)行處理
四、入門Demo
1.工程搭建
這里我們將微信二維碼服務(wù)搭建在dubbo服務(wù)中,并由web模塊通過zookeeper進(jìn)行調(diào)用
(1)建立支付服務(wù)接口模塊myStudy-pay-interface (jar)
(2)建立支付服務(wù)實(shí)現(xiàn)模塊myStudy--pay-service (war)
(3)建立支付調(diào)用模塊myStudy--pay-web (war)
2.myStudy-pay-interface
WeiXinPayService.java
/*** 微信支付接口** @author Administrator*/ public interface WeixinPayService { ?/*** 生成微信支付二維碼** @param out_trade_no 訂單號* @param total_fee ? 金額(分)* @return*/public Map createNative(String out_trade_no, String total_fee); ?/*** 查詢支付狀態(tài)* @param out_trade_no*/public Map queryPayStatus(String out_trade_no); }3.myStudy--pay-service
(1)引入pom依賴
? ? <!-- 集中定義依賴版本號 --><properties><junit.version>4.12</junit.version><spring.version>4.2.4.RELEASE</spring.version><servlet-api.version>2.5</servlet-api.version><dubbo.version>2.8.4</dubbo.version><zookeeper.version>3.4.7</zookeeper.version><zkclient.version>0.1</zkclient.version></properties> ?<dependencies><!-- 微信SDK --><dependency><groupId>com.github.wxpay</groupId><artifactId>wxpay-sdk</artifactId><version>0.0.3</version></dependency><!-- httpclient --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.3</version></dependency> ?<dependency><groupId>com.yfy</groupId><artifactId>myStudy-pay-interface</artifactId><version>1.0-SNAPSHOT</version></dependency><!-- Spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jms</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId><version>${spring.version}</version></dependency><!-- dubbo相關(guān) --><dependency><groupId>com.alibaba</groupId><artifactId>dubbo</artifactId><version>${dubbo.version}</version></dependency><dependency><groupId>org.apache.zookeeper</groupId><artifactId>zookeeper</artifactId><version>${zookeeper.version}</version></dependency><dependency><groupId>com.github.sgroschupf</groupId><artifactId>zkclient</artifactId><version>${zkclient.version}</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>${junit.version}</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><scope>provided</scope><version>${servlet-api.version}</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.28</version></dependency><dependency><groupId>javassist</groupId><artifactId>javassist</artifactId><version>3.11.0.GA</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.10</version></dependency></dependencies> ? ?<build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><!-- 指定端口 --><port>9000</port><!-- 請求路徑 --><path>/</path></configuration></plugin></plugins></build>(2)創(chuàng)建配置文件
applicationContext-service.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> ?<context:property-placeholder location="classpath*:config/weixinpay.properties" /> ?<dubbo:protocol name="dubbo" port="20880"></dubbo:protocol><dubbo:application name="myStudy-pay-service"/><dubbo:registry address="zookeeper://192.168.25.132:2181"/><dubbo:annotation package="com.yfy.service.impl"/><dubbo:provider timeout="50000"></dubbo:provider> ? </beans>web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"version="2.5"> <!-- 加載spring容器 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath*:spring/applicationContext*.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener></web-app>wexinpay.properties
#appid: 微信公眾賬號或開放平臺APP的唯一標(biāo)識 #partner:財(cái)付通平臺的商戶賬號 #partnerkey:財(cái)付通平臺的商戶密鑰 appid=wx8397f8696b538317 partner=1473426802 partnerkey=T6m9iK73b0kn9g5v426MKfHQH7X8rKwb(3)導(dǎo)入上文提到的HttpClient工具類
此處代碼略
(4)創(chuàng)建WeixinPayService的實(shí)現(xiàn)類
package com.yfy.service.impl; ? import com.alibaba.dubbo.config.annotation.Service; import com.github.wxpay.sdk.WXPayUtil; import com.yfy.service.WeixinPayService; import com.yfy.util.HttpClient; import org.springframework.beans.factory.annotation.Value; ? import java.util.HashMap; import java.util.Map; ? @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.創(chuàng)建參數(shù)Map<String, String> param = new HashMap();//創(chuàng)建參數(shù)param.put("appid", appid);//公眾號param.put("mch_id", partner);//商戶號param.put("nonce_str", WXPayUtil.generateNonceStr());//隨機(jī)字符串param.put("body", "QQ會員充值");//商品描述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://www.baidu.com");//回調(diào)地址(隨便寫)param.put("trade_type", "NATIVE");//交易類型try {//2.生成要發(fā)送的xmlString 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.獲得結(jié)果,此處我們只需要其中的幾個(gè)參數(shù),自定義一個(gè)Map接收String result = client.getContent();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<>();}} ?/*** 查詢狀態(tài)* @param out_trade_no* @return*/@Overridepublic Map queryPayStatus(String out_trade_no) {Map param = new HashMap();param.put("appid", appid);//公眾賬號IDparam.put("mch_id", partner);//商戶號param.put("out_trade_no", out_trade_no);//訂單號param.put("nonce_str", WXPayUtil.generateNonceStr());//隨機(jī)字符串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<String, String> map = WXPayUtil.xmlToMap(result);System.out.println(map);return map;} catch (Exception e) {e.printStackTrace();return null;} ?} }4.myStudy--pay-web
(1)引入pom依賴
<dependencies><dependency><groupId>com.yfy</groupId><artifactId>myStudy-pay-interface</artifactId><version>1.0-SNAPSHOT</version></dependency><!-- Spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>4.2.4.RELEASE</version></dependency><!-- dubbo相關(guān) --><dependency><groupId>com.alibaba</groupId><artifactId>dubbo</artifactId><version>2.8.4</version></dependency><dependency><groupId>org.apache.zookeeper</groupId><artifactId>zookeeper</artifactId><version>3.4.7</version></dependency><dependency><groupId>com.github.sgroschupf</groupId><artifactId>zkclient</artifactId><version>0.1</version></dependency> ?<!-- fastjson --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.28</version></dependency><dependency><groupId>javassist</groupId><artifactId>javassist</artifactId><version>3.11.0.GA</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.10</version></dependency> ?<dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency></dependencies> ?<build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><!-- 指定端口 --><port>9100</port><!-- 請求路徑 --><path>/</path></configuration></plugin></plugins></build>(2)創(chuàng)建配置文件
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"><mvc:annotation-driven><mvc:message-converters register-defaults="true"><bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"> ?<property name="supportedMediaTypes" value="application/json"/><property name="features"><array><value>WriteMapNullValue</value><value>WriteDateUseDateFormat</value></array></property></bean></mvc:message-converters> ?</mvc:annotation-driven> ? ?<!-- 引用dubbo 服務(wù) --><dubbo:application name="myStudy-pay-web" /><dubbo:registry address="zookeeper://192.168.25.132:2181"/><dubbo:annotation package="com.yfy.controller" /> ? </beans>web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"version="2.5"> <!-- 解決post亂碼 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param><init-param> ?<param-name>forceEncoding</param-name> ?<param-value>true</param-value> ?</init-param> ?</filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping> <servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- 指定加載的配置文件 ,通過參數(shù)contextConfigLocation加載--><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/springmvc.xml</param-value></init-param></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping> ? </web-app>(3)創(chuàng)建返回結(jié)果集對象
Result.java
public class Result implements Serializable{private boolean success;private String message; ?//...get()、set()方法 }(4)創(chuàng)建Controller層對象
PayController.java
/*** 支付控制層** @author Administrator*/ @RestController @RequestMapping("/pay") public class PayController { ?@Referenceprivate WeixinPayService weixinPayService; ?/*** 生成二維碼** @return*/@RequestMapping("/createNative")public Map createNative() {//這里我們訂單號通過uuid生成,金額為1分UUID uuid = UUID.randomUUID();System.out.println(uuid);return weixinPayService.createNative(uuid.toString().substring(0, 18), "1");} ?/*** 查詢支付狀態(tài)** @param out_trade_no* @return*/@RequestMapping("/queryPayStatus")public Result queryPayStatus(String out_trade_no) {Result result = null;int x = 0;while (true) {//調(diào)用查詢接口Map<String, String> map = weixinPayService.queryPayStatus(out_trade_no);if (map == null) {//出錯(cuò)result = new Result(false, "支付出錯(cuò)");break;}if (map.get("trade_state").equals("SUCCESS")) {//如果成功result = new Result(true, "支付成功");break;}try {Thread.sleep(3000);//間隔三秒} catch (InterruptedException e) {e.printStackTrace();}//為了不讓循環(huán)無休止地運(yùn)行,我們定義一個(gè)循環(huán)變量//如果這個(gè)變量超過了這個(gè)值則退出循環(huán),設(shè)置時(shí)間為5分鐘x++;if (x >= 100) {result = new Result(false, "二維碼超時(shí)");break;}}return result;} }(5)編寫前端
這里我們使用angularjs+qrious插件,先導(dǎo)入這兩個(gè)插件
1)分層創(chuàng)建angularjs
base.js
var app = angular.module("myApp", []);payService.js
app.service("payService", function ($http) { ?//生成支付的二維碼this.createNative=function () {return $http.get('pay/createNative.do');}//查詢驗(yàn)證碼的支付狀態(tài)this.queryPayStatus = function (out_trade_no) {return $http.get('pay/queryPayStatus.do?out_trade_no=' + out_trade_no);} ? })payController.js
app.controller('payController', function ($scope, payService,$location) {//本地生成二維碼$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}); ?//查詢訂單狀態(tài)queryPayStatus(response.out_trade_no);});} ?//查詢支付狀態(tài)queryPayStatus=function(out_trade_no){payService.queryPayStatus(out_trade_no).success(function(response){if(response.success){location.href="paySuccess.html#?money="+$scope.money;}else{if(response.message=='二維碼超時(shí)'){$scope.createNative();//重新生成二維碼}else{location.href="payFail.html";}}});} ?//獲取金額$scope.getMoney=function(){return $location.search()['money'];} });2)展示頁面
pay.html
<script src="js/angular.js"></script> <script src="js/base.js"></script> <script src="js/service/payService.js"></script> <script src="js/controller/payController.js"></script> <script src="plugins/qrious.min.js"></script> ? <body ng-app="myApp" ng-controller="payController"> <input type="button" value="提交訂單" ng-click="createNative()"><br/> <!-- 二維碼圖片 --> <img id="qrious"><br/> ? 訂單號:{{out_trade_no}} <br/> <em class="orange money">¥{{money}}</em>元 </body>paySuccess.html
<script src="js/angular.js"></script> <script src="js/base.js"></script> <script src="js/service/payService.js"></script> <script src="js/controller/payController.js"></script> ? <body ng-app="myApp" ng-controller="payController"> <h3>支付成功</h3> <p>支付金額:¥{{getMoney()}}元</p> </body>(6)具體流程
1)訪問 http://localhost:9100/pay.html
2)點(diǎn)擊提交訂單 生成二維碼
3)掃描二維碼支付,頁面跳轉(zhuǎn)至 http://localhost:9100/paySuccess.html#?money=0.01(代碼中將支付金額設(shè)置為了1分錢)
注意:如果一直沒有掃描二維碼且沒有跳轉(zhuǎn)頁面,每隔5分鐘二維碼會重新生成一個(gè),若關(guān)閉了頁面沒有支付,前端也就不會訪問支付訂單的交易詳情了
?
總結(jié)
以上是生活随笔為你收集整理的微信二维码支付快速入门的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 跨域解决方案之CORS
- 下一篇: 分布式事务的解决方案