微信公众号支付开发教程之页面调用微信支付js完成支付过程(补充1)

一、调用微信的JS文件

1.首先要绑定【JS接口安全域名】，“公众号设置”的“功能设置”中

2.引入JS文件

备注：支持使用 AMD/CMD 标准模块加载方法加载

1 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，这里只写支付的
});

4.通过ready接口处理成功验证

 wx.ready(function(){
    wx.hideOptionMenu();//隐藏右边的一些菜单
 });

二、wx.config中的签名

1.首先要获取到access token：公众号的全局唯一票据 。然后根据access token获取到jsapi_ticket：公众号用于调用微信JS接口的临时票据。再用jsapi_ticket获取到签名。

2.获取access token：文档：url:http://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html

package com.test;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
 
public class TestAcessToken {
    /***
     * 模拟get请求
     * @param url
     * @param charset
     * @param timeout
     * @return
     */
     public static String sendGet(String url, String charset, int timeout)
      {
        String result = "";
        try
        {
          URL u = new URL(url);
          try
          {
            URLConnection conn = u.openConnection();
            conn.connect();
            conn.setConnectTimeout(timeout);
            BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
            String line="";
            while ((line = in.readLine()) != null)
            {
             
              result = result + line;
            }
            in.close();
          } catch (IOException e) {
            return result;
          }
        }
        catch (MalformedURLException e)
        {
          return result;
        }
       
        return result;
      }
 
     
    /**
     * @param args
     */
    public static void main(String[] args) {
        String appid="你公众号基本设置里的应用id";//应用ID
        String appSecret="你公众号基本设置里的应用密钥";//(应用密钥)
        String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";
        String backData=TestAcessToken.sendGet(url, "utf-8", 10000);
        System.out.println("返回："+backData);
    }
 
}

3.获取jsapi_ticket

package com.test.util;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import net.sf.json.JSONObject;
import com.test.weixin.TestAcessToken;
/***
 * @author V型知识库  www.vxzsk.com
 *
 */
public class JsapiTicketUtil {
     
    /***
     * 模拟get请求
     * @param url
     * @param charset
     * @param timeout
     * @return
     */
     public static String sendGet(String url, String charset, int timeout)
      {
        String result = "";
        try
        {
          URL u = new URL(url);
          try
          {
            URLConnection conn = u.openConnection();
            conn.connect();
            conn.setConnectTimeout(timeout);
            BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
            String line="";
            while ((line = in.readLine()) != null)
            {
             
              result = result + line;
            }
            in.close();
          } catch (IOException e) {
            return result;
          }
        }
        catch (MalformedURLException e)
        {
          return result;
        }
       
        return result;
      }
     /***
      * 获取acess_token 
      * 来源www.vxzsk.com
      * @return
      */
     public static String getAccessToken(){
            String appid="你公众号基本设置里的应用id";//应用ID
            String appSecret="你公众号基本设置里的应用密钥";//(应用密钥)
            String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";
            String backData=TestAcessToken.sendGet(url, "utf-8", 10000);
            String accessToken = (String) JSONObject.fromObject(backData).get("access_token");  
            return accessToken;
     }
    /***
      * 获取jsapiTicket
      * 来源 www.vxzsk.com
      * @return
      */
    public static String getJSApiTicket(){ 
        //获取token
        String acess_token= JsapiTicketUtil.getAccessToken();
           
        String urlStr = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";  
        String backData=TestAcessToken.sendGet(urlStr, "utf-8", 10000);  
        String ticket = (String) JSONObject.fromObject(backData).get("ticket");  
        return  ticket;  
           
    }  
     public static void main(String[] args) {
        String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
        System.out.println("调用微信jsapi的凭证票为："+jsapiTicket);
        }
}

注意：jsapi_ticket和access token为7200的有效时间。7200后要重新获取。

4.算签名

package com.test.util;
/***
 * V型知识库 www.vxzsk.com
 */
