个人中心 | 微信开放社区

针对使用hash进行路由的项目，不管是Vue还是React，都不在适合作为唤起纯签约的主体界面，很多人用本地存储来标识状态，但如果遇到跨浏览器，这个标识就废了，referer跳转根本就不行了。分享一下我们项目里的做法，背景是：我们项目里是把整个支付抽离，作为一个支付中心，跟业务区分开来，支付/签约完成后都会跳转到业务需要的指定returnUrl进行结果渲染。（当然这个做法也有缺点，就是我们的签约链接在使用过一次后就会跳转到业务，用户如果没有签约，点了返回，那基本无法识别到，只能说在我们的业务架构上，这样的操作基本可以满足需求而已，这个案例就提供一个思路～～～）具体步骤： 1、项目里新建一个contract.html，作为签约业务的中间页，专门用来进行纯签约跳转。 2、在原有业务逻辑中添加逻辑，判断如果是进行纯签约操作，则跳转到签约中间页进行操作。 // redirectUrl 是微信h5签约链接 // returnUrl 是需要执行前往的返回结果链接 // payTag 当前链接执行状态，操作过一次就回更新 window.location.href = `${url}/contract.html?redirectUrl=${encodeURIComponent(redirectUrl)}&returnUrl=${encodeURIComponent(returnUrl)}&payTag=1`; 3、当签约完成后，用户在微信点击“完成”按钮后，根据referer进入contract.html界面后，会执行跳转到returnUrl结果界面。 HTML示例如下，可作参考： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="no-referrer-when-downgrade"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>签约</title> <style> html, body { width: 100%; height: 100%; position: relative; } .loading { font-size: 16px; color: #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <p id="loading" class="loading">Loading...</p> <script> window.onload = function () { // 获取URI参数 const getURIParam = (paramName) => { const currentUrl = window.location.href; const regex = new RegExp("[?&]" + paramName + "(=([^&#]*)|&|#|$)"); const results = regex.exec(currentUrl); if (!results || !results[2]) { return ""; } else { const paramValue = decodeURIComponent(results[2].replace(/\+/g, " ")); return paramValue; } } // 更新url参数 function updateUrl(key, value) { var newurl = updateQueryStringParameter(key, value) window.history.replaceState({ path: newurl }, '', newurl); } // 更新url参数 function updateQueryStringParameter(key, value) { var uri = window.location.href; if (!value) { return uri; } var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); var separator = uri.indexOf('?') !== -1 ? "&" : "?"; if (uri.match(re)) { return uri.replace(re, '$1' + key + "=" + value + '$2'); } else { return uri + separator + key + "=" + value; } } const { href } = window.location; const redirectUrl = getURIParam("redirectUrl"); const returnUrl = getURIParam("returnUrl"); const hrefTag = getURIParam("payTag"); // payTag  1(可用)  0(已使用) if (redirectUrl && hrefTag && hrefTag === "1") { const copyUrl = decodeURIComponent(redirectUrl); updateUrl("payTag", "0"); // 更新链接状态 setTimeout(() => { document.getElementById("loading").innerText = "即将跳转签约..."; }, 700) setTimeout(() => { window.location.href = copyUrl; }, 1500) } else if (hrefTag && hrefTag === "0") { const copyUrl = decodeURIComponent(returnUrl); window.location.href = copyUrl; } else { alert("签约异常，请手动返回") } } </script> </body> </html>

GitHub账号

选择需要上架的开放服务

案例类型