微信支付控件调用出现后又消失问题总结

整理电脑发现以前写的一篇博文还在本地（当时用新浪一直发送不成功，现在也是一样，真的想说新浪博客很low，建议大家使用****的，使用很方便）。现在整理一下发出，希望能给大家带来帮助！！！

好久没有写博客了，都不知道从哪儿开始写了？呜呜~~~~~

也没什么标准格式，就想到哪里写哪里吧。。。。。。

让我写这篇博客的原因是因为有一个问题困扰了我好久，期间通过不同的办法修改代码，当然也百度过但因为是微信二次开发加之业务特殊，网上的信息基本对我没什么帮助，无奈呀无奈，自己的坑只有自己填了，就这样经历了N次的失败后问题终于得到了解决，为了下次不让自己再犯同样的错误及不让各位犯这样的错误，少走弯路，耽误不必要的开发时间，特写下这篇博客，将自己在微信支付中所遇到的问题及解决办法记录下来，希望对大家有所帮助。

接触微信二次开发已经有一段时间了，期间遇到了各种奇葩问题一堆，怎么一个烦字了得呀，好在经过各种斗争问题也都一一解决了。此处应有掌声，自我鼓励一下啦。但问题来了，项目经理说要我把以前的统一支付微信的二次确认页给去掉，说直接发起支付请求。收到任务，我就二话没说，叮咣一顿改呀，很快就改完了，扔到测试环境就开测了，居然有问题在微信支付(公众号支付)的时候，预下单结束，在页面通过jsapi 调用微信支付控件(就是那个微信输入密码的那个框)怎么也调用不起来，真是气煞我也，但有一个奇怪的现象是有一部手机却可以，其它都不行，疑惑呀疑惑，你说要不行应该是都不行的，怎么能就那部手机可以呢？真是百思不得其解呀，没办法不解也得去解，就一行行看日志，用正常的和不正常的一一对比，没问题呀，参数都对着，就是调不起来，无奈换种写法，在换种写法，依旧如此。

就这样，一天过去了，基本快放弃的时候，突然想进微信公众号后台开发配置看一下，如下图:

 

瞬间恍然大悟，娘的，在做公众号支付的时候，测试需要配置一个测试授权目录及测试白名单呀，定睛一看发现那个可以支付的哥们儿的微信号正在其中，这就解释通了为什么他可以支付，其它人都支付不了了的现象了。马上配上我的微信号，进行测试，ok一切正常，问题迎刃而解。

就是这么一个简单的配置没有做，导致我浪费了一天的宝贵时间，还不停的去改代码，粗心呀粗心，如果你也有遇到了一切正常的情况下控件调用不起来的情况就赶紧去看看这个地方吧，对你有帮助的话记得留言，对我也是一种激励嘛····嘿嘿

在贴一下前台代码给大家参考参考吧:

1.后台调用微信预下单成功并将信息保存到request中，前台放到隐藏域中。

2.js调用微信控件，注意一定要在微信体系内该代码才会被执行。

<script type="text/javascript">
 //当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
           
        var prepay_id = $("#prepay_id").val();
                    
        if(prepay_id=='null' || prepay_id==null){
             alert('cuoxinxi');
        }
        var appId = $("#appId").val();
        var timeStamp = $("#timeStamp").val();
        var nonceStr = $("#nonceStr").val();
        var package_t = $("#package").val();
        var signType = $("#signType").val();
        var paySign = $("#paySign").val();
        
        WeixinJSBridge.invoke('getBrandWCPayRequest',{
                "appId" : appId, //公众号名称，由商户传入
                "timeStamp" : timeStamp, //时间戳
                "nonceStr" : nonceStr, //随机串
                "package" : package_t,//扩展包
                "signType" : signType, //微信签名方式:1.sha1
                "paySign" : paySign //微信签名
          },function(res){
                           
      if(res.err_msg == "get_brand_wcpay_request:ok" ) {
        
            window.location.href = get_faceAddress();
                              
      }
      if(res.err_msg == "get_brand_wcpay_request：cancel" ) {
              alert("支付过程中用户取消");
             window.location.href = get_faceAddress();
      }
      if(res.err_msg == "get_brand_wcpay_request：fail" ) {
            alert("支付失败");
             window.location.href = get_faceAddress();
      }
                                  
    }); 
                    
     WeixinJSBridge.log('yo~ ready.');
   }, false);
        
    function pay_result(){
        window.location.href = get_faceAddress();
    }
        
    function get_faceAddress(){
        var faceAddress = $("#faceAddress").val();
            // var pay_order_no = $("#pay_order_no").val();
            
            //var res_result = faceAddress + "?pay_order_no="+pay_order_no;
            //alert("准备跳向地址:" + res_result);
            return faceAddress;
     }
</script>

后面在做微信相关开发遇到的问题还会写成博客分享，有什么问题欢迎批评指出，相互学习，共同进步.......