微信支付，支付寶支付

移動端微信支付

在移動端微信支付分爲微信內支付和微信外支付。
1.在訂單組件中選擇支付方式以後在支付頁面先去判斷是不是在微信內：php

//判斷是否微信
        is_weixn(){ 
 
  
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){ 
 
  
            return true;
          } else { 
 
  
            return false;
          }
        },

2.觸發當即支付方法，根據微信內外的不一樣請求後端不一樣的接口，若是是微信外支付很是簡單了~
3.【微信外支付】下面先看微信外支付，官方文檔也寫的很清楚，後端返回一個url地址，前端的工做就是拿到這個url地址進行跳轉就能夠了，看一下2-3步代碼：html

handelPay() { 
 
  
          if
          (this.wechatpayType == 'wxpay'){ 
 
  
           // console.log("微信內支付")
            let data={ 
 
  
              amount:this.number,
            }
            this.$http.insideWeChatPay(data).then( res => { 
 
  
              if(res.data.code === 200){ 
 
  
                this.weChatParameter=res.data.data
               // console.log(this.weChatParameter,"微信內支付須要參數")
                this.weixinPay()
              }else{ 
 
  
                Toast({ 
 
  
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          } else if(this.wechatpayType == 'wxpay_php'){ 
 
  
           // console.log("微信外支付")
            let data={ 
 
  
              amount:this.number,
            }
            this.$http.outsideWeChatPay(data).then( res => { 
 
  
              if(res.data.code === 200){ 
 
  
                let url=res.data.data
                window.location.replace(url)   //這裏是後端返回的URL直接進行跳轉便可完成微信外支付
              }else{ 
 
  
                Toast({ 
 
  
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          }
        },

4.在調起支付的頁面監遵從其餘頁面返回的事件，進行一些刷新業務邏輯的實現便可，至此微信外支付已經完成。前端

document.addEventListener("visibilitychange", function() { 
 
  
    //須要的操做
});

5.【微信內支付】微信內支付比起微信外支付稍微複雜一點，可是也不難，（3步驟代碼裏面已經請求支付方式接口拿到了微信內支付所須要的參數）根據官方API
微信內置js對象 WeixinJSBridge，進行開發，至此微信瀏覽器內支付已經完成web

//解決微信內置對象報錯
        weixinPay(data){ 
 
  
          var vm= this;
          if (typeof WeixinJSBridge == "undefined"){ 
 
  
            if( document.addEventListener ){ 
 
  
              document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
            }else if (document.attachEvent){ 
 
  
              document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
              document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
            }
          }else{ 
 
  
            vm.onBridgeReady();
          }
        },
        //微信內置瀏覽器類，weChatParameter對象中的參數是3.步驟代碼中從後端獲取的數據
        onBridgeReady(){ 
 
  
          var  vm = this;
          var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{ 
 
  
              debug:true,
              "appId":vm.weChatParameter.appId,     //公衆號名稱，由商戶傳入
              "timeStamp":timestamp, //時間戳，自1970年以來的秒數
              "nonceStr":vm.weChatParameter.nonceStr, //隨機串
              "package":vm.weChatParameter.package,
              "signType":vm.weChatParameter.signType, //微信簽名方式：
              "paySign":vm.weChatParameter.paySign, //微信簽名
              jsApiList: [
                'chooseWXPay'
              ]
            },
            function(res){ 
 
  
              // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){ 
 
  
                Toast({ 
 
  
                  message: '支付成功',
                  position: 'middle',
                  duration: 3000
                });
                vm.number=null
                vm.$router.go(-1)
                //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
              }else{ 
 
  
                Toast({ 
 
  
                  message: '支付失敗',
                  position: 'middle',
                  duration: 3000
                });
              }
            }
          );
        },

6.微信內部瀏覽器支付也能夠封裝一下，在全局均可以直接調用：後端

//微信瀏覽器支付
function wxpay(params,callback){ 
 
  
  if (typeof WeixinJSBridge == "undefined"){ 
 
  
     if( document.addEventListener ){ 
 
  
         document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
     }else if (document.attachEvent){ 
 
  
         document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); 
         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
     }
  }else{ 
 
  
     onBridgeReady(params,callback);
  } 
}

function onBridgeReady(params,callback){ 
 
  
    var that = this
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', { 
 
  
           "appId":params.appId,          
           "timeStamp":params.timeStamp,         
           "nonceStr":params.nonceStr, 
           "package":params.package,     
           "signType":params.signType, 
           "paySign":params.paySign 
       },
       function(res){ 
 
    
          callback(res)
       }
   ); 
  }

7.組件中調用微信支付：api

this.commonUtils.wxpay(res.data.data,function(payResult){ 
 
  
 	if(payResult.err_msg == "get_brand_wcpay_request:ok" ){ 
 
  
			//執行
     	} 
})

移動端支付寶支付

支付寶支付也有H5支付和支付寶瀏覽器支付，這裏只作H5支付，由於已經知足了業務需求。瀏覽器

1.支付寶中的H5支付和PC端的同樣，主要是後端的工做量，後端完成訂單的生成以後返給前端的是form表單，前端只須要負責作頁面的跳轉便可：微信

//當即支付按鈕
      onSubmit() { 
 
  
        if (this.payWay == 1) { 
 
  
        	//支付寶支付
          	this.$router.push({ 
 
  path: '/aliPay', query: { 
 
  orderId: this.orderId}});
        } else if (this.payWay == 2) { 
 
  
         //微信支付，這裏跳轉到本文的微信支付模塊的3.步驟handelPay方法
        }
      },

2.選擇支付寶方式以後進入支付寶承載頁面：app

<template>
  <div v-html="html"></div>
</template>
<script>
    export default { 
 
  
      data(){ 
 
  
        return{ 
 
  
          html:''
        }
      },
      methods:{ 
 
  
        fetchVideoPay(){ 
 
  
          let param={ 
 
  
            orderId: this.$route.query.orderId
          };
          this.$api.orderpage.videoAliPay(param).then( res => { 
 
  
            this.html = res.data;
            this.$nextTick(() => { 
 
  
              document.forms[0].submit()   //渲染支付寶支付頁面
            })
          })
        }
      },
      mounted(){ 
 
  
        this.fetchVideoPay()
      }
    }
</script>

固然不想寫承載頁的還有其餘方法調起支付，具體邏輯具體分析，根據不一樣的業務類型去變通好比：ide

const div = document.createElement('div');
div.innerHTML = (res.data);  //res.data是返回的表單
document.body.appendChild(div);
document.forms.alipaysubmit.submit();