vuex项目中的微信支付、支付宝支付

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.选择支付宝方式之后进入支付宝承载页面：

最后

喜欢的话别忘了关注、点赞哦~