微信公眾號h5支付 以及獲取code（前端部分）

隴錦發表於2019-03-02
H5前端

記錄微信公眾號h5支付（前端部分）

  • 前一段時間換了一家公司，剛來給了一個專案，h5移動端頁面，涉及登陸註冊、微信繫結、購買等。微信支付之前沒做過，不過比較簡單，在這裡記錄一下。

先上官網文件

第一步，先拿到code，拿到code傳給後臺。

  • 這段程式碼填上就可以用，當使用者確認授權以後返回定義的url後，url後就有code引數，然後吧code提出來。
    var appid = "公眾號id";
    var redirect_uri = encodeURIComponent("成功以後返回地址");
    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
複製程式碼
  • 獲取url上附帶的code引數
    
    //轉碼
        function parse_url(url) { //定義函式
    
            var pattern = /(w+)=(w+)/ig; //定義正規表示式
    
            var parames = {}; //定義陣列
    
            url.replace(pattern, function (a, b, c) {
                parames[b] = c;
            });
            return parames; //返回這個陣列.
        }
    //獲取當前url   取到code 
     var url = window.location.href;
     		var params = parse_url(url);
     		//params.code 就是當前的code 
複製程式碼
  • 把code傳給後臺，後臺會返回文件提到的幾個引數
    var appIdVal = appId;
    var timeStampVal = timeStamp;
    var nonceStrVal = nonceStr;
    var packageVal = package;
    var signTypeVal = signType;
    var paySignVal = paySign;
複製程式碼
  • 把引數賦值到函式中即可拉起支付
    function onBridgeReady(){
       WeixinJSBridge.invoke(
          `getBrandWCPayRequest`, {
             "appId":"",      //公眾號id，由商戶傳入     
             "timeStamp":"", //時間戳，自1970年以來的秒數     
             "nonceStr":"",   //隨機串     
             "package":"",    //訂單詳情擴充套件字串
             "signType":"",   //微信簽名方式：     
             "paySign":""     //微信簽名 
          },
          function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
          // 使用以上方式判斷前端返回,微信團隊鄭重提示：
                //res.err_msg將在使用者支付成功後返回ok，但並不保證它絕對可靠。
          } 
       }); 
    }
    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();
    }
複製程式碼
  • 樓主遇到的問題第是公眾號配置問題，因為公眾號不是我自己配置，前端部分寫好後一直拉不起支付，後來也是各種百度，最後確認是授權頁面回撥地址錯誤。
  • 至於後臺樓主就不太清楚了，沒研究過。在這裡記錄一下，希望對其他人有點幫助。

相關文章