您的位置：首页 > 移动开发 > 微信开发

微信支付开发

2016-07-25 14:30 295 查看

微信官方API文档:

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4

第三发开发【具体实现】

微信公众号 java-SDK

下载地址：

https://codeload.github.com/chanjarster/weixin-java-tools/legacy.zip/master

使用方法：(根据微信官方的api来调用，上面的提供了里面具体的方法)

下面是示例

页面：

step1:引入

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = "";
if (request.getServerPort() == 80) {
basePath = request.getScheme() + "://"
+ request.getServerName() + path + "/";
} else {
basePath = request.getScheme() + "://"
+ request.getServerName() + ":"
+ request.getServerPort() + path + "/";
}
%>

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css">
<title>讲座详情</title>
</head>
<body>

<header class="top-banner">
<img src="${imgbasepath }${info.lecture.pic}" />
<aside>${info.lecture.title }</aside>
</header>
<input type="hidden" id="lectureId" value="${info.lecture.id }"/>
<c:choose>
<c:when test="${info.isBuy }">
<section class="intro">
<div class="price-2">
<div>
￥<em><fmt:formatNumber type="number"
maxFractionDigits="0" value="${info.lecture.price}" /></em>.00
</div>
<span>已购买</span>
</div>
<c:choose>
<c:when test="${info.lecture.status == 0 }">
<button class="btn btn-3">已结束</button>
</c:when>
<c:otherwise>
<a href="<%=basePath%>/lecture/howJoin?lectureId=${info.lecture.id}"><button class="btn btn-2" >进群听讲座</button></a>
</c:otherwise>
</c:choose>
</section>
</c:when>
<c:otherwise>
<section class="intro">
<div class="price-1">
<div>
￥<em><fmt:formatNumber type="number"
maxFractionDigits="0" value="${info.lecture.price}" /></em>.00
</div>
</div>
<c:choose>
<c:when test="${info.lecture.status == 0 }">
<button class="btn btn-3">已结束</button>
</c:when>
<c:otherwise>
<button id = "pay" class="btn btn-1">立即购买</button>
</c:otherwise>
</c:choose>

</section>
</c:otherwise>
</c:choose>

<main class="cont">
<section>
<h4>报名须知</h4>
<p>${info.lecture.ticketDescription }</p>

</section>
</main>

<script src="<%=basePath%>js/jquery.min.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/share.js"></script>
<script type="text/javascript">
var lectureId=$("#lectureId").val();
$.ajax({
type: "post",
url: "<%=basePath%>wx/getJsapiSignature",
data: {
url: "" + window.location
},
success: function(msg) {
reg(msg);
}
});

function reg(ret) {
wx.config({
debug: false,
appId: ret.appid,
timestamp: ret.timestamp,
nonceStr: ret.noncestr,
signature: ret.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'onVoicePlayEnd',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'translateVoice',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'closeWindow',
'scanQRCode',
'chooseWXPay'
]
});
}

$(document).ready(function() {

$("#pay").click(function() {

$.ajax({
type: "post",
url: "<%=basePath%>wx/getLecturePayInfo",
data: {
lectureId: lectureId
},
success: function(res) {
if (res.flag == 'true') {
wxPay(res);
} else {
alert(res.msg);
}
},
error: function() {
alert("暂时无法支付，请稍后再试");
}
});

});

function wxPay(res) {

wx.chooseWXPay({
'timestamp': res.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
'nonceStr': res.nonceStr, // 支付签名随机串，不长于 32 位
'package': res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
'signType': res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
'paySign': res.paySign, // 支付签名
success: function(res) {
location.href="<%=basePath%>/lecture/detail?lectureId=${info.lecture.id}";
},
cancel: function(res) {
},
fail: function(res) {
}
});
}

wx.ready(function () {
share("堂火热报名！领衔6位献！","原价522元，现只需68元，就可以听9场！足有3场哦！快来报名吧！ ","http://mp.weixin.qq.com/s?__biz=MzIxOTA5MTQwNQ==&mid=506114802&idx=1&sn=047d1d6e486631709414e670c0caa915#rd","http://weixin.drcuiyutao.com/img/share.jpg");
});

</script>

</body>
</html>

类文件已经上传到资源中：http://download.csdn.net/detail/lixld/9585708

step1：引入js

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

step2:引入自己简单封装的分享js---share.js地址http://download.csdn.net/detail/lixld/9585721

step3:微信后台配置授权的url，请求下面的服务，获取到用户信息，并存入session

step4:进入页面后异步调用方法：创建jsapi调用的签名：

【签名成功后，会调用wx.ready(){}方法：在这个方法中拼装share】

step5:进入页面后调用方法getLectureInfo：获取前面session中保存的用户信息：

返回后台拼装的数据对象，在success()方法中调用wxPay；实现微信支付

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信开发

相关文章推荐

新的分享

章节导航