标签：ack hit function 生命周期 前后端分离 oca fine and doc
1，微信公众号的支付流程：
前后端分离的情况，在微信环境下---如果当前没有先去请求接口---判断是否有openid——如果有返回数据，如果没有--进行重定向（openid.weixin.qq.com）--返回自己的有opendid的页面
1，第一个坑
1， 在vue的项目中，ios环境中，重定向回来页面空白，最后发现ios在微信公众号的环境下，由于缓存的原因，它会缓存之前的页面请求的状态，导致vue生命周期不再执行，解决的方法用watch 监测路由的参数的变化，重新执行获得数据的方法
2，微信默认的返回bar显示，支付成功返回回到收银台回不去的处理
1，安卓的处理、优化，ios的优化
// url 获取openid
const openid = commonFun.curQueryString(curUrl, ‘openid‘);
// 重定之后获取seOpenid，不用再次请求获取openid
const seOpenid = sessionStorage.getItem("seOpenid");
const jOpenid = openid || seOpenid;
const fd = Qs.stringify({
djpayData: djpayDataStr,
openid: jOpenid
});
// 只有微信上有openid 、安卓的环境下
if (openid) {
sessionStorage.setItem("seOpenid", openid);
}
if (openid && isAndroid) {
history.go(-1);
}
2ios的处理
popStateWeixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
pushHistory();
setTimeout(function() {
window.addEventListener(
"popstate",
function(e) {
window.history.go(-1);
// self.location.reload();
// wx.closeWindow();
},
false
);
}, 0);
}
function pushHistory() {
const href = window.location.href;
var state = { title: "title", url: href };
window.history.replaceState(state, "title", href);
}
}
兼容的状况
https://segmentfault.com/q/1010000010903892/a-1020000010908161
3,解决这个问题发现ios7机型有卡死在收银台的状态--fuck
解决这个方法--
setTimeout(function () {
window.location.replace(data.successUrl);
}, 500);
function weixinPay(data) {
function onBridgeReady() {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
JSON.parse(data.thirdayParam),
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 添加延迟在微信公众号的时候，ios到收银台有假死的状态，等待同步的事件处理完成，处理这个问题添加的延迟的事件
setTimeout(function () {
window.location.replace(data.successUrl);
}, 500);
} else if (
res.err_msg == "get_brand_wcpay_request:cancel" ||
res.err_msg == "get_brand_wcpay_request:fail"
) {
// 文案提示有用取消支付
// alert("取消支付");
own.openModal(null, null, "提示", "取消支付", "normal");
} else {
own.openModal(
null,
null,
"提示",
res.err_msg,
"normal"
);
}
}
);
}
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 {
onBridgeReady();
}
}
支付微信公众号遇到的坑--解决方案
标签：ack hit function 生命周期 前后端分离 oca fine and doc
原文地址：https://www.cnblogs.com/yayaxuping/p/9839479.html
