注:不论开发微信公众号内部任何功能,都要先熟读微信公众号文档。
1、开发微信公众号第一步,首先得完成以下3步配置
注:此部分转载微信公众号开发文档
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
注意 :如果开发环境域名为https 引入域名也要是https !!!
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
关于config接口后台返回的配置 一定要确认后台数据返回是否正确 !!!!
第二去配置微信支付目录
-
1、设置支付目录
请确保实际支付时的请求目录与后台配置的目录一致,否则将无法成功唤起微信支付。
在微信商户平台(pay.weixin.qq.com)设置您的公众号支付支付目录,设置路径:商户平台-->产品中心-->开发配置,如图7.7所示。公众号支付在请求支付的时候会校验请求来源是否有在商户平台做了配置,所以必须确保支付目录已经正确的被配置,否则将验证失败,请求支付不成功。
图7.7 微信公众号支付-支付目录配置
2、设置授权域名
开发公众号支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。具体界面如图7.8所示:
第三去调取微信支付接口
//微信支付
if(p_ajax.isWeixinWeb()) { //首先需要判断时候在微信内部
//payData是我们的接口请求参数
var payData = {
"orderNo":$('#weixinPay').attr('data-orderNo'),
"payMethod": "WeChatJsApi",
'openid':openid
};
// openid 是微信支付必须传的参数 获取方式见微信开发者文档(常见获取方式通过code换取openid)
//p_ajax.postAjax是我二次封装的ajax
p_ajax.postAjax('支付请求接口地址', payData, function(data) {
if(data.code == 0) {
wx.chooseWXPay({
timestamp: data.data.timeStamp,
nonceStr: data.data.nonceStr,
package: data.data.package,
signType: 'MD5',
paySign: data.data.sign,
success: function(res) {
//支付成功跳到支付结果页面
location.href="result.html?orderNo="+$('#weixinPay').attr('data-orderNo');
},
fail: function(res) {
// 支付失败 看自己需求处理
location.href="result.html?orderNo="+$('#weixinPay').attr('data-orderNo');
},
cancel: function() {
// 支付取消 看自己需求处理
$('#lodingBox').hide();
$('#weixinPay').removeAttr('disabled');
}
});
}
}, function() {});
}
第四微信支付调取失败原因
1、支付目录配置失败
2、后台返回参数错误(曾经后台返回参数错误 一直查找自己问题)