微信授權獲取code（微信支付）

摘要：最近在做h5支付，然后發現一個問題，微信自帶瀏覽器不支持h5支付，然后后台又做了一個微信支付的接口，然后要傳code參數，代碼寫好總結后，就發到這里記錄一下；

 

因為有兩個支付接口，所以首先判斷打開頁面的是微信瀏覽器還是其他瀏覽器，代碼如下：

if(ua.match(/MicroMessenger/i) == "micromessenger") {
       //微信瀏覽器
 }else{
       //其他瀏覽器            
 }

 

然后，請求接口實例如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&connect_redirect=1#wechat_redirect

參數的意思為：

 

接着我們要准備的就是，把我們支付的這個APPID與REDIRECT_URI填寫好，appid問產品要，然后redirect_url自己找到自己需要跳轉的地址鏈接，然后需要獲取code的頁面通過上一個頁面跳轉鏈接傳值獲取code即可；

例如：

window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cxxxxxxxxxx42c&redirect_uri=https://xxxxx.com/wap/payOrder.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';

 

隨后，我們需要獲取code的該頁面地址鏈接就會變成：

 

https://xxxxx.com/wap/payOrder.html/?code=abc677adaduiadi7838&state=STATE

 

 

最后，我們通過獲取鏈接取到code，傳值給后台：

 

function getQueryString(name){  
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
     var r = window.location.search.substr(1).match(reg);  
     if (r != null) return unescape(r[2]); return null;              
}  
       
var code = getQueryString("code");

 

這樣，我們就獲取到code。

然后，支付的時候發現一個問題，彈出一個支付窗口，然后閃一下，又消失了，然后打印排查，最后發現是產品沒把支付域名加上去，如圖：

 

 

附上支付js代碼以及需要的參數：(你的參數和后台的參數要嚴格按照規定的命名來寫，注意大小寫)

                    var wxpay = JSON.parse(data).result;

                    function onBridgeReady() {
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": 'wx9cxxxxxxxx442c', //公眾號名稱，由商戶傳入 ok
                                "timeStamp": wxpay.timeStamp, //時間戳，自1970年以來的秒數 ok    
                                "nonceStr": wxpay.nonceStr, //隨機串     
                                "package": wxpay.package,
                                "signType": wxpay.signType, //微信簽名方式    
                                "paySign": wxpay.paySign //微信簽名 
                            },
                            function(res) {
                                if(res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判斷前端返回,微信團隊鄭重提示：
                                    //res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。
                                    console.log('支付成功！')
                                }
                            });
                    }
                    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();
                    }

 

 希望對大家有所幫助。