小程序跳转webview后路上参数丢失

一、丢失原因

特殊字符未编码
URL 中的 ?、&、# 等特殊字符会被小程序或浏览器解析为分隔符，导致后续参数被截断。例如，若参数本身包含 ?imid=xxx&apitoken=xxx，会被误认为是新的查询参数而非原参数的一部分

未正确处理参数传递流程
小程序跳转 WebView 时，参数需通过 URL 传递到 WebView 的 src 属性中，若未正确拼接或编码，会导致参数丢失

业务域名未配置或未启用 HTTPS
若 WebView 加载的 H5 页面未配置在小程序后台的 业务域名 中，或未使用 HTTPS 协议，可能导致页面无法加载，间接引发参数丢失

解决方案

1. 对参数进行编码与解码
   编码（小程序端）：使用 encodeURIComponent() 对参数进行编码，确保特殊字符被转义。

JavaScript
// 小程序跳转代码示例

const data = "https://xxx.com?imid=123&token=abc";
wx.navigateTo({
  url: `/pages/webview/webview?url=${encodeURIComponent(data)}`
});

解码（H5 页面）：在 H5 页面中使用 decodeURIComponent() 还原参数。

JavaScript

// H5 页面获取参数示例（以 Vue 为例）
const urlParams = new URLSearchParams(window.location.search);
const decodedUrl = decodeURIComponent(urlParams.get('url'));
console.log(decodedUrl); // 输出完整 URL

2. 正确处理 URL 拼接
   若参数中包含多层嵌套 URL，需确保从跳转到 WebView 的整个链路中 URL 正确拼接：

JavaScript
// 小程序跳转中间页面（如 webview.js）

onLoad(options) {
  const encodedUrl = options.url;
  this.setData({ h5Url: decodeURIComponent(encodedUrl) });
}

// WXML 中传递到 WebView

<web-view src="{{h5Url}}"></web-view>

3. 检查业务域名和 HTTPS
   在小程序后台 开发管理 > 开发设置 中，将 H5 页面的域名添加到 业务域名 列表。
   确保 H5 页面使用 HTTPS 协议，且所有资源（CSS、JS 等）均为 HTTPS