jsapi 调起微信支付的的踩坑
问题:
公众微信号调起微信支付的时候,有的时候调起支付成功,有的时候调起支付失败。利用抓包工具抓取数据显示授权和调用后台的微信预支付订单接口都成功并且都返回正确的数据。但是调起支付的时候传入的data老是弹出{‘isTrusted:false’},正常的data应该是调用生成预支付订单的返回数据,即后台给返回的调起微信支付所需要的数据参数。我的代码:
<script src="./js/jquery.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./js/commom.js"></script>
<script>
var code = GET('code');
var data = JSON.parse(window.localStorage.getItem('data')); weixinPayFor(data); //微信生成预支付订单(微信端)
function weixinPayFor(data){
var required_parameter = {
totalprice:data.totalprice,
orderNo:data.orderNo,
code:code,
url:'http://stg.keyidabj.com/mp/wx/cameraVipApp/payment.html',
};
postNet({
param: required_parameter,
action: "/getWeixinPayForPatriarch",
successFull: function successFull(data) {
// console.log(data);
var result = data.result;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady',onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady',onBridgeReady);
}
}else{
onBridgeReady(result);
}
},
failFull: function failFull(data){
$('.loading').hide();
$('.result-container').show();
$('.result-main i').hide();
$('.result-text').addClass('fail-text');
toastText(data.info);
let time = 5;
setInterval(function () {
time--;
if(time>0){
$('.result-text').text(time+'s后页面关闭');
}else {
window.history.go(-1);
}
},1000)
}
});
} function onBridgeReady(data){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":data.appid, //公众号名称,由商户传入
"timeStamp":data.timestamp, //时间戳,自1970年以来的秒数
"nonceStr":data.nonce_str, //随机串
"package":data.packageStr,
"signType":data.signType, //微信签名方式:
"paySign":data.paySign //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok"){
$('.loading').hide();
$('.result-container').show();
$('.result-main i').addClass('success');
$('.result-text').text('支付成功');
$('.result-text').addClass('success-text'); }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
// toastText('支付取消啦');
// errorAlert('您已取消支付');
$('.loading').hide();
$('.result-container').show();
$('.result-main i').addClass('fail');
$('.result-text').text('支付取消');
$('.result-text').addClass('fail-text');
}else if(res.err_msg == "get_brand_wcpay_request:fail"){
$('.loading').hide();
$('.result-container').show();
$('.result-main i').addClass('fail');
$('.result-text').text('支付失败');
$('.result-text').addClass('fail-text');
}
});
} function backIndex(){
window.location.href='./index.html';
}
</script> 原因:
调起微信支付的时候,页面会加载微信的js,会在所有的script标签后面添加一行script用来加载微信的js,而我自己写的js代码没有在所有的js文件加载完成之后调用。即没有用$(function(){ }); 代码包裹起来我的逻辑。会导致加载此页面的时候从上往下执行。
而调用微信预支付订单的接口是异步请求。如果异步请求返回的数据快于微信js加载。则正常走调起微信支付。如果微信js加载完成慢于调用微信预支付订单的接口返回数据。由于
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady(result);
} 这段判断,此时WeixinJSBridge 未初始化完成,故值为undefined 走if语句,此时的onBridgeReady方法没有要求传参数,故取不到data数据,调起支付的参数全都找不到,故调起支付失败。 解决方法:
1.修改if语句。
将if语句修改为如下:
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', function (){
onBridgeReady(result);
}, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', function (){
onBridgeReady(result);
});
document.attachEvent('onWeixinJSBridgeReady', function (){
onBridgeReady(result);
});
}
}else{
onBridgeReady(result);
}
当微信预支付订单调用完成且微信js未加载完成时,走if判断,此时页面会监听有没有WeixinJSBridgeReady,此时是没有,调起微信支付的时候将与支付订单返回的数据传给onBridgeReady函数作为参数。就仍可以调起微信支付。 方法2:
将自己的js逻辑代码用$(function(){});包裹起来,即在所有的js代码加载完成之后执行$(function(){});里面的函数代码,也可以达到想要的效果。 总结:
1.理解微信浏览器的运行机制,异步函数的运行机制。
2.写代码要注意走查,每一步要清除是做什么的,代码如何在浏览器上运行。
3.有目的性的排查问题,多思考,少些盲从的摸索会事半功倍。
jsapi 调起微信支付的的踩坑的更多相关文章
- 怎样调通微信支付及微信发货通知接口(Js API)
怎样调通微信支付及微信发货通知接口(Js API) 微信支付提供了一个支付測试页面,微信支付正式使用须要測通支付.发货通知接口 .告警接口.维权接口.告警接口.维权接口非常easy.支付界面调通也相对 ...
- Android通过Apk插件调起微信支付
App对接微信调起微信支付需要在微信平台注册,鉴别的标识就是App的包名,所以将申请的包名单独打包成一个Apk文件,则在其他的App调起此Apk的时候同样可以起到调用微信支付的功能.这样就实现了调起微 ...
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权
第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...
- Java实现JsApi方式的微信支付
要使用JsApi进行微信支付,首先要从微信获得一个prepay_id,然后通过调用微信的jsapi完成支付,JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支 ...
- 微信支付(公众号)爬坑记,包含 total_fee 失败和 JSAPI 签名验证失败等等
做商城类网站不免会需要做支付功能,目前在中国大陆通用的做法就是使用支付宝支付和微信支付,上一篇博文已经讲个支付宝支付. 这篇文章来讲一讲微信支付,微信支付的方式有很多种,本文主要讲 JSAPI 支付的 ...
- 【微信小程序】调起微信支付完整demo
微信小程序调用微信支付接口 https://blog.csdn.net/u012667477/article/details/80940578
- 亲历H5移动端游戏微信支付接入及那些坑(三)——支付接入
终于到接入支付了,小小的一个微信支付,居然也写了3篇,好长,好累. 接入环境 对接入环境,前端的话,应该是以js为主吧,也有可能是,PHP,Java,C++,或者C#都可以.为什么在此特意提一下接入环 ...
- 亲历H5移动端游戏微信支付接入及那些坑(一)——支付方式与坑
最近项目进入中后期,开始接入支付.要求是使用微信支付,呵呵,好笑的是不知老板从哪里听来的,居然和我说只要是熟手,接个微信支付两小时搞定,我只能再次呵呵.先不说支付处理逻辑,而且公司本来也没现成的接入模 ...
随机推荐
- Java中的抽象
什么是抽象类? 如果一个类没有足够的信息去描述一个具体的对象,那么这样的类我们就称它为抽象类.这很好理解,就如同动物是一个很广泛的概念,由于在动物这个类里,我们无法用很详细的信息去描述狗狗这个具体的对 ...
- RFS常见问题
一.DatabaseLibrary 库遇到的问题:1,连接mysql库,查询语句带有中文,报FAIL UnicodeEncodeError: 'latin-1' codec can't encode ...
- druid 连接池加密算法
package juint; import com.alibaba.druid.filter.config.ConfigTools; public class DruidTest { public s ...
- JVM-GC学习
http://blog.csdn.net/column/details/14851.html 地址记录
- pycharm安装配置
激活 教程https://blog.csdn.net/u014044812/article/details/78727496 推荐修改host文件的方法 配置 https://blog.csdn.ne ...
- C#中添加对象到ArrayList的代码
把开发过程中比较好的一些代码段做个备份,下面代码是关于C#中添加对象到ArrayList的代码. ArrayList alcollect = new ArrayList();string str = ...
- spring xml配置注入改为手动注入过程
项目中需要使用MQ组件来接受消息,但是有的时候,在使用的时候,并不能满足spring注入的条件,无法注入.例如 在jfinal的config的afterJFinalStart中,由于jfinal集成s ...
- Charles手机抓包常见问题(各种常见坑)
坑1.安装好charles后,浏览器搜索会显示不是秘密连接.如果需要搜索东西,请关闭charles
- Django 应用程序 + 模型 + 基本数据访问
如果你只是建造一个简单的web站点,那么可能你只需要一个app就可以了.如果是复杂的象 电子商务之类的Web站点,你可能需要把这些功能划分成不同的app,以便以后重用. 确实,你还可以不用创建app, ...
- Itext生成pdf文件
来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...