H5 使用 location.href 调起支付宝后页面空白

2026-10-24支付小周

结论

支付宝能够被调起，说明 alipays:// Scheme 已经生效。打开后出现空白，通常是因为 url 参数没有正确进行 URL 编码。目标地址中的 ?、&、#、= 等字符可能被支付宝启动链接提前解析，导致传入支付宝 WebView 的地址不完整或无效。

处理时，应先对完整的目标页面地址调用 encodeURIComponent()，再将编码结果拼接到支付宝 Scheme 中。

原因分析

下面的写法会产生参数解析冲突：

location.href =
  'alipays://platformapi/startapp?appId=20000067&url=https://example.com/pay?orderId=123&token=abc';

其中的 &token=abc 可能被解析为 startapp 的参数，而不是目标页面 URL 的一部分。支付宝虽然能正常启动，但实际收到的 url 可能只有：

https://example.com/pay?orderId=123

如果目标页面依赖缺失的参数，就可能加载失败、跳转异常或显示空白。

正确写法

先构造完整的目标地址，再对它编码：

const targetUrl =
  'https://example.com/pay?orderId=123&token=abc';

const alipayUrl =
  'alipays://platformapi/startapp?appId=20000067&url=' +
  encodeURIComponent(targetUrl);

location.href = alipayUrl;

如果目标地址包含动态参数，建议使用 URL 和 URLSearchParams，避免手动处理转义：

const targetUrl = new URL('https://example.com/pay');

targetUrl.searchParams.set('orderId', '123');
targetUrl.searchParams.set('token', 'abc');

const alipayUrl = new URL(
  'alipays://platformapi/startapp'
);

alipayUrl.searchParams.set('appId', '20000067');
alipayUrl.searchParams.set('url', targetUrl.toString());

location.href = alipayUrl.toString();

也可以使用字符串模板：

function openInAlipay(targetUrl) {
  const scheme =
    `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(targetUrl)}`;

  window.location.href = scheme;
}

openInAlipay(
  'https://example.com/pay?orderId=123&token=abc'
);

排查步骤

如果编码后仍然显示空白，可以按以下顺序检查：

将 targetUrl 单独复制到手机浏览器中，确认页面可以正常访问。
确认目标地址是包含 https:// 的完整绝对 URL，不要传入相对路径。
检查服务端是否存在重定向循环、证书异常、请求超时或 4xx、5xx 响应。
检查页面是否依赖普通浏览器环境，例如只识别特定 User-Agent，或主动阻止支付宝 WebView 访问。
检查页面是否受到 X-Frame-Options、CSP、登录态或域名校验限制。
确认目标地址没有被重复编码。多次调用 encodeURIComponent() 也可能导致支付宝无法还原正确地址。
如果 URL 很长，不要把大量业务数据直接放入查询参数。可以只传订单号或短期有效的业务标识，再由服务端查询完整数据。

注意事项

encodeURI() 和 encodeURIComponent() 的用途不同。这里需要编码的是 Scheme 中单独的 url 参数，因此应使用：

encodeURIComponent(targetUrl)

不要只使用：

encodeURI(targetUrl)

encodeURI() 会保留 &、?、# 等部分分隔符，仍可能破坏外层 Scheme 的参数结构。

此外，appId=20000067 所对应能力的实际可用范围、域名限制和客户端兼容性，可能随支付宝侧配置变化。如果目标 URL 已正确编码，也能在普通浏览器中访问，但在支付宝内仍然显示空白，需要结合支付宝客户端日志、目标页面的网络请求和当前开放平台配置继续排查。