微信jsapi支付對接

微信jsapi對接首先需要獲取code傳給後臺以獲取用戶的openid

剛進入頁面需要判斷是否是在微信app內部打開你頁面的連接
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
當頁面加載完成(){
  if(is_weixin){
    this.isLink()
  }
}
爲什麼要獲取code？
package：統一下單接口返回的prepay_id參數值，提交格式如：prepay_id=***
prepay_id = code（前端獲取）——>openid(後臺拿code去獲取openid)——>prepay_id(後臺拿openid再去獲取prepay_id)

//判斷鏈接 跳轉微信回調以獲取code
isLink(){
            var self = this;
            // alert(self.urlAll)
            //self.urlAll = window.location.href
            if(self.urlAll.indexOf('code=')=='-1'){
		//需要換成自己公司的appid	
                var appId = "111111111";
                var redirect_uri = window.location.origin + window.location.pathname;            
		//這個鏈接的格式是固定的 參數換爲自己的即可,訪問之後微信會在redirect_uri後自動拼接code
		//如你自己的地址爲a.com 則訪問這個頁面後地址會變爲a.com?code=xxx  只能在微信內打開有效 
                //encodeURIComponent是對url的地址進行urlEncode處理（微信需求）

		window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURIComponent(self.urlAll)+"&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect")
            }else{
 		//這裏是獲取code傳給後臺,來換取預支付id
                 this.code = this.getUrlParam('code')
		//調用後臺的pay方法
		//這裏是後臺寫的支付接口,不一定只是傳個code,可能會根據業務需要傳其他參數,總之讓你傳啥傳啥,調用成功後直接調取後面的 wxInnerPay()方法即可
		this.pay(code)
            }
        },
//這個是獲取地址欄中的參數
getUrlParam(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            console.log( window.location.search)
            var r = window.location.href.split('?')[1].match(reg);
            if (r != null) {
            return unescape(r[2]);
            }
            return null;
        },

  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

//這裏切記,頁面js一定要引入微信的jsapi,如上
//下面的兩個方法內部基本不用動,原樣粘上即可
//微信內吊起支付
        wxInnerPay(res) {
	    //res的基本數據我用圖給你們看一下 暫放在代碼底部
            const pay_params = res
            console.log(res)
            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{
                    console.log('onBridgeReady')
                    this.onBridgeReady(pay_params);
            }
        },
        onBridgeReady(params) {
            const pay_params = params;
            const self = this;
            console.log(params)
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": pay_params.appId,  //公衆號名稱，由商戶傳入     
                    "timeStamp": pay_params.timeStamp,  //時間戳，自1970年以來的秒數     
                    "nonceStr": pay_params.nonceStr,  //隨機串     
                    "package": pay_params.package,     
                    "signType": pay_params.signType,  //微信簽名方式：     
                    "paySign": pay_params.sign  //微信簽名 
                },
                function(res){
                    console.log(res)
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // self.queryThirdOrder(3)
                    } 
            }); 
        },

下面是res的基本字段