業務場景介紹：
H5移動端支援微信支付 [ 微信支付分為微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付寶支付 [手機網站支付轉 APP 支付 官方API ]
訂單生成邏輯：前端請求後端送出訂單，後端去和微信或者支付寶對接生成訂單（後續支付都是這個邏輯進行的對接）
一、移動端微信支付，vue中如何玩？
在移動端微信支付分為微信内支付和微信外支付。
1.在訂單元件中選擇支付方式之後在支付頁面先去判斷是否是在微信内：
//判斷是否微信
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步代碼：
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，進行開發，至此微信浏覽器内支付已經完成
//解決微信内置對象報錯
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.元件中調用微信支付：
this.commonUtils.wxpay(res.data.data,function(payResult){
if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
//執行
}
})
二、移動端支付寶支付，vue中如何玩？
其實支付寶支付也有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.選擇支付寶方式之後進入支付寶承載頁面：
<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>
當然不想寫承載頁的還有其他方法調起支付，具體邏輯具體分析，根據不同的業務類型去變通比如：
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是傳回的表單
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
3.進入到支付寶支付頁（至此但有一個問題，調起支付後，使用者中途取消支付或者點傳回鍵會整個網頁一起關閉退出，或者一直在進入支付頁面，不知道有沒有更好的SEO方案）
![【TSP-GA】基于MATLAB的TSP-GA問題優化仿真[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)