1. vue 微信支付遇到的坑
使用的vue-router 的hash模式凉袱, 所以頁面的路徑是www.ssss.com/shop/#/home 的樣子,但是微信支付目錄驗(yàn)證不支持這種hash模式阶剑,所以在微信看來目錄是錯誤趾诗。
// Recharge.vue
created() {
let config = {};
config.url = window.location.href;
// 判斷當(dāng)前url是否存在?參數(shù)匹配符
if(!config.url.match(/\?/)) {
location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
return ;
}
}
2. 微信中拉起微信支付控件
1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)句旱;是比較新的方式,需要引入威信度的jssdk
2. 使用老的WeixinJSBridgeReady方式拉起支付控件魄眉,
這次使用的是后面這種方法: 步需要引入七牛的jssdk直接就可以拉起
handleWxpay() {
if(this.isweixin) {
//options 是接口返回的wx的一些配置信息
this.wxReadyToPay(options)
}else {
console.log('open in wx')
}
},
onBridgeReady(options){
let that = this
console.log(options)
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
options,
function(res){
console.log(res);
//使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對可靠燃逻。
switch(res.err_msg){
case "get_brand_wcpay_request:ok": //支付成功
console.log('支付成功')
// that.$router.push({path:'/SettlemenSuccess'})
break;
case "get_brand_wcpay_request:cancel": //支付取消
console.log('取消支付')
break;
case "get_brand_wcpay_request:fail": //支付失敗
console.log('支付失敗')
break;
default:
// console.log(res.err_msg);
break;
}
}
)
},
wxReadyToPay(options){
let that = this
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
}
}else{
that.onBridgeReady(options);
}
},
isweixin() {
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
} else {
return false;
}
},