import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;  
  public class Sign {
    public static void main(String[] args) {
        String jsapi_ticket =JsapiTicketUtil.getJSApiTicket();;
        // 注意 URL 一定要动态获取，不能 hardcode
        String url = "https://www.vxzsk.com/xx/x.do";//url是你请求的一个action或者controller地址，并且方法直接跳转到使用jsapi的jsp界面
        Map<String, String> ret = sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
        }
    };
  public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";
 
        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                  "&noncestr=" + nonce_str +
                  "&timestamp=" + timestamp +
                  "&url=" + url;
        System.out.println(string1);
 
        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        }
        catch (NoSuchAlgorithmException e)
        {
            e.printStackTrace();
        }
        catch (UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }
 
        ret.put("url", url);
        ret.put("jsapi_ticket", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);
 
        return ret;
    }
 
    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }
 
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }
 
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

算签名可参考https://www.vxzsk.com/4/cate.html

5.传递到前端页面

把随机字符串：nonce_str，timestamp时间戳，appId，签名，包装为prepay_id=prepay_id的预支付ID传递到前端。

wx.config({
    appId: '${appId}', // 必填，公众号的唯一标识
    timestamp: ${timestamp}, // 必填，生成签名的时间戳
    nonceStr: '${nonceStr}', // 必填，生成签名的随机串
    signature: '${signature}',// 必填，签名，见附录1
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

6.现在就可以使用微信JS了。

三、调用微信支付

假如已经获取到了预支付订单的ID，prepay_id，

/**
 * 微信支付对象
 * @author V型知识库 www.vxzsk.com
 *
 */
public class WxPay implements Serializable {
    private static final long serialVersionUID = 3843862351717555525L;
    private String paySign;
    private String prepay_id;
    private String nonce_str;
    private String timeStamp;
    
    //get，set方法
}

/**
     * 获取页面上weixin支付JS所需的参数
     * @param map
     * @return
     */
    private WxPay getWxPayInfo(String prepay_id) {
        String nonce =  UUID.randomUUID().toString().replace("-","");
        String timeStamp = "";//System.currentTime方法可获取
        //再算签名
        String newPrepay_id = "prepay_id="+prepay_id;
        String args = "appId="+Constants.appid
                      +"&nonceStr="+nonce
                      +"&package="+newPrepay_id
                      +"&signType=MD5"
                      +"&timeStamp="+timeStamp
                      +"&key="+key;
        String paySign = SignUtil.getSign(args, "MD5");
        WxPay wxPay = new WxPay();
        wxPay.setNonce_str(nonce);
        wxPay.setPaySign(paySign);
        wxPay.setPrepay_id(newPrepay_id);
        wxPay.setTimeStamp(timeStamp);
        return wxPay;
    }

SignUtil.getSign方法

/**
     * 获取签名
     * @param payInfo
     * @return
     * @throws Exception
     */
    public String getSign(PayInfo payInfo) throws Exception {
        String signTemp = "appid="+payInfo.getAppid()
                 +"&attach="+payInfo.getAttach()
                 +"&body="+payInfo.getBody()
                 +"&device_info="+payInfo.getDevice_info()
                 +"&mch_id="+payInfo.getMch_id()
                 +"&nonce_str="+payInfo.getNonce_str()
                 +"&notify_url="+payInfo.getNotify_url()
                 +"&openid="+payInfo.getOpenid()
                 +"&out_trade_no="+payInfo.getOut_trade_no()
                 +"&spbill_create_ip="+payInfo.getSpbill_create_ip()
                 +"&total_fee="+payInfo.getTotal_fee()
                 +"&trade_type="+payInfo.getTrade_type()
                 +"&key="+Constants.key; //这个key注意
        
       MessageDigest md5 = MessageDigest.getInstance("MD5");
       md5.reset();
       md5.update(signTemp.getBytes("UTF-8"));
       String sign = CommonUtil.byteToStr(md5.digest()).toUpperCase();
       return sign;
    }

微信支付的最后一步：js调用

wx.chooseWXPay({
    timestamp: json.timeStamp,
    nonceStr: json.nonce_str, 
    package: json.prepay_id,
    signType: 'MD5',
    paySign: json.paySign, 
    success: function (res) {
        alert("支付成功");
    }
});

ok 大功告成啦