微信公众号支付（三）：页面调用微信支付JS并完成支付

一、调用微信的JS文件

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

2.引入JS文件

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

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

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

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

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

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

二、wx.config中的签名

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

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

1publicstaticToken getToken(String appid, String appsecret) {2Token token =null;3String requestUrl = Constants.token_url.replace("APPID", appid).replace("APPSECRET", appsecret);4//发起GET请求获取凭证5JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET",null);67if(null!=jsonObject) {8try{9token =newToken();10token.setAccessToken(jsonObject.getString("access_token"));11token.setExpiresIn(jsonObject.getInt("expires_in"));12}catch(JSONException e) {13token =null;14//获取token失败15log.error("获取token失败 "+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));16}17}18returntoken;19}

有些方法在前两篇中。

3.获取jsapi_ticket

1publicstaticTicket getTicket() {2//Constants.ticket_url =https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi3String requestUrl = Constants.ticket_url.replace("ACCESS_TOKEN", TokenThread.accessToken.getAccessToken());4//发起GET请求获取凭证5JSONObject jsonObject = CommonUtil.httpsRequestToJsonObject(requestUrl, "GET",null);6Ticket ticket =null;7String jsapi_ticket = "";8intexpires_in = 0;9if(null!=jsonObject) {10try{11jsapi_ticket = jsonObject.getString("ticket");12expires_in = jsonObject.getInt("expires_in");13ticket =newTicket();14ticket.setTicket(jsapi_ticket);15ticket.setExpiresIn(expires_in);16}catch(JSONException e) {17//获取失败18log.error("获取jsapi_ticket失败"+jsonObject.getInt("errcode")+"，"+jsonObject.getString("errmsg"));19}20}21returnticket;22}

注意：jsapi_ticket和access token为7200的有效时间。7200后要重新获取，我是放在线程里面死循环的。

4.算签名

1/**2* 签名实体类3*@authorrory.wu4*5*/6publicclassSignatureimplementsSerializable {7PRivatestaticfinallongserialVersionUID = -7799030247222127708L;89privateString url;10privateString jsapi_ticket;11privateString nonceStr;12privateString timestamp;13privateString signature;1415//下面是getset方法16}

1/**2* 算出签名3*@paramjsapi_ticket4*@paramurl 业务中调用微信js的地址5*@return6*/7publicstaticSignature sign(String jsapi_ticket, String url) {8String nonce_str =CommonUtil.create_nonce_str();9String timestamp =CommonUtil.create_timestamp();10String string1;11String signature = "";1213//注意这里参数名必须全部小写，且必须有序14string1 = "jsapi_ticket=" + jsapi_ticket +15"&noncestr=" + nonce_str +16"&timestamp=" + timestamp +17"&url=" +url;18try19{20MessageDigest crypt = MessageDigest.getInstance("SHA-1");21crypt.reset();22crypt.update(string1.getBytes("UTF-8"));23signature =CommonUtil.byteToStr(crypt.digest());24}25catch(NoSuchAlgorithmException e)26{27e.printStackTrace();28}29catch(UnsupportedEncodingException e)30{31e.printStackTrace();32}3334Signature result =newSignature();35result.setUrl(url);36result.setJsapi_ticket(jsapi_ticket);37result.setNonceStr(nonce_str);38result.setTimestamp(timestamp);39result.setSignature(signature);4041returnresult;42}

注意：有些方法在前两篇中

这样就算出签名了。

5.传递到前端页面

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

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

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

三、调用微信支付

在前一篇中已经获取到了预支付订单的ID，prepay_id，

1/**2* 微信支付对象3*@authorrory.wu4*5*/6publicclassWxPayimplementsSerializable {7privatestaticfinallongserialVersionUID = 3843862351717555525L;8privateString paySign;9privateString prepay_id;10privateString nonce_str;11privateString timeStamp;1213//get，set方法14}

1/**2* 获取页面上weixin支付JS所需的参数3*@parammap4*@return5*/6privateWxPay getWxPayInfo(String prepay_id) {7String nonce = CommonUtil.create_nonce_str().replace("-", "");8String timeStamp =CommonUtil.create_timestamp();9//再算签名10String newPrepay_id = "prepay_id="+prepay_id;11String args = "appId="+Constants.appid12+"&nonceStr="+nonce13+"&package="+newPrepay_id14+"&signType=md5"15+"&timeStamp="+timeStamp16+"&key="+key;17String paySign = SignUtil.getSign(args, "MD5");18WxPay wxPay =newWxPay();19wxPay.setNonce_str(nonce);20wxPay.setPaySign(paySign);21wxPay.setPrepay_id(newPrepay_id);22wxPay.setTimeStamp(timeStamp);23returnwxPay;24}25

注意：有些方法在前2篇中。

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

1wx.chooseWXPay({2timestamp: json.timeStamp,3nonceStr: json.nonce_str,4package: json.prepay_id,5signType: 'MD5',6paySign: json.paySign,7success:function(res) {8alert("支付成功");9}10});

结束，微信支付全部结束啦，有问题可以留言找我哦，只会java的，